/* Fixed full-width navigation, with visible links at every width. */
#header,
#header.scrolled,
body.inside-view #header,
body.apartments-view #header {
  position: fixed;
  inset: 0 0 auto;
  height: 80px;
  padding: 12px 26px;
  gap: 24px;
  border: 0;
  border-bottom: 1px solid #ffffff26;
  border-radius: 0;
  background: #103b30f5;
  box-shadow: 0 8px 28px #071f1b1a;
  backdrop-filter: blur(20px);
  transition: background .25s, box-shadow .25s;
}
#header.scrolled { background: #103b30fa; box-shadow: 0 10px 35px #071f1b33; }
#header .header-links { display: contents; }
#header .nav-rent-short { display: none; }
#header .brand { display: flex; flex-shrink: 0; align-items: center; }
#header .brand img { width: 154px; height: 49px; }
#header nav {
  position: static;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 38px);
  padding: 0;
  border: 0;
  background: none;
}
#header nav a {
  position: relative;
  padding: 15px 0;
  color: #e6ede5;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  transition: color .2s;
}
#header nav a:hover,
#header nav a.current { color: #e4c591; }
#header nav a::after {
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: #d3b17b;
}
#header nav a:hover::after,
#header nav a.current::after { width: 22px; }
#header .header-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 46px;
  margin: 0;
  padding: 11px 20px;
  border: 1px solid #e7d6b4;
  border-radius: 999px;
  background: #eee4cf;
  color: #143d32;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  transition: background .2s;
}
#header .header-contact:hover { background: #fff4df; }
#header .contact-indicator { width: 5px; height: 5px; border-radius: 50%; background: #173e33; }
#header a:focus-visible,
#header button:focus-visible { outline: 2px solid #d3b17b; outline-offset: 5px; }
@media (max-width: 960px) {
  #header,
  #header.scrolled,
  body.inside-view #header,
  body.apartments-view #header {
    height: 70px;
    gap: clamp(8px, 2vw, 16px);
    padding: 10px clamp(10px, 2.2vw, 20px);
  }
  #header .brand img { width: clamp(85px, 17vw, 127px); height: auto; }
  #header .header-links {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    min-width: 0;
    gap: clamp(12px, 2vw, 20px);
    padding: 3px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #header nav {
    flex: none;
    flex-direction: row;
    gap: clamp(12px, 2vw, 20px);
    border-radius: 0;
  }
  #header nav a { font-size: 13px; }
  #header .header-contact { flex: none; min-height: 40px; padding: 8px 12px; font-size: 12px; }
  #header .header-links a:focus-visible { outline-offset: 2px; }
  #header .contact-indicator { display: none; }
}
@media (max-width: 600px) {
  #header,
  #header.scrolled,
  body.inside-view #header,
  body.apartments-view #header {
    align-items: center;
    gap: clamp(5px, 1.8vw, 10px);
    padding: 8px clamp(7px, 2vw, 12px);
  }
  #header .brand img {
    display: block;
    width: clamp(68px, 21.5vw, 126px) !important;
    height: auto;
    /* Center the wordmark alongside the links. The diagonal mark extends below it. */
    transform: translateY(14%);
  }
  #header .header-links {
    flex: 1 1 0;
    container-type: inline-size;
    gap: 0;
    padding: 0;
    overflow: visible;
  }
  #header nav { flex: 4 0 auto; gap: 0; }
  #header nav a,
  #header .header-contact {
    display: inline-flex;
    flex: 1 0 auto;
    position: relative;
    justify-content: center;
    align-items: center;
    min-height: 54px;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: clamp(11.5px, 5.45cqw, 15.5px);
    font-weight: 600;
    white-space: nowrap;
  }
  #header .header-contact { color: #e4c591; }
  #header nav a.current { color: #ffe0a5; }
  #header nav a + a::before,
  #header .header-contact::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1.5px;
    height: .95em;
    background: #d9a76a;
    transform: translate(-50%, -50%) skewX(-22deg);
    pointer-events: none;
  }
  #header nav a::after { bottom: 8px; }
  #header nav a.current::after { width: 14px; }
  #header .header-contact:hover { color: #fff0d4; background: transparent; }
}
@media (max-width: 560px) {
  #header .nav-rent-full { display: none; }
  #header .nav-rent-short { display: inline; }
  #header nav a,
  #header .header-contact { font-size: clamp(11.5px, 5.45cqw, 16.5px); }
}
@media (max-width: 335px) {
  #header nav a,
  #header .header-contact { padding-inline: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  #header, #header a, #header nav a::after { transition: none; }
}