/* The company bar for /atlas/, which does not load homepage.css. Built by compose-atlas.mjs from the
   site-bar block of src/homepage.css (edit the bar there), after the homepage tokens it reads. */
@font-face{font-family:'SYNK Latin';src:url('/assets/inter-tight-medium.woff2') format('woff2');font-weight:500;font-display:swap}
.site-header-wrap{--ink:#0a0a0a;--ink-2:rgba(10,10,10,.68);--ink-3:rgba(10,10,10,.62);--line:rgba(10,10,10,.14);--line-soft:rgba(10,10,10,.08);--sans:'SYNK Latin','SUIT Variable',system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;--ease:cubic-bezier(.2,.7,.2,1);--fast:160ms;--hair:1px;--gutter:clamp(20px,3.4vw,48px)}
@media (min-resolution:2dppx){.site-header-wrap{--hair:.5px}}
@media (min-resolution:2.42dppx){.site-header-wrap{--hair:.84px}}
.site-header-wrap a{text-decoration:none}
.site-header-wrap .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* ── Header: the glass dock ────────────────────────────────────────────── */
/* A frosted capsule holding the felt logo, this site's sections, the five brands and the language.
   It stays where it is while the page moves under it; the page shows through its edge. */
.site-header-wrap{position:sticky;top:0;z-index:60;padding:14px var(--gutter) 0;pointer-events:none}
.site-header-wrap .header{pointer-events:auto}
.header.bar{position:relative;display:flex;align-items:center;gap:4px;width:fit-content;max-width:100%;height:62px;margin:0 auto;padding:0 10px 0 7px;border-radius:999px;isolation:isolate;
 background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(250,250,251,.84));
 -webkit-backdrop-filter:saturate(1.1) blur(20px);backdrop-filter:var(--dock-rim,) saturate(1.1) blur(20px);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(10,10,10,.035),0 0 0 .5px rgba(10,10,10,.12),0 1px 2px rgba(10,10,10,.05),0 14px 34px -18px rgba(10,10,10,.28)}
/* Sunlight from the upper left along the rim, and a little colour where the light leaves the glass. */
.header.bar::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;
 background:radial-gradient(160px 60px at var(--glass-x,16%) var(--glass-y,0%),#fff,rgba(255,255,255,0) 70%),linear-gradient(118deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.2) 22%,rgba(255,255,255,0) 50%,rgba(255,255,255,.15) 78%,rgba(255,255,255,.75) 100%);
 -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* Where the browser bends light (see glass-controls.js), one backdrop filter bends the page at the rim and
   frosts it inside, so the words stay easy to read. The white tint of the frost sits inside the rim only. */
.header.bar.has-rim{background:rgba(255,255,255,.14);-webkit-backdrop-filter:saturate(1.1);backdrop-filter:var(--dock-rim,) saturate(1.1)}
.header.bar.has-rim::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-2;-webkit-mask:var(--dock-frost) center/100% 100% no-repeat;mask:var(--dock-frost) center/100% 100% no-repeat;
 background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(250,250,251,.84))}
/* The felt logo sits in a bead of clearer glass at the head of the dock. */
.bar-logo{display:flex;align-items:center;height:48px;padding:0 20px;margin-right:10px;border-radius:999px;
 background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.62));
 box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(10,10,10,.04),0 0 0 .5px rgba(10,10,10,.1),0 4px 12px -6px rgba(10,10,10,.3);
 transition:box-shadow var(--fast) var(--ease)}
