.site-header {
  background: rgba(242, 239, 229, .94);
  position: fixed;
  top: 0;
  transition: height .25s ease, box-shadow .25s ease, background .25s ease;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header.is-scrolled {
  background: rgba(242, 239, 229, .98);
  box-shadow: 0 10px 30px rgba(16, 18, 15, .09);
  height: 76px;
}

@media (max-width: 820px) {
  .site-header,
  .site-header.is-scrolled { height: 76px; }

  .menu-btn {
    cursor: pointer;
    position: relative;
    z-index: 2;
  }

  .site-header nav.is-open {
    background: #f2efe5;
    border-bottom: 1px solid rgba(16, 18, 15, .2);
    box-shadow: 0 18px 30px rgba(16, 18, 15, .1);
    display: flex;
    flex-direction: column;
    gap: 0;
    left: 0;
    margin: 0;
    padding: 10px 6vw 24px;
    position: fixed;
    top: 76px;
    width: 100%;
    z-index: 14;
  }
  .site-header nav.is-open a {
    border-top: 1px solid rgba(16, 18, 15, .2);
    font-size: .8rem;
    padding: 17px 0;
  }
}

@media (max-width: 420px) {
  .brand span { display: none; }
  .hero h1 { font-size: clamp(3.35rem, 18vw, 5rem); }
  .hero-photo { height: 390px; }
  .service-grid article { padding: 24px 18px; }
}