#site-header {
  background-color: var(--core-colour);
}

.header-title-holder {
  display: flex;
  align-items: flex-end;
  flex-direction: column;

  margin-left: auto;
}

.header-title-holder .header-title,
.header-title-holder .header-sub {
  margin-bottom: 1rem;

  color: var(--secondary-color);
}

.header-title-holder .header-title {
  font-size: 1.75rem;
  font-weight: 700;
/*   font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; */
  line-height: 2.125rem;

  margin-top: 1rem;
  margin-bottom: .5rem;
}

.header-title-holder .header-sub {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.8125rem;
}

.header-navigation-wrapper {
  display: none;
}

/* View Other Developments button — sits between the logo and the title.
   Its margin-left:auto, plus the title's own margin-left:auto, splits the
   free space evenly so the gaps on each side of the button match.
   Matches the homepage .bttn-accent buttons; rounded/square follows the
   global Button Style setting via the .bttn class. */
.view-more-developments-bttn {
  align-self: center;
  flex-shrink: 0;

  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;

  white-space: nowrap;
  text-align: center;
  text-decoration: none;

  color: var(--font-colour);
  border: 1px solid var(--vmd-bg, var(--accent-colour));
  background-color: var(--vmd-bg, var(--accent-colour));
}

.view-more-developments-bttn:hover,
.view-more-developments-bttn:focus {
  opacity: .85;
}

.header-inner.section-inner {
  align-items: flex-start;

  width: 100%;
  max-width: unset;
  margin: 0;
  padding: 1.5rem;
}

.header-titles {
  margin: 0;
}

.header-titles .site-logo {
  display: flex;
  align-items: center;

  margin: 0;
}

.header-titles .site-logo img {
  height: 100px;
}

.header-titles .header-slogan {
  margin-left: var(--gutter);
}

@media screen and ( max-width: 1024px ) {
  .header-titles .site-logo img {
    height: 75px;
  }

  .header-inner.section-inner {
    display: flex;
    align-items: center;
  }

  .header-title-holder .header-sub {
    font-size: 1.25rem;
    line-height: 1.5;
  }

  .header-titles-wrapper {
    display: block;

    padding: 0;
  }

  .header-title-holder .header-title {
    margin-bottom: .25rem;
  }
}

@media ( max-width: 767px ) {
  .header-title-holder .header-sub {
    font-size: 1rem;
    line-height: unset;

    margin: 0;
  }

  .header-title-holder .header-title {
    font-size: 1.5rem;
    line-height: 1.75rem;

    margin: 0;
  }
}

@media screen and (max-width: 575px), screen and (max-height: 575px) {
  .header-titles .site-logo img {
    height: 50px;
  }
  
  .header-title-holder .header-title {
    font-size: .9rem;
    line-height: unset;
    padding-bottom: 0;
    text-align: right;
    margin-top: 12px;
  }
  
  .header-title-holder .header-sub {
    font-size: .8rem;
    text-align: right;
    margin-bottom: 10px;
  }
  
  .header-inner.section-inner {
    padding: .5rem 1.5rem;
  }

  /* Shrink the button so the logo, button and title still fit one row.
     Scoped via .header-inner so it outranks the base .bttn rules in
     button.css (which loads after this file). */
  .header-inner .view-more-developments-bttn {
    flex-shrink: 1;

    padding: .3rem .6rem;

    font-size: .6rem;
    line-height: 1.1;

    white-space: normal;
  }
}