/* Identical header/footer proportions, independent of JavaScript and fonts loading. */
.brand {
  --brand-mark-size:44px;
  --brand-name-size:17px;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:max-content;
  max-width:100%;
  flex:0 0 auto;
  color:#fff;
  font-weight:760;
  letter-spacing:normal;
  line-height:1;
}
.brand > .brand-mark {
  display:block;
  width:var(--brand-mark-size);
  height:var(--brand-mark-size);
  flex:0 0 var(--brand-mark-size);
  object-fit:contain;
  border-radius:0;
}
.brand-copy { display:grid; grid-template-columns:max-content; gap:6px; min-width:0; }
.brand .brand-name {
  grid-column:auto;
  grid-row:auto;
  align-self:auto;
  display:block;
  font-size:var(--brand-name-size);
  line-height:1;
  letter-spacing:-.035em;
  white-space:nowrap;
}
.brand .brand-name > span { color:var(--orange); margin:0; }
.brand .brand-location {
  grid-column:auto;
  grid-row:auto;
  align-self:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  color:#c5c1b9;
}
.brand .brand-location > span {
  display:block;
  flex:0 0 auto;
  font:650 9px/1 var(--font-geist-mono);
  letter-spacing:.32em;
  /* Cancel the trailing tracking to centre the visible letters. */
  margin-right:-.32em;
}
.brand .brand-location::before,.brand .brand-location::after {
  content:"";
  flex:1 1 0;
  min-width:0;
  height:1px;
  background:#74716c;
}
.header-inner { gap:24px; }
.menu-toggle { flex-shrink:0; }
/* Switch before the full navigation can compete with the signature. */
@media (max-width:1199px) {
  .menu-toggle { display:block; }
  .main-nav {
    display:none;
    position:absolute;
    inset:78px 0 auto;
    height:auto;
    max-height:calc(100dvh - 78px);
    overflow-y:auto;
    background:#111;
    padding:25px;
    flex-direction:column;
    align-items:stretch;
    gap:18px;
  }
  .main-nav.open { display:flex; }
  .nav-cta { justify-content:space-between; }
  body.menu-open { overflow:hidden; }
}
@media (max-width:720px) {
  .brand { --brand-mark-size:38px; --brand-name-size:15px; gap:8px; }
  .brand-copy { gap:5px; }
  .brand .brand-location { gap:8px; }
  .brand .brand-location > span { font-size:8px; }
  .main-nav { top:68px; max-height:calc(100dvh - 68px); }
}
@media (max-width:360px) {
  .header-inner { gap:10px; }
  .brand { --brand-mark-size:34px; --brand-name-size:13px; gap:7px; }
}