/* Keep navigation within reach without covering anchor destinations. */
:root {--site-header-height:98px}
html {scroll-padding-top:calc(var(--site-header-height) + 20px)}
.site-header {
  position:sticky;
  top:0;
  z-index:30;
  isolation:isolate;
  height:auto;
  min-height:var(--site-header-height);
  background:var(--bg,#080705);
}
/* Paint the wrap's side gutters without creating horizontal page overflow. */
.site-header::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--bg,#080705);
  box-shadow:0 0 0 100vmax var(--bg,#080705);
  clip-path:inset(0 -100vmax);
  pointer-events:none;
}
.skip-link {z-index:40}
.service,.possibilities {scroll-margin-top:0}

/* Complete standalone wordmark: color, edges and O wisp belong to the artwork. */
.site-header .wordmark {
  display:inline-flex;
  position:relative;
  align-items:center;
  flex:0 0 auto;
  width:260px;
  height:70px;
  max-width:100%;
  min-height:44px;
  gap:0;
  line-height:0;
}
.wordmark-image {
  display:block;
  position:absolute;
  width:100%;
  height:auto;
  left:0;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
}
@media(max-width:760px) {
  :root {--site-header-height:106px}
  .site-header {min-height:var(--site-header-height);padding-block:8px;align-items:flex-start;justify-content:flex-start;flex-direction:column;gap:4px}
  .site-header .wordmark {width:208px;height:44px}
  .site-header nav,.site-header .header-right {display:flex;width:100%;flex-wrap:wrap;justify-content:flex-start;gap:4px 12px;font-size:12px}
  .site-header nav a,.site-header .header-right a {display:inline-flex;align-items:center;min-height:36px;padding:7px 0;white-space:nowrap}
  .art-column {position:relative;top:auto}
}
@media(max-width:380px) {
  html:has(.site-header nav.header-right) {--site-header-height:142px}
  .site-header nav.header-right {display:grid;grid-template-columns:repeat(2,max-content);column-gap:22px}
}