.Archive-notice { clear: both; padding: 14px 20px; background: #082b47; color: #fff; font: 12px/1.5 Inter, sans-serif; text-align: center; }
.Demo-message { position: fixed; z-index: 100000; bottom: 20px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); padding: 14px 18px; border-radius: 4px; background: #082b47; color: #fff; box-shadow: 0 2px 15px #0004; font: 14px/1.5 Inter, sans-serif; }
.Demo-message[hidden], [data-archive-hidden][hidden], #js-loadMore[hidden] { display: none !important; }
.Archive-media-notice { position: relative; display: flex; align-items: center; justify-content: center; min-height: 160px; padding: 24px; border: 1px solid #d1d5db; background: #f3f6f8; color: #082b47; text-align: center; font: 14px/1.5 Inter, sans-serif; }
.Archive-search-form { display: flex; width: 100%; background: #fff; border: 1px solid #d1d5db; border-radius: 4px; min-height: 44px; overflow: hidden; }
.Archive-search-form input { min-width: 0; flex: 1; width: 100%; padding: 10px 14px; border: 0; color: #082b47; background: transparent; }
.Archive-search-form button { padding: 8px 14px; background: transparent; color: #082b47; }
.Archive-search-form:focus-within { outline: 2px solid #499bd5; outline-offset: 2px; }
.Archive-search-results { margin: 20px 0; color: #082b47; }
.Archive-search-results article { padding: 18px 0; border-bottom: 1px solid #d1d5db; }
.Archive-search-results h3 { font-size: 23px; line-height: 1.3; margin-bottom: 8px; }
.Archive-search-results p { margin: 0; overflow-wrap: anywhere; }
.Archive-search-stats { margin: 16px 0; font-size: 14px; }
.Archive-pagination { display: flex; flex-wrap: wrap; gap: 8px; }
.Archive-pagination a, .Archive-pagination span { min-width: 32px; text-align: center; }
.Archive-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* The preserved contact template keeps desktop-width columns and 72px padding
   at every viewport. Stack only this section on phones so the original fields
   and full social-icon row remain visible without expanding screenshots. */
@media (max-width: 767px) {
  .ContactUs-container { flex-direction: column; }
  .ContactUs-formContainer, .ContactUs-info { width: 100%; min-width: 0; }
  .ContactUs-info { padding-left: 0; margin-top: 2rem; }
  .ContactUs-info .FooterSocialBanner-icons { flex-wrap: wrap; max-width: 100%; row-gap: 1rem; }
}
@media (max-width: 767px) {
  .OurTeam [role="dialog"] .p-12 { padding: 24px; }
  .OurTeam [role="dialog"] .flex-row { flex-direction: column; align-items: center; }
  .OurTeam [role="dialog"] .flex-row > .w-full { margin-left: 0; margin-top: 1rem; text-align: center; }
}
/* Keep source desktop components intact while allowing their existing content
   to fit phone viewports. Clip only the decorative Why-AmSpa background glow. */
@media (max-width: 767px) {
  .BackgroundHeader-whyAmSpa { overflow-x: clip; }
  .ProductBanner-featureOne--container { flex-direction: column; width: 100%; gap: 1.5rem; }
  .ProductBanner-featureOne--container > h1 { margin-right: 0; }
  .ProductBanner-featureOne--card { min-width: 0; max-width: 100%; }
  .HomeCommunity-cta .w-max { width: 100%; flex-wrap: wrap; justify-content: center; gap: .5rem; }
  .HomeCommunity-cta .w-max > a { margin-right: 0; }
  .MemberCTA-info { min-width: 0 !important; max-width: 100%; width: 100%; }
  main .container:has(> div > a[href^="/resources/vendor-directory/"]) { flex-direction: column; gap: 2rem; }
  main .container:has(> div > a[href^="/resources/vendor-directory/"]) > div { width: 100%; min-width: 0; }
  .vendor_details { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 767px) {
  .entry-siblings > .flex:has(> a.flex) { flex-direction: column; }
  .entry-siblings > .flex > a.flex { width: 100%; min-width: 0; }
  .entry-siblings > .flex > a.flex h3 { min-width: 0; overflow-wrap: anywhere; }
  .blog_content figure { max-width: 100%; }
}
@media (max-width: 767px) {
  .level--heading { flex-direction: column; align-items: flex-start; }
  .level--heading > * { align-self: flex-start; max-width: 100%; min-width: 0; }
}