/* m4innovation.com — shared styles. Page layout lives inline; this file holds the base, the mobile layer and a few shared parts. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #F4EFE6;
  color: #3D3A35;
  font-family: Montserrat, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: #121417; }
a:hover { color: #3D3A35; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #C8A96E;
  outline-offset: 3px;
}

/* Skip link for keyboard users */
.skip { position: absolute; left: -9999px; top: 0; background: #C8A96E; color: #121417; padding: 12px 20px; z-index: 10; }
.skip:focus { left: 16px; top: 16px; }

/* The Room covers: shown in black and white on this site; Ghost keeps the color originals */
.room-cover { filter: grayscale(1) contrast(1.08); background: #D9CFBD; }

/* Form honeypot, hidden from people */
.hp { position: absolute; left: -9999px; }

/* Header menu button, shown on small screens only */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid #F4EFE6;
  color: #F4EFE6;
  font: 600 12px/1 Montserrat, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 16px;
  cursor: pointer;
}

/* Privacy policy and simple text pages */
.prose { max-width: 760px; margin: 0 auto; padding: 80px 48px 100px; }
.prose h1 { font-family: 'Cormorant Garamond', Garamond, serif; font-weight: 500; font-size: 52px; line-height: 1.1; color: #121417; margin: 0 0 12px; }
.prose h2 { font-family: 'Cormorant Garamond', Garamond, serif; font-weight: 500; font-size: 30px; line-height: 1.2; color: #121417; margin: 48px 0 12px; }
.prose p, .prose li { font-size: 16px; line-height: 1.9; }
.prose .meta { font-size: 13px; color: #6E6A63; margin: 0 0 32px; }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; line-height: 1.7; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid #D9CFBD; }
.prose th { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #6E6A63; }
.prose .rule { width: 40px; height: 2px; background: #C8A96E; margin: 0 0 24px; }

/* Tablet and phone */
@media (max-width: 900px) {
  .site-header { padding: 16px 20px !important; }
  .nav-toggle { display: inline-block; }
  .site-nav { display: none !important; width: 100%; flex-direction: column; align-items: flex-start !important; gap: 4px !important; padding: 8px 0 12px; }
  .site-header.open .site-nav { display: flex !important; }
  .site-nav a[href="/contact/"] { margin-top: 12px; }
}
@media (max-width: 760px) {
  main section[style*="padding:"], footer { padding-left: 20px !important; padding-right: 20px !important; }
  main section[style*="padding: 100px"], main section[style*="padding: 80px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  main [style*="max-width: 1296px"] { padding-left: 20px !important; padding-right: 20px !important; padding-top: 48px !important; padding-bottom: 64px !important; }
  main img[style*="height: 560px"], main img[style*="height: 640px"] { height: 340px !important; }
  main h1 { font-size: 40px !important; }
  main h2 { font-size: 32px !important; }
  main [style*="font-size: 28px"][style*="italic"] { font-size: 24px !important; }
  main [style*="minmax(320px"] , main [style*="minmax(300px"] { grid-template-columns: 1fr !important; }
  main [style*="flex: 999 1"], main [style*="flex: 1 1 420px"], main [style*="flex: 1 1 280px"], main [style*="flex: 1 1 300px"] { flex-basis: 100% !important; }
  .prose { padding: 56px 20px 72px; }
  .prose h1 { font-size: 40px; }
  .prose table, .prose thead, .prose tbody, .prose tr, .prose th, .prose td { display: block; }
  .prose thead { display: none; }
  .prose tr { padding: 12px 0; border-bottom: 1px solid #D9CFBD; }
  .prose td { border: 0; padding: 2px 0; }
  .prose td:first-child { font-weight: 600; color: #121417; }
}

/* Partnerships hero: taller on large screens so the river stays in frame */
@media (min-width: 1600px) { main img.hero-snake { height: 720px !important; } }