/* Header layout from the supplied reference, with ReplicWeb's navigation. */
.reference-header {
  --header-ink: #fff;
  --header-panel: rgb(255 255 255 / 10%);
  position: fixed;
  inset: 0 0 auto;
  z-index: 2200;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 24px 32px;
  color: var(--header-ink);
  font: 600 14px/1.4 "Reference Rethink Sans", sans-serif;
  transition: background .3s, color .3s;
}
.reference-header.is-scrolled {
  background: rgb(20 20 20 / 94%);
  backdrop-filter: blur(16px);
}
.home-page[data-nav-theme="light"] .reference-header.is-scrolled {
  --header-ink: #1f1e1e;
  --header-panel: rgb(0 0 0 / 5%);
  background: rgb(250 250 250 / 96%);
}
.reference-brand { display: flex; align-items: center; gap: 10px; width: fit-content; color: inherit; }
.reference-brand svg { width: 37px; height: 35px; flex-shrink: 0; }
.reference-brand > span { font-size: 26px; font-weight: 800; letter-spacing: -1.2px; }
.reference-navigation {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 12px 28px;
  border-radius: 2px;
  background: var(--header-panel);
  backdrop-filter: blur(16px);
}
.reference-navigation a, .reference-navigation summary {
  display: flex; align-items: center; gap: 6px; color: inherit;
  white-space: nowrap; cursor: pointer; list-style: none;
}
.reference-navigation summary::-webkit-details-marker { display: none; }
.reference-nav-text { position: relative; overflow: hidden; display: block; }
.reference-nav-text > span { display: block; transition: transform .3s; }
.reference-nav-text > span + span { position: absolute; inset: 0; transform: translateY(110%); }
.reference-navigation :is(a, summary):hover .reference-nav-text > span:first-child { transform: translateY(-110%); }
.reference-navigation :is(a, summary):hover .reference-nav-text > span + span { transform: translateY(0); }
.reference-dropdown { position: relative; }
.reference-chevron { width: 12px; height: 12px; transition: transform .2s; opacity: .8; }
.reference-dropdown[open] .reference-chevron { transform: rotate(180deg); }
.reference-dropdown-panel {
  position: absolute; top: calc(100% + 18px); left: -20px;
  width: 280px; padding: 10px; border-radius: 2px;
  background: #fafafa; color: #1f1e1e;
  box-shadow: 0 15px 45px rgb(0 0 0 / 14%);
}
.reference-dropdown-panel::before { content: ""; position: absolute; inset: -20px 0 auto; height: 20px; }
.reference-dropdown-panel a { padding: 13px 12px; white-space: normal; border-radius: 2px; }
.reference-dropdown-panel a:hover { background: #fcece5; color: #b9360a; }
.reference-header-contact {
  justify-self: end; padding: 11px 24px; border-radius: 2px;
  color: #1f1e1e; background: #fafafa; font-weight: 700;
  transition: background .2s, color .2s;
}
.reference-header-contact:hover { background: #1f1e1e; color: #fff; }
.reference-header.is-scrolled .reference-header-contact { background: #fc6d3a; color: #fff; }
.reference-menu-toggle { display: none; }
.reference-header :is(a, button, summary):focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.home-page :is(#work-title, #founders-story-title, #faq-title, #contact, #pricing, #positioning) { scroll-margin-top: 110px; }
@media (min-width: 1024px) and (max-width: 1320px) {
  .reference-header { padding-inline: 24px; gap: 16px; }
  .reference-navigation { gap: 16px; padding-inline: 18px; font-size: 12px; }
  .reference-brand > span { font-size: 22px; }
  .reference-header-contact { padding-inline: 18px; }
}
@media (max-width: 1023px) {
  .reference-header { grid-template-columns: 1fr auto auto; gap: 16px; padding: 18px 24px; }
  .reference-brand > span { font-size: 23px; }
  .reference-brand svg { width: 30px; height: 29px; }
  .reference-menu-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; background: transparent; border: 0;
    color: inherit; cursor: pointer; padding: 9px;
  }
  .reference-menu-toggle span { display: block; height: 2px; width: 26px; background: currentColor; transition: transform .2s; }
  .reference-menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .reference-menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .reference-header-contact { padding: 10px 16px; font-size: 12px; }
  .reference-navigation {
    display: none; position: absolute; inset: 84px 16px auto;
    max-height: calc(100dvh - 100px); overflow-y: auto;
    padding: 16px; background: #fafafa; color: #1f1e1e;
    box-shadow: 0 15px 45px rgb(0 0 0 / 15%);
  }
  .reference-header.menu-is-open .reference-navigation { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .reference-navigation > a, .reference-dropdown > summary { padding: 15px 12px; justify-content: space-between; }
  .reference-dropdown-panel { position: static; width: auto; padding: 0 0 8px 12px; box-shadow: none; background: #f4f4f4; }
  .reference-dropdown-panel::before { display: none; }
  .reference-dropdown-panel a { font-weight: 400; font-size: 13px; }
}
@media (max-width: 374px) {
  .reference-header { padding-inline: 16px; gap: 8px; }
  .reference-brand > span { font-size: 20px; }
  .reference-header-contact { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .reference-header, .reference-header * { transition: none !important; }
}