@media screen and (max-width: 820px) {
  .site-header {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "quote"
      "actions"
      "nav" !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    background: var(--paper) !important;
    border-bottom: 1px solid var(--line) !important;
    backdrop-filter: none !important;
  }

  .brand {
    grid-area: brand !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    justify-self: center !important;
    gap: 10px !important;
  }

  .brand-mark {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
  }

  .brand span {
    position: static !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .header-quote {
    grid-area: quote !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    transform: none !important;
    color: var(--copper) !important;
    font-family: var(--serif) !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: normal !important;
  }

  .header-actions {
    grid-area: actions !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .header-actions .header-phone,
  .header-actions .header-email {
    display: block !important;
    flex: 0 0 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--navy) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-transform: none !important;
    user-select: text !important;
  }

  .header-actions .header-phone {
    order: -2 !important;
  }

  .header-actions .header-email {
    order: -1 !important;
    overflow-wrap: anywhere !important;
  }

  .header-actions a {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 0.68rem !important;
  }

  .header-actions .facebook-link {
    width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    font-size: 1.2rem !important;
  }

  .site-nav {
    grid-area: nav !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid var(--line) !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    white-space: normal !important;
  }

  .site-nav a {
    display: flex !important;
    align-items: center !important;
    min-height: 32px !important;
    padding: 5px 0 !important;
    border-bottom: 1px solid transparent !important;
    overflow-wrap: anywhere !important;
  }
}