html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
iframe {
  max-width: 100%;
}

@media (max-width: 767px) {
  body > nav .lg\:hidden,
  .mobile-nav,
  .site-menu-mobile {
    display: none !important;
  }

  body > nav > div:first-child {
    gap: 12px !important;
    padding: 12px 18px !important;
  }

  body > nav img[alt*="Logo"] {
    height: 44px !important;
    max-width: 158px !important;
  }

  body > nav a[href="contact.html"].bg-primary,
  body > nav a[href="contact.html"].cta {
    border-radius: 999px !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    line-height: 1.2 !important;
    padding: 10px 12px !important;
    white-space: nowrap !important;
  }

  body > nav .lg\:hidden {
    padding: 0 0 12px 18px !important;
  }

  body > nav .lg\:hidden > div {
    padding-right: 18px;
    scrollbar-width: none;
  }

  body > nav .lg\:hidden > div::-webkit-scrollbar,
  .mobile-nav::-webkit-scrollbar {
    display: none;
  }

  body > main {
    padding-top: 104px !important;
  }

  section[class*="px-12"],
  section[class*="px-16"],
  div[class*="px-12"],
  div[class*="px-16"],
  footer[class*="px-12"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  section[class*="py-40"],
  section[class*="py-32"],
  section[class*="py-24"],
  footer[class*="py-20"],
  footer[class*="py-16"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .signature-line {
    margin: 0 auto;
    max-width: 84%;
  }

  h1,
  .font-headline.text-5xl,
  .font-noto-serif.text-6xl,
  .font-noto-serif.text-5xl {
    font-size: clamp(34px, 10vw, 44px) !important;
    line-height: 1.08 !important;
  }

  h2,
  .font-headline.text-4xl,
  .font-noto-serif.text-4xl {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.14 !important;
  }

  p,
  .text-lg,
  .lead {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  .text-xs[class*="tracking-"],
  .eyebrow {
    letter-spacing: 0.14em !important;
  }

  .grid[class*="gap-20"],
  .grid[class*="gap-24"],
  .grid[class*="gap-16"],
  .flex[class*="gap-20"],
  .flex[class*="gap-24"],
  .flex[class*="gap-16"] {
    gap: 32px !important;
  }

  .space-y-40 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 56px !important;
  }

  .h-\[600px\],
  .h-\[800px\],
  .max-h-\[500px\] {
    height: auto !important;
    max-height: none !important;
  }

  img.h-\[600px\],
  img.h-\[800px\] {
    aspect-ratio: 4 / 5;
    height: auto !important;
    object-fit: cover;
  }

  .aspect-square {
    min-height: 0;
  }

  .absolute.-bottom-8,
  .absolute.-left-8,
  .absolute.-right-8,
  .absolute.-top-8 {
    display: none !important;
  }

  .flex.flex-wrap.gap-6 > a,
  .flex.flex-wrap.gap-6 > button {
    justify-content: center;
    width: 100%;
  }

  footer .grid,
  footer .flex {
    text-align: left !important;
  }

  .topbar-inner {
    gap: 12px !important;
    padding: 12px 18px !important;
  }

  .brand img {
    height: 44px !important;
    max-width: 158px !important;
  }

  .mobile-nav {
    padding-left: 18px !important;
    padding-right: 0 !important;
  }

  .mobile-nav a {
    padding: 9px 11px !important;
  }

  .cta {
    border-radius: 999px !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    padding: 10px 12px !important;
    white-space: nowrap;
  }

  main {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 104px !important;
  }

  .hero,
  .grid {
    gap: 24px !important;
  }

  .card,
  .meta {
    padding: 24px !important;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  body > main {
    padding-top: 116px !important;
  }

  section[class*="px-12"],
  div[class*="px-12"],
  footer[class*="px-12"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

.hamburger-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(108, 92, 73, 0.22);
  border-radius: 999px;
  background: rgba(250, 249, 247, 0.86);
  color: #6c5c49;
  -webkit-tap-highlight-color: transparent;
}

.hamburger-button__lines {
  position: relative;
  display: block;
  width: 18px;
  height: 14px;
}

.hamburger-button__lines span {
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.hamburger-button__lines span:first-child {
  top: 0;
}

.hamburger-button__lines span:nth-child(2) {
  top: 6px;
}

.hamburger-button__lines span:last-child {
  top: 12px;
}

.hamburger-button[aria-expanded="true"] .hamburger-button__lines span:first-child {
  transform: translateY(6px) rotate(45deg);
}

.hamburger-button[aria-expanded="true"] .hamburger-button__lines span:nth-child(2) {
  opacity: 0;
}

.hamburger-button[aria-expanded="true"] .hamburger-button__lines span:last-child {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-menu-panel {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: none;
  background: #faf9f7;
  color: #2f3331;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.mobile-menu-panel.is-open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu-panel__inner {
  min-height: 100%;
  padding: 116px 24px 32px;
  display: grid;
  align-content: start;
  gap: 26px;
}

.mobile-menu-panel__brand {
  font-family: "Noto Serif", Georgia, serif;
  font-size: 32px;
  line-height: 1.08;
  color: #6c5c49;
}

.mobile-menu-panel__links {
  display: grid;
  gap: 2px;
  border-top: 1px solid rgba(175, 179, 176, 0.35);
  border-bottom: 1px solid rgba(175, 179, 176, 0.35);
}

.mobile-menu-panel__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 0;
  font-family: "Noto Serif", Georgia, serif;
  font-size: 24px;
  line-height: 1.1;
  color: rgba(47, 51, 49, 0.82);
}

.mobile-menu-panel__links a::after {
  content: ">";
  font-family: Manrope, Arial, sans-serif;
  font-size: 15px;
  color: rgba(108, 92, 73, 0.55);
}

.mobile-menu-panel__links a.is-active {
  color: #6c5c49;
}

.mobile-menu-panel__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 18px;
  border-radius: 999px;
  background: #6c5c49;
  color: #fff6f0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mobile-menu-panel__meta {
  display: grid;
  gap: 8px;
  color: rgba(47, 51, 49, 0.62);
  font-size: 14px;
  line-height: 1.6;
}

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

@media (max-width: 1100px) {
  .hamburger-button {
    display: inline-flex;
  }
}

@media (max-width: 767px) {
  .mobile-menu-panel__inner {
    padding-top: 104px;
  }
}