html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.site-menu-toggle {
  width: 42px;
  height: 42px;
  display: grid;
  place-content: center;
  gap: 6px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.site-menu-toggle span {
  display: block;
  width: 23px;
  height: 1px;
  background: currentColor;
  transition: transform .45s cubic-bezier(.22, .7, .22, 1);
}

.site-menu-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.site-menu-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* One stable control on every page: the burger itself morphs into the X.
   Legacy overlay-close buttons would otherwise sit on slightly different
   coordinates depending on the page header. */
.site-menu-close {
  display: none !important;
}

.site-menu-overlay {
  position: fixed;
  z-index: 70;
  isolation: isolate;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(120px, 18vh, 190px) max(32px, calc((100vw - min(1440px, calc(100vw - 64px))) / 2)) clamp(48px, 9vh, 90px);
  overflow-y: auto;
  background: #15231c;
  color: #f5f1e8;
  -webkit-backdrop-filter: blur(22px) saturate(80%);
  backdrop-filter: blur(22px) saturate(80%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path .7s cubic-bezier(.76, 0, .24, 1),
    opacity .5s ease,
    visibility 0s linear .7s;
}

/* Subtle monochrome film grain for the full-screen menu surface. */
.site-menu-overlay::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -18%;
  pointer-events: none;
  opacity: .026;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.9'/%3E%3C/svg%3E");
  background-size: 190px 190px;
  mix-blend-mode: soft-light;
  animation: menuGrainDrift 6s steps(6, end) infinite alternate;
}

.site-menu-overlay__nav,
.site-menu-overlay__meta {
  position: relative;
  z-index: 1;
}

@keyframes menuGrainDrift {
  0% { transform: translate3d(-2%, -1%, 0); }
  35% { transform: translate3d(1%, 2%, 0); }
  70% { transform: translate3d(2%, -2%, 0); }
  100% { transform: translate3d(-1%, 1%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu-overlay::after { animation: none; }
}

.site-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0);
  transition-delay: 0s;
}

/* Version 500: keep the open navigation immune to page-transition layers. */
html body.site-menu-open .site-menu-overlay.is-open {
  display: flex !important;
  z-index: 500 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  clip-path: inset(0) !important;
  filter: none !important;
}

html body.site-menu-open .site-menu-overlay.is-open .site-menu-overlay__nav {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body.site-menu-open .site-menu-overlay.is-open .site-menu-overlay__nav a {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body.site-menu-open .topbar {
  z-index: 510 !important;
}

html body.site-menu-open .topbar .brand,
html body.site-menu-open .topbar .nav-right,
html body.site-menu-open .topbar .site-menu-toggle {
  position: relative !important;
  z-index: 520 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html body.site-menu-open .topbar .brand img {
  visibility: visible !important;
  opacity: 1 !important;
}

html body.site-menu-open .topbar .site-menu-toggle,
html body.site-menu-open .topbar .site-menu-toggle span {
  color: #f5f1e8 !important;
}

html body.site-menu-open .topbar .site-menu-toggle span {
  display: block !important;
  background-color: #f5f1e8 !important;
}

/* Subpages use a calm crossfade; the index keeps its original reveal. */
body:not(.index-page--listing4) .site-menu-overlay {
  clip-path: none !important;
  transform: none !important;
  transition: opacity .45s ease, visibility 0s linear .45s;
}

body:not(.index-page--listing4) .site-menu-overlay.is-open {
  clip-path: none !important;
  transform: none !important;
  transition-delay: 0s;
}

.site-menu-overlay__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.site-menu-overlay__nav a {
  color: #f5f1e8;
  font: 400 48px/1 "larken", Georgia, serif;
  letter-spacing: -.025em;
  text-decoration: none;
}

.site-menu-overlay__nav a:hover { opacity: .58; }
.site-menu-overlay__nav a + a { margin-top: .22em; }

.site-menu-overlay__meta {
  width: 100%;
  color: rgba(245, 241, 232, .7);
  font: 400 9px/1.8 "Inter", Arial, sans-serif !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
}

.site-menu-overlay__meta,
.site-menu-overlay__meta * {
  font-family: "Inter", Arial, sans-serif !important;
}

.menu-overlay__meta,
.menu-overlay__meta * {
  font-family: "Inter", Arial, sans-serif !important;
  font-style: normal !important;
}

.site-menu-overlay__meta p { margin: 0; }

body.site-menu-open { overflow: hidden; }

body.site-menu-open .topbar {
  z-index: 400 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  border-bottom-width: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: none !important;
}

body.site-menu-open .topbar .nav {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  border-bottom-width: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  transition: none !important;
}

/* Suppress legacy page-header hairlines while the full-screen menu is open. */
body.site-menu-open .topbar::before,
body.site-menu-open .topbar::after,
body.site-menu-open .topbar .nav::before,
body.site-menu-open .topbar .nav::after {
  content: none !important;
  display: none !important;
}

body.site-menu-open.is-scrolled .topbar,
body.site-menu-open.is-scrolled .topbar .nav,
body.site-menu-open .site-menu-overlay,
body.site-menu-open .site-menu-overlay.is-open {
  border: 0 !important;
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body.site-menu-open .topbar,
body.site-menu-open .topbar a,
body.site-menu-open .topbar button,
body.site-menu-open .topbar .brand-subtitle {
  color: #f5f1e8;
}

body.site-menu-open .topbar .brand-subtitle {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 60 !important;
  pointer-events: none !important;
}

/* Never reveal the hero subtitle beneath the logo while the menu opens. */
html body.site-menu-open .topbar .brand-subtitle,
html body.site-menu-open.is-scrolled .topbar .brand-subtitle {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
  transition: none !important;
  pointer-events: none !important;
}

body.site-menu-open .topbar .brand img {
  content: url("https://www.quietcation.com/Quietcation-Logo-Off-White.png");
  filter: none !important;
}

body.site-menu-open .topbar .brand,
body.site-menu-open .topbar .nav-right {
  position: relative;
  z-index: 80;
}

.topbar .brand,
.topbar .brand:hover,
.topbar .brand:focus-visible {
  opacity: 1 !important;
}

.topbar .brand img,
.topbar .brand:hover img,
.topbar .brand:focus-visible img {
  opacity: 1 !important;
}

body.site-menu-open .topbar .brand:hover,
body.site-menu-open .topbar .brand:focus-visible {
  opacity: 1 !important;
}

body.site-menu-open .topbar .brand,
body.site-menu-open .topbar .brand:hover,
body.site-menu-open .topbar .brand:focus-visible,
body.site-menu-open .topbar .brand img,
body.site-menu-open .topbar .brand:hover img,
body.site-menu-open .topbar .brand:focus-visible img {
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
}

@media (max-width: 840px) {
  body.about2-page .topbar,
  body.about2-page.is-scrolled .topbar,
  body.about2-page .topbar .nav,
  body.about2-page.is-scrolled .topbar .nav {
    border: 0 !important;
    border-bottom: 0 !important;
    border-bottom-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.about2-page .topbar::before,
  body.about2-page .topbar::after,
  body.about2-page .topbar .nav::before,
  body.about2-page .topbar .nav::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
  }

  body.about2-page.site-menu-open .topbar,
  body.about2-page.site-menu-open.is-scrolled .topbar,
  body.about2-page.site-menu-open .topbar .nav,
  body.about2-page.site-menu-open.is-scrolled .topbar .nav {
    border: 0 !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
  }
}

/* Unified, more present logo scale for mobile and tablet navigation. */
@media (max-width: 980px) {
  html body .topbar .brand img {
    width: auto !important;
    height: 48px !important;
  }
  html body.is-scrolled:not(.site-menu-open) .topbar .brand img {
    height: 44px !important;
  }
  html body.site-menu-open .topbar .brand img,
  html body.is-scrolled.site-menu-open .topbar .brand img,
  html body .site-menu-overlay__brand img {
    width: auto !important;
    height: 48px !important;
  }
}

body.index-page--listing4.site-menu-open .topbar .sound-toggle {
  visibility: hidden;
  pointer-events: none;
}

body.listing-page--nohero .content-layer {
  padding-top: clamp(86px, 8vw, 108px);
}

body.listing-page--nohero main {
  background-color: #cfc2b3;
}

@media (max-width: 840px) {
  .listing-breadcrumb,
  .breadcrumb {
    display: none !important;
  }

  body.listing-page--nohero .content-layer { padding-top: 76px; }

  /* One consistent, more present mobile logo across all shared-header pages. */
  .topbar .brand img,
  body.is-scrolled .topbar .brand img {
    width: auto !important;
  }

  .topbar .brand img { height: 38px !important; }
  body.is-scrolled .topbar .brand img { height: 34px !important; }
}

@media (max-width: 640px) {
  body.listing-page--nohero .content-layer { padding-top: 72px; }
  .site-menu-overlay { padding: 105px 20px 38px; }
  .site-menu-toggle {
    width: 44px;
    height: 44px;
    margin-right: -10px;
  }
  .site-menu-overlay__meta {
    font-size: 9px !important;
    line-height: 1.8 !important;
    letter-spacing: .14em !important;
  }
}

/* iOS: pull either menu implementation into the status-bar and home-indicator bands. */
@media (max-width: 980px) {
  html body .site-menu-overlay,
  html body .site-menu-overlay.is-open,
  html body.site-menu-open .site-menu-overlay.is-open,
  html body .menu-overlay,
  html body .menu-overlay.is-open,
  html body.menu-open .menu-overlay.is-open {
    top: calc(0px - env(safe-area-inset-top, 0px)) !important;
    bottom: calc(0px - env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100dvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)) !important;
    background-color: #15231c !important;
  }

  /* The rounded iPhone corners belong to the document surface, not to the
     header. Keep one opaque state while either menu is open. */
  html:has(body.site-menu-open),
  html:has(body.menu-open),
  html:has(body.site-menu-open) body,
  html:has(body.menu-open) body {
    background: #15231c !important;
    background-color: #15231c !important;
  }
}