.bar-logo:hover{box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(10,10,10,.04),0 0 0 .5px rgba(10,10,10,.14),0 6px 16px -6px rgba(10,10,10,.34)}
.bar-logo img{width:auto;height:28px}
body[data-site="synk"] .bar-logo img{height:26px}
.bar-menu{display:flex;align-items:center;gap:2px}
.bar-menu a,.bar-brands a,.header-language a{display:inline-flex;align-items:center;height:40px;padding:0 13px;border-radius:999px;font:500 15px/1 var(--sans);letter-spacing:-.015em;color:var(--ink-2);white-space:nowrap;transition:color var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.bar-menu a:hover,.bar-brands a:hover,.header-language a:hover{color:var(--ink);background:rgba(10,10,10,.045)}
.bar-menu a:is([aria-current="location"],[aria-current="page"]){color:var(--ink);text-decoration:underline;text-decoration-thickness:var(--hair);text-underline-offset:6px;transition:none}
.bar-brands{display:flex;align-items:center;gap:0;margin-left:8px;padding-left:8px;border-left:var(--hair) solid var(--line);height:28px}
.bar-brands a{height:34px;padding:0 10px;font:500 11px/1 'SYNK Latin',var(--sans);letter-spacing:.07em;color:var(--ink-3)}
.bar-brands a[aria-current="page"]{color:var(--ink);background:rgba(255,255,255,.95);box-shadow:0 0 0 .5px rgba(10,10,10,.12),0 2px 6px -2px rgba(10,10,10,.18)}
.header-language{display:flex;align-items:center;gap:0;margin-left:4px;padding-left:8px;border-left:var(--hair) solid var(--line);height:28px}
.header-language>span{display:none}
.header-language a{height:34px;padding:0 9px;font:500 11px/1 'SYNK Latin',var(--sans);letter-spacing:.07em;color:var(--ink-3)}
.header-language a[aria-current="page"]{color:var(--ink)}
.menu-toggle{display:none}

@media (prefers-reduced-transparency:reduce){.header.bar{background:rgba(250,250,251,.97);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* Narrower windows keep the logo, the five brands and the language in the dock; this site's sections
   fold into a list that opens under it. Phones fold the brands into that list too. */
@media (max-width:1180px){
 .header.bar{flex-wrap:wrap;align-content:flex-start;padding-right:6px}
 .bar-menu{display:none}
 .bar-brands{margin-left:0;padding-left:0;border-left:0}
 .menu-toggle{order:9;display:inline-grid;place-items:center;width:44px;height:44px;margin-left:2px;border-radius:999px;color:var(--ink)}
 .menu-toggle:hover{background:rgba(10,10,10,.05)}
 .menu-icon,.menu-icon::before{display:block;width:18px;height:var(--hair);min-height:1px;background:currentColor;transition:transform var(--fast) var(--ease)}
 .menu-icon{position:relative;transform:translateY(-3.5px)}
 .menu-icon::before{content:"";position:absolute;left:0;top:7px}
 .header.menu-open{height:auto;padding-bottom:10px;border-radius:28px}
 .header.menu-open .menu-icon{transform:translateY(0) rotate(45deg)}
 .header.menu-open .menu-icon::before{top:0;transform:rotate(-90deg)}
 .header.menu-open .bar-menu{order:10;display:flex;flex-direction:column;align-items:stretch;flex-basis:100%;gap:0;padding:6px 6px 8px 0;border-top:var(--hair) solid var(--line)}
 .header.menu-open .bar-menu a{height:48px;padding:0 4px;border-radius:0;font-size:17px;color:var(--ink);border-bottom:var(--hair) solid var(--line-soft)}
 .header.menu-open .bar-menu a:last-child{border-bottom:0}
 .header.menu-open .bar-menu a:hover{background:none}
}
@media (max-width:900px){
 .site-header-wrap{padding:10px 12px 0}
 .header.bar{width:100%;height:54px;padding:0 6px;border-radius:27px}
 .header.bar.menu-open{height:auto;padding-bottom:10px;border-radius:24px}
 .bar-logo{margin-right:auto;height:42px;padding:0 16px}
 .bar-logo img{height:23px}
 body[data-site="synk"] .bar-logo img{height:21px}
 .bar-brands{display:none}
 .header-language{order:2;margin-left:0;border-left:0;padding-left:0}
 .header-language a{height:44px;padding:0 10px}
 .header.menu-open .bar-brands{order:11;display:flex;flex-wrap:wrap;flex-basis:100%;height:auto;margin:0;padding:8px 6px 4px 0;border-left:0;border-top:var(--hair) solid var(--line);gap:4px}
 .header.menu-open .bar-brands a{height:36px;padding:0 12px}
}