html {
  scroll-padding-top: calc(var(--header-height, 128px) + 16px);
}
.site-masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  box-shadow: 0 1px transparent;
  transition: box-shadow 280ms ease;
}
.site-masthead[data-brand-phase]:not([data-brand-phase="full"]) {
  box-shadow: 0 1px var(--rule);
}
.site-header {
  height: 108px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.site-header nav {
  display: flex;
  justify-content: end;
  margin: 0;
  gap: 22px;
  font-size: 14px;
}
.site-header nav a { white-space: nowrap; }
.site-header .button { white-space: nowrap; }
.site-header .button {
  flex-shrink: 0;
}
.brand {
  /* Ratios follow the approved masters' ink bounds, independent of export size. */
  --wm: 280px;
  --full: calc(var(--wm) * 0.93692449);
  --single: calc(var(--wm) * 0.09484346);
  --xh: calc(var(--wm) * 0.118324125);
  --ink-top: calc(var(--wm) * 0.066758748);
  --cx: calc(var(--wm) * 0.03130755);
  --cy: calc(var(--wm) * 0.06583794);
  /* Clip windows extend past the ink bounds so anti-aliased extremes are never cut. */
  --bleed: 3px;
  --brand-height: 60px;
  position: relative;
  display: block;
  /* Expand the outer clip too; negative margins preserve the layout and ink anchor. */
  width: calc(var(--full) + 2 * var(--bleed));
  height: calc(var(--brand-height) + 2 * var(--bleed));
  margin: calc(-1 * var(--bleed));
  flex: none;
  isolation: isolate;
  overflow: hidden;
}
.brand-initial,
.brand-tail,
.brand-dual {
  position: absolute;
  display: block;
  overflow: hidden;
}
.brand-initial {
  left: 0;
  top: 0;
  width: calc(var(--single) + var(--bleed));
  height: 100%;
  opacity: 1;
  transition: opacity 280ms ease;
}
.brand-original {
  position: absolute;
  display: block;
  width: var(--wm);
  height: auto;
  max-width: none;
  left: calc(var(--bleed) - var(--cx));
  top: calc(var(--bleed) - var(--cy));
}
.brand-tail {
  left: calc(var(--single) + var(--bleed));
  top: 0;
  width: calc(var(--full) - var(--single) + var(--bleed));
  height: 100%;
}
.brand-tail .brand-original {
  left: calc(-1 * (var(--cx) + var(--single)));
  transition: transform 540ms cubic-bezier(0.22, 0.7, 0.2, 1);
}
.brand-dual {
  left: 0;
  top: var(--ink-top);
  width: calc(var(--xh) * 1.00134048 + 2 * var(--bleed));
  height: calc(var(--xh) + 2 * var(--bleed));
  opacity: 0;
  transition: opacity 280ms ease;
}
.brand-dual img {
  display: block;
  position: absolute;
  width: calc(var(--xh) * 1.68096515);
  height: auto;
  max-width: none;
  left: calc(var(--xh) * -0.33914209 + var(--bleed));
  top: calc(var(--xh) * -0.32841823 + var(--bleed));
}
.site-masthead:is(
    [data-brand-phase="retracting"],
    [data-brand-phase="single"],
    [data-brand-phase="doubling"],
    [data-brand-phase="double"],
    [data-brand-phase="undoubling"]
  )
  .brand-tail
  .brand-original {
  transform: translateX(calc(-1 * (var(--full) - var(--single))));
}
.site-masthead:is([data-brand-phase="doubling"], [data-brand-phase="double"])
  .brand-initial {
  opacity: 0;
}
.site-masthead:is([data-brand-phase="doubling"], [data-brand-phase="double"])
  .brand-dual {
  opacity: 1;
}
/* Preserve a generous home-link target even when only the initial is visible. */
.site-masthead:is(
    [data-brand-phase="single"],
    [data-brand-phase="doubling"],
    [data-brand-phase="double"],
    [data-brand-phase="undoubling"]
  )
  .brand {
  width: calc(max(44px, var(--xh)) + 2 * var(--bleed));
}
.brand-static {
  display: block;
  width: 216px;
  height: 54px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.brand-static img {
  display: block;
  position: absolute;
  width: 224px;
  height: auto;
  left: -4px;
  top: -12px;
}
.contact-brand {
  width: 220px;
  height: 220px;
  border-radius: 28px;
  margin-right: 45px;
}
.routing-art .art-detail {
  fill: var(--forest);
}
@media screen and (max-width: 1050px) {
  .brand {
    --wm: 234px;
    --brand-height: 48px;
  }
  .site-header {
    gap: 18px;
  }
  .site-header nav {
    gap: 18px;
    margin-right: 0;
    font-size: 14px;
  }
}
@media screen and (max-width: 1000px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    height: auto;
    padding-block: 16px 12px;
    gap: 10px 14px;
  }
  .site-header nav {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: space-between;
    margin: 0;
    gap: 12px;
    font-size: 14px;
  }
  .site-header nav a { padding-block: 5px; }
  .contact-brand { width: 170px; height: 170px; margin-right: 0; }
}
@media screen and (max-width: 600px) {
  .contact-brand { display: none; }
  .brand { --wm: clamp(164px, calc(100vw - 185px), 208px); --brand-height: 49px; }
  .site-header { gap: 8px 12px; padding-block: 12px 10px; }
  .site-header nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .site-header nav a:nth-child(even) { text-align: right; }
  .site-header .button { padding: 9px 12px; font-size: 14px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-initial,
  .brand-dual,
  .brand-tail .brand-original,
  .site-masthead {
    transition: none;
  }
}
@media (forced-colors: active) {
  /* Keep original ink legible without suppressing the anchor's system focus ring. */
  .brand-initial, .brand-tail, .brand-dual, .brand-static img {
    forced-color-adjust: none;
    background: #f7f8f2;
  }
  .brand:focus-visible, .brand-static:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 5px;
  }
}
@media print {
  .site-masthead {
    position: static;
    box-shadow: none !important;
  }
  .site-masthead .brand {
    width: calc(var(--full) + 2 * var(--bleed)) !important;
  }
  .site-masthead .brand-initial {
    opacity: 1 !important;
  }
  .site-masthead .brand-dual {
    opacity: 0 !important;
  }
  .site-masthead .brand-tail .brand-original {
    transform: none !important;
  }
}