/* Header layout. Kept out of the Webflow export so a re-export won't overwrite it.
   Desktop/tablet (768px and up): logo left; "Call us" + numbers and the Contact button on the right,
   all vertically centred. Phones (<768px) keep the Webflow stacked layout. */

@media screen and (min-width: 768px) {
  .header-container {
    align-items: center;
    column-gap: 3vw;
    padding-bottom: 2vw;
  }

  /* Phone block: small label above the numbers, right-aligned, ahead of the button */
  .header-container .header-call-us {
    order: 1;
    padding-top: 0;
    text-align: right;
    color: #4d555b;
    font-size: clamp(14px, 1.45vw, 24px);
    line-height: 1.45;
  }

  .header-container .header-call-us > div:first-child {
    margin-bottom: 0.15em;
    color: #8a8d90;
    font-size: 0.62em;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .header-container .header-call-us a {
    color: #4d555b;
    text-decoration: none;
    white-space: nowrap;
  }

  .header-container .header-call-us a:hover,
  .header-container .header-call-us a:focus-visible {
    color: #ed145b;
    text-decoration: underline;
  }

  /* The Contact button is the main action: last, at the far right */
  .header-container .main-button-red {
    order: 2;
    align-self: center;
    min-width: 0;
    padding: 0.8em 1.8em;
    font-size: clamp(14px, 1.2vw, 20px);
    line-height: 1.2;
    white-space: nowrap;
  }
}

/* Wide enough for both numbers on one line, separated by a dot */
@media screen and (min-width: 992px) {
  .header-container .header-call-us br {
    display: none;
  }

  .header-container .header-call-us .link-3::before {
    content: "\00b7";
    margin: 0 0.55em;
    color: #b4b6b8;
  }
}