/* Header uses the same deep green, gold and coral palette as the premium footer. */
.site-header{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0 max(4vw,28px)!important;
  background:#112f28!important;
  color:#fff!important;
  border-bottom:1px solid rgba(244,201,115,.34)!important;
  box-shadow:none!important;
}
.site-header .brand{color:#fff!important}
.site-header .site-brand-name{
  color:#fff!important;
  font:700 clamp(.76rem,1.05vw,.94rem)/1.16 var(--sans)!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
  transform:none!important;
  transform-origin:initial!important;
  text-shadow:none!important;
  filter:none!important;
  animation:none!important;
  transition:color .2s ease,opacity .2s ease!important;
}
.site-header .brand:hover .site-brand-name,
.site-header .brand:focus-visible .site-brand-name{
  color:#f4c973!important;
  transform:none!important;
  filter:none!important;
}
.site-header .header-contact-action{
  border-color:rgba(255,255,255,.28)!important;
  background:rgba(255,255,255,.055)!important;
  color:#fff!important;
}
.site-header .header-contact-action:first-child{
  border-color:#f4c973!important;
  background:#f4c973!important;
  color:#15352d!important;
}
.site-header .header-contact-action:hover,
.site-header .header-contact-action:focus-visible{
  border-color:#ef7859!important;
  background:#ef7859!important;
  color:#fff!important;
}
.site-header .site-nav .nav-action{
  border-color:rgba(244,201,115,.72)!important;
  background:transparent!important;
  color:#fff!important;
}
.site-header .site-nav .nav-action:hover,
.site-header .site-nav .nav-action:focus-visible{
  border-color:#ef7859!important;
  background:#ef7859!important;
  color:#fff!important;
}
.site-header .site-nav .nav-action-dark{
  border-color:#f4c973!important;
  background:#f4c973!important;
  color:#15352d!important;
}
.site-header .site-nav .nav-action-dark:hover,
.site-header .site-nav .nav-action-dark:focus-visible{color:#fff!important}
.site-header .menu-button span{background:#fff!important}

@media(max-width:850px){
  .site-header .site-nav,
  .site-header .site-nav.is-open{
    background:#112f28!important;
    border-top:1px solid rgba(244,201,115,.24)!important;
    box-shadow:0 14px 28px rgba(8,30,23,.28)!important;
  }
}

@media(max-width:600px){
  .site-header .site-brand-name{
    font-size:.68rem!important;
    letter-spacing:.045em!important;
  }
}

/* Navigation replaces the contact buttons in the header. */
.site-header .header-contact-actions{display:none!important}
.site-header .brand-lockup{flex:1 1 auto!important}
.site-header .site-nav{margin-left:auto!important}

@media(max-width:850px){
  .site-header{
    display:flex!important;
    align-items:center!important;
    gap:.35rem!important;
    padding:7px 10px!important;
  }
  .site-header .brand-lockup{width:auto!important;min-width:0!important;gap:.4rem!important}
  .site-header .site-nav,
  .site-header .site-nav.is-open{
    position:static!important;
    display:flex!important;
    width:auto!important;
    margin:0 0 0 auto!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    flex:0 0 auto!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:3px!important;
  }
  .site-header .site-nav .nav-action{
    width:auto!important;
    min-height:28px!important;
    padding:.34rem .42rem!important;
    font-size:.48rem!important;
    letter-spacing:.015em!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .site-header .menu-button{display:none!important}
}

@media(max-width:420px){
  .site-header .brand-lockup{gap:.3rem!important}
  .site-header .brand img,
  body .site-header .brand>img{width:34px!important;height:34px!important;max-width:34px!important;max-height:34px!important;flex-basis:34px!important}
  .site-header .site-brand-name{max-width:116px!important;font-size:.5rem!important;letter-spacing:.035em!important}
  .site-header .site-nav .nav-action{padding:.32rem .36rem!important;font-size:.44rem!important}
}

/* Keep the compact mobile header legible while leaving both navigation actions visible. */
@media(max-width:600px){
  .site-header{min-height:60px!important;padding:6px 10px!important}
  .site-header .brand-lockup{gap:.36rem!important}
  .site-header .site-brand-name{max-width:150px!important;font-size:.54rem!important;letter-spacing:.035em!important;line-height:1.12!important}
  .site-header .site-nav{gap:4px!important}
  .site-header .site-nav .nav-action{min-height:30px!important;padding:.34rem .44rem!important;font-size:.48rem!important}
}

/* Mobile brand lockup: keep the name on one line and the business type below it. */
.site-header .site-brand-name .brand-subline{display:inline-block;margin-left:.3em}
@media(max-width:600px){
  .site-header .site-brand-name{
    display:block!important;
    max-width:140px!important;
    font-size:.68rem!important;
    letter-spacing:.03em!important;
    line-height:1.05!important;
    white-space:normal!important;
  }
  .site-header .site-brand-name>span:first-child,
  .site-header .site-brand-name .brand-subline{display:block!important;margin-left:0!important;white-space:nowrap!important}
}

/* Final mobile alignment: keep the business lockup and both navigation actions
   on the same horizontal row.  This follows the mobile grid rules in
   site-experience.css, which otherwise move the navigation onto a second row. */
@media(max-width:850px){
  .site-header{
    display:flex!important;
    grid-template-columns:none!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
    min-height:60px!important;
    padding:6px 10px!important;
  }
  .site-header .brand-lockup{
    display:flex!important;
    align-items:center!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    gap:6px!important;
  }
  .site-header .brand{
    display:flex!important;
    align-items:center!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    padding:0!important;
  }
  .site-header .site-brand-name{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:calc(100vw - 190px)!important;
  }
  .site-header .site-nav,
  .site-header .site-nav.is-open{
    display:flex!important;
    flex:0 0 auto!important;
    width:auto!important;
    margin:0 0 0 auto!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-direction:row!important;
    gap:4px!important;
  }
  .site-header .site-nav .nav-action{
    flex:0 0 auto!important;
    width:auto!important;
    min-height:30px!important;
    padding:.34rem .44rem!important;
    font-size:.48rem!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
}

/* Highest-specificity mobile row override.  The homepage gallery stylesheet
   also targets .home-page .site-header, so this body[class] selector must win
   and keep the brand plus navigation on one row. */
@media(max-width:850px){
  body[class] .site-header{
    display:flex!important;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:6px!important;
    min-height:60px!important;
    padding:6px 10px!important;
  }
  body[class] .site-header .brand-lockup{
    display:flex!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    align-items:center!important;
    gap:6px!important;
  }
  body[class] .site-header .brand{
    display:flex!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    align-items:center!important;
    padding:0!important;
  }
  body[class] .site-header .site-brand-name{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:calc(100vw - 190px)!important;
  }
  body[class] .site-header .site-nav,
  body[class] .site-header .site-nav.is-open{
    display:flex!important;
    position:static!important;
    flex:0 0 auto!important;
    width:auto!important;
    margin:0 0 0 auto!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-direction:row!important;
    gap:4px!important;
  }
  body[class] .site-header .site-nav .nav-action{
    flex:0 0 auto!important;
    width:auto!important;
    min-height:30px!important;
    padding:.34rem .44rem!important;
    font-size:.48rem!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
}