/* Header additions, loaded after site.css. Phones: max-width 700px.
   1. The header sticks to the top of the screen on every page.
   2. On phones, at the top of the page it shows the full logo and the menu button.
      Once scrolled (js/header-sticky.js adds .is-stuck) it switches to the compact view:
      icon mark, Send an enquiry button and menu button. */
html{scroll-padding-top:84px}
.hdr{position:sticky;top:0;z-index:40;transition:box-shadow .15s}
.hdr.is-stuck{box-shadow:0 2px 12px rgba(43,42,40,.12)}
@media (max-width:700px){
  html{scroll-padding-top:76px}
  .hdr .logo{display:flex;min-width:0}
  .hdr .logo-s{display:none}
  .hdr .logo .L{font-size:24px}
  .hdr .hbtn{display:none}
  .hdr .burger{margin-left:auto}
  .hdr.is-stuck .logo{display:none}
  .hdr.is-stuck .logo-s{display:flex}
  .hdr.is-stuck .hbtn{display:inline-flex}
  .hdr.is-stuck .burger{margin-left:0}
}
@media (max-width:374px){
  .hdr .logo .L{font-size:22px}
}
@media (max-width:339px){
  .hdr .logo .L{font-size:19px}
}
@media (prefers-reduced-motion:reduce){.hdr{transition:none}}