.logo-image {
  width: 220px;           /* desktop / large screens size */
  height: auto;           /* keeps proportions */
  max-width: 100%;        /* never wider than container */
  display: block;         /* removes bottom gap in some cases */
  transition: width 0.3s ease; /* optional smooth resize */
}

/* Mobile - tablets and phones */
@media (max-width: 768px) {
  .logo-image {
    width: 240px;
  }
}

/* Very small phones */
@media (max-width: 480px) {
  .logo-image {
    width: 200px;
  }
}

/* Default (desktop) */
body {
  padding-top: 0;
}

/* Mobile only: push EVERYTHING down */
@media only screen and (max-width: 767px) {
  body {
    padding-top: 0px !important;
  }
}

/* Optional: even more on tiny phones */
@media only screen and (max-width: 480px) {
  body {
    padding-top: 0px;
  }
}

/* no underline */
a {
  text-decoration: none;
}

/* social coloring on hover */
.social-icons a,
.social-icons i,
.social-icons svg {
    color: #333;
    transition: color 0.3s ease;
}

.social-icons a:hover,
.social-icons a:hover i,
.social-icons a:hover svg {
    color: #b5714a !important;
}

.mobile-menu-text {
    display: none;
}

/* menu size */
@media (max-width: 767px) {
    nav a, .menu a {
        font-size: 21px!important;
        min-height: 30px !important;
        display: flex;
        align-items: right;
        padding: 0px !important;
    }
}

/* Enquire menu item as copper button */
nav a[href*="/enquire"],
.menu a[href*="/enquire"] {
  display: inline-block !important;
  color: #ffffff !important;
  background: #b5714a;
  border: 1px solid #b5714a;
  padding: 7px 16px !important;
  margin-top: 14px;
  letter-spacing: .12em;
  transition: background .25s ease, border-color .25s ease;
}

nav a[href*="/enquire"]:hover,
.menu a[href*="/enquire"]:hover {
  background: #9a603f;
  border-color: #9a603f;
  color: #ffffff !important;
}

/* Mobile and tablet header.
   The theme lays the menu over the header with position:absolute and only
   returns it to the normal flow below 400px, so on any phone wider than that
   the menu covers the tagline. Here the header is a flexible row instead:
   the menu keeps its own width while it fits beside the logo, and moves to
   its own full width row as soon as it stops fitting. No fixed phone width
   is involved, so every screen is handled by the same rule. */
@media only screen and (max-width: 1150px) {
  #side-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 16px;
    row-gap: 14px;
    text-align: left;
  }

  .logo-tagline-wrapper {
    float: none;
    /* The large grow value keeps the menu at its natural width while the two
       share a row. The 420px basis is what decides when the menu moves down. */
    flex: 999 1 420px;
    min-width: 0;
    margin: 0;
    text-align: left;
  }

  .tagline {
    display: block;
    margin-top: 6px;
  }

  .site-menu {
    position: static;
    transform: none;
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin: 0 !important;
    padding: 0;
  }

  ul#menu-main-menu {
    display: block !important;
    margin: 0 auto 0 0 !important;
    padding: 0;
  }

  ul#menu-main-menu > li {
    display: none !important;
  }

  /* Enquire is the only visible item; kill the list line-box so the link
     alone defines the height and stays aligned with the icons. */
  ul#menu-main-menu > li#menu-item-908 {
    display: block !important;
    margin: 0;
    line-height: 0;
  }

  /* Copper filled button matched to the icon row height.
     Point override of the earlier "menu size" block, which forces
     min-height 30px on every nav link and pins the label to the top. */
  nav a[href*="/enquire"],
  .menu a[href*="/enquire"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 0 !important;
    height: auto;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: .16em;
    color: #ffffff !important;
    background: #b5714a;
    border: 0;
    padding: 10px 16px !important;
    margin: 0 !important;
  }

  nav a[href*="/enquire"]:hover,
  .menu a[href*="/enquire"]:hover {
    background: #9a603f;
    color: #ffffff !important;
  }
}

/* Enquiry and contact forms */
.wpcf7 { max-width: 600px; }

.wpcf7 form p {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6a6a74;
  margin: 0 0 20px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  color: #42424d;
  background-color: #ffffff;
  border: 1px solid #d3d6da;
  border-radius: 0;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.wpcf7 select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2342424d' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  border-color: #b5714a;
}

.wpcf7 textarea {
  min-height: 140px;
  resize: vertical;
}

.wpcf7 input[type="submit"] {
  margin-top: 8px;
  padding: 16px 46px;
  background: #42424d;
  color: #ffffff;
  border: 1px solid #42424d;
  border-radius: 0;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}

.wpcf7 input[type="submit"]:hover {
  background: #b5714a;
  border-color: #b5714a;
}

.wpcf7 .wpcf7-not-valid-tip {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: none;
  color: #b5714a;
  margin-top: 7px;
}

.wpcf7 form .wpcf7-response-output {
  margin: 22px 0 0;
  padding: 14px 18px;
  border: 1px solid #b5714a;
  color: #42424d;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: none;
}