:root{
  --site-header-height:88px;
  --header-scrollbar-width:0px;
}

html{scroll-padding-top:calc(var(--site-header-height) + 16px)}

body.menu-open{overflow:hidden}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  width:100%;
  height:var(--site-header-height);
  background:#fff;
  box-shadow:0 1px rgba(53,77,68,.07);
}
.header-inner{
  position:relative;
  display:flex;
  width:min(1248px,100%);
  height:100%;
  align-items:center;
  justify-content:space-between;
  margin-inline:auto;
  padding-inline:24px;
}
.site-header .brand{display:inline-flex;align-items:center;gap:14px;white-space:nowrap}
.site-header .brand-mark{display:block;flex:0 0 48px;width:48px;height:48px}
.site-header .brand-mark svg{display:block;width:100%;height:100%;fill:none;stroke-width:1.7}
.site-header .brand-mark circle:nth-child(1){stroke:var(--green)}
.site-header .brand-mark circle:nth-child(2){stroke:var(--olive)}
.site-header .brand-mark circle:nth-child(3){stroke:var(--blue)}
.site-header .brand-mark circle:nth-child(4){stroke:var(--teal)}
.site-header .brand-lockup{display:flex;align-items:baseline;gap:9px;color:var(--ink)}
.site-header .brand-enfours{font:22px/1 Georgia,"Times New Roman",serif;letter-spacing:.16em}
.site-header .brand-company{font-size:15px;font-weight:600;line-height:1.75;letter-spacing:.05em}
.global-nav{display:flex;align-items:center}
.global-nav a{
  position:relative;
  padding:9px 23px;
  color:#4f5d61;
  font-size:14px;
  font-weight:600;
  line-height:1.75;
  letter-spacing:.035em;
}
.global-nav a+a::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:11px;
  background:#e3e7e6;
  transform:translateY(-50%);
}
.global-nav a[aria-current="page"]{color:#3f4d51}
.global-nav a:hover{color:var(--green)}
.menu-button{display:none;width:44px;height:44px;border:0;background:none;padding:9px}
.menu-button>span:not(.sr-only){
  display:block;
  width:24px;
  height:1px;
  margin:6px auto;
  background:var(--ink);
  transition:transform .2s ease,opacity .2s ease;
}

@media (max-width:1100px){
  .header-inner{width:min(1008px,100%)}
  .global-nav a{padding-inline:14px}
}

@media (max-width:820px){
  :root{--site-header-height:72px}
  .site-header{height:var(--site-header-height)}
  .header-inner{
    width:100%;
    padding-inline-start:20px;
    padding-inline-end:max(0px,calc(20px - var(--header-scrollbar-width)));
  }
  .site-header .brand{gap:11px}
  .site-header .brand-mark{flex-basis:40px;width:40px;height:40px}
  .site-header .brand-enfours{font-size:20px}
  .site-header .brand-company{font-size:13px}
  .menu-button{display:block;width:46px;height:46px}
  .global-nav{
    position:absolute;
    top:var(--site-header-height);
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    padding:20px 24px 26px;
    border-bottom:1px solid var(--line);
    background:#fff;
    box-shadow:0 18px 30px rgba(31,54,60,.08);
  }
  .global-nav.is-open{display:flex}
  .global-nav a{padding:14px 4px}
  .global-nav a+a::before{display:none}
  .menu-button[aria-expanded="true"]>span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-button[aria-expanded="true"]>span:nth-child(2){opacity:0}
  .menu-button[aria-expanded="true"]>span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

@media (prefers-reduced-motion:reduce){
  .menu-button>span:not(.sr-only){transition:none}
}

header.site-header nav.global-nav a.is-current,
header.site-header nav.global-nav a[aria-current="page"] {
  color:var(--color-accent, #178f84);
  text-decoration-line:underline;
  text-decoration-color:currentColor;
  text-decoration-thickness:1px;
  text-underline-offset:8px;
}

@media (min-width:821px) {
  :root {--site-header-height:clamp(64px,5vw,88px)}
  .site-header .header-inner {width:100%;max-width:none;padding-inline:clamp(28px,5vw,96px);gap:24px}
  .site-header .brand {gap:clamp(10px,1vw,14px);flex-shrink:0}
  .site-header .brand-mark {width:clamp(36px,3.3vw,48px);height:clamp(36px,3.3vw,48px);flex-basis:clamp(36px,3.3vw,48px)}
  .site-header .brand-enfours {font-size:clamp(18px,1.6vw,22px)}
  .site-header .brand-company {font-size:clamp(12px,1.1vw,15px)}
  .site-header .global-nav {flex-shrink:0}
  .site-header .global-nav a {font-size:clamp(12px,1vw,14px);padding-inline:clamp(8px,1.2vw,23px);white-space:nowrap}
  .site-header .global-nav a:last-child {padding-right:0}
}