/* The pantheon.inc site header, rule for rule: extracted from the live site's stylesheet (cascade order kept) so this
   page's logo, nav and their breakpoints sit exactly where they do on pantheon.inc. Scroll behaviour: pantheon-header.js */
.site-header { --header-gutter: clamp(16px, 4vw, 80px); --brand-logo-height: 31.15px; --paper: #fff; --ink: #1c1c1a; --font-sans: "Geist", Arial, Helvetica, sans-serif; --white: #fff; }
@media (max-width: 1120px) { .site-header { --header-gutter: clamp(16px, 3vw, 32px); } }
@media (max-width: 900px) { .site-header { --header-gutter: 16px; } }
.site-header { padding: 28px var(--header-gutter); pointer-events: none; z-index: 10; justify-content: space-between; align-items: center; width: 100%; display: flex; position: fixed; top: 0px; left: 0px; }
.brand { --header-logo-icon-width: calc(var(--brand-logo-height) * .8827); --header-logo-gap: calc(var(--brand-logo-height) * .3774); --header-logo-offset: calc(var(--header-logo-icon-width) + var(--header-logo-gap)); --header-logo-wordmark-width: calc(var(--brand-logo-height) * 2.5288); --header-logo-lockup-width: calc(var(--brand-logo-height) * 3.7889); --header-logo-mask: var(--paper); pointer-events: auto; border: 0px; border-radius: 8px; justify-content: center; align-items: center; width: auto; height: 44px; transition: background 0.22s, border-color 0.22s; display: flex; position: relative; overflow: visible; }
.brand-lockup { --icon-h: 28px; --wordmark-h: 13px; --gap: 13px; --icon-w: calc(var(--icon-h) * .881); --wordmark-w: calc(var(--wordmark-h) * 11.351); height: var(--icon-h); width: calc(var(--icon-w) + var(--gap) + var(--wordmark-w)); display: block; position: relative; overflow: hidden; }
.brand-icon-shield { z-index: 2; align-items: center; height: 100%; display: flex; position: absolute; top: 0px; left: 0px; }
.brand-icon-img { height: var(--icon-h); width: auto; display: block; }
.brand-wordmark-window { bottom: 0px; left: calc(var(--icon-w) + var(--gap)); transition: opacity 0.26s; position: absolute; top: 0px; right: 0px; overflow: hidden; }
.brand-wordmark-track { will-change: transform; align-items: center; height: 100%; transition: transform 0.45s cubic-bezier(0.87, 0, 0.13, 1); display: flex; position: absolute; top: 0px; left: 0px; }
.brand-wordmark-img { height: var(--wordmark-h); width: auto; display: block; }
.site-header:not(.site-header--overlay) .brand-icon-img, .site-header:not(.site-header--overlay) .brand-wordmark-img { filter: invert(); }
.site-header--scrolled .brand-wordmark-track { transform: translate(calc(-100% - 24px)); }
.site-header--scrolled .brand-wordmark-window { opacity: 0; }
.site-header--overlay .header-nav a:hover, .site-header--overlay .header-nav a:focus-visible { color: var(--ink); }
.header-nav { font-family: var(--font-sans); isolation: isolate; pointer-events: auto; background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(28, 28, 26, 0.08); border-radius: 999px; grid-template-columns: repeat(4, minmax(0px, 1fr)); align-items: center; min-width: 320px; padding: 5px; font-size: 14px; display: grid; position: relative; }
.header-nav::before { background: var(--ink); content: ""; opacity: 0; will-change: opacity, transform; z-index: -1; border-radius: 999px; width: calc(25% - 2.5px); transition: opacity 0.18s cubic-bezier(0.4, 0, 1, 1), transform 0.48s cubic-bezier(0.32, 0.72, 0, 1); position: absolute; top: 5px; bottom: 5px; left: 5px; transform: translate(0px); }
.header-nav a { text-align: center; white-space: nowrap; border-radius: 999px; padding: 9px 12px; transition: color 0.22s ease-in-out; position: relative; }
.header-nav:hover::before, .header-nav:focus-within::before { opacity: 1; transition: opacity 0.26s cubic-bezier(0, 0, 0.2, 1), transform 0.48s cubic-bezier(0.32, 0.72, 0, 1); }
.header-nav:has(a:nth-child(2):hover)::before { transform: translate(100%); }
.header-nav:has(a:nth-child(2):focus-visible)::before { transform: translate(100%); }
.header-nav:has(a:nth-child(3):hover)::before { transform: translate(200%); }
.header-nav:has(a:nth-child(3):focus-visible)::before { transform: translate(200%); }
.header-nav:has(a:nth-child(4):hover)::before { transform: translate(300%); }
.header-nav:has(a:nth-child(4):focus-visible)::before { transform: translate(300%); }
.header-nav a:hover, .header-nav a:focus-visible { color: var(--white); }
@media (width <= 900px) { .site-header { padding: 20px 16px; } }
@media (width <= 900px) { .header-nav { gap: 2px; } }
@media (width <= 600px) { .header-nav { width: calc(-32px + 100vw); min-width: 0px; padding: 5px; font-size: 14px; position: absolute; top: 62px; right: 16px; } }
@media (width <= 600px) { .header-nav a { padding: 8px 10px; } }
@media (width <= 760px) { .site-header { padding: 18px 20px; } }
@media (width <= 760px) { .header-nav { width: calc(-40px + 100vw); min-width: 0px; padding: 5px; font-size: 13px; position: absolute; top: 66px; right: 20px; } }
@media (width <= 760px) { .header-nav a { padding: 8px 6px; } }
@media (width <= 520px) { .site-header { padding-inline: 16px; } }
@media (width <= 520px) { .header-nav { width: calc(-32px + 100vw); right: 16px; } }
.site-header { padding-block: 16px; padding-inline: var(--header-gutter); background: 0px 0px; transition: background-color 0.24s, box-shadow 0.24s; }
.site-header--scrolled { background: rgb(255, 255, 255); box-shadow: rgba(28, 28, 26, 0.06) 0px 1px; }
.header-nav { background: 0px 0px; border: 0px; border-radius: 0px; grid-template-columns: repeat(2, auto); gap: clamp(18px, 2.2vw, 34px); min-width: 0px; padding: 0px; font-size: 14px; line-height: 1.4; }
.header-nav::before { display: none; }
.header-nav a { color: var(--ink); border-radius: 0px; padding: 4px 0px; }
.header-nav:hover a { color: rgb(138, 137, 132); }
.header-nav:hover a:hover, .header-nav a:focus-visible { color: var(--ink); }
.site-header--overlay .header-nav:hover a { color: rgba(255, 255, 255, 0.55); }
.site-header--overlay .header-nav:hover a:hover, .site-header--overlay .header-nav a:focus-visible { color: var(--white); }
.site-header--overlay.site-header--scrolled { background: rgb(8, 8, 8); box-shadow: rgba(255, 255, 255, 0.1) 0px 1px; }
@media (width <= 760px) { .site-header { grid-template-columns: 1fr auto; gap: 6px; display: grid; } }
@media (width <= 760px) { .brand { grid-area: 1 / 1; } }
@media (width <= 760px) { .header-nav { grid-area: 2 / 1 / auto / -1; justify-self: stretch; gap: 0px; width: 100%; position: static; top: auto; right: auto; } }
@media (width <= 760px) { .header-nav a { padding: 4px; } }
.site-header--compact .header-nav { gap: 16px; font-size: 14px; }
.site-header--compact .header-nav a { padding-block: 4px; }
@media (width <= 760px) { .site-header { justify-content: space-between; align-items: center; gap: 20px; padding: 16px; display: flex; } }
@media (width <= 760px) { .brand { grid-area: auto; } }
@media (width <= 760px) { .header-nav, .site-header--compact .header-nav { grid-area: auto; justify-self: auto; gap: 18px; width: auto; position: static; top: auto; right: auto; } }
@media (width <= 760px) { .header-nav a { padding: 4px 0px; } }
@media (width <= 760px) { .site-header--compact .header-nav { gap: 18px; font-size: 14px; } }
@media (width <= 900px) { .site-header { flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 20px; padding-block: 16px; display: flex; } }
@media (width <= 900px) { .brand { flex: 0 0 auto; grid-area: auto; } }
@media (width <= 900px) { .header-nav, .site-header--compact .header-nav { flex: 0 0 auto; grid-area: auto; justify-self: auto; width: auto; position: static; top: auto; right: auto; } }