/* ============ Globals (from prototype <style>) ============ */

/* Script face. Local Market Script — Cindy Kinash & Charles Gibbons for
   Cultivated Mind, sold through MyFonts. Self-hosted from assets/fonts/.
   Licence: Rachel confirmed 2026-09-03 that Sylvie Dee's holds it. The file
   shipped here came from a third-party mirror, so if the licensed MyFonts web
   kit is ever supplied, swap the two files in assets/fonts/ and change nothing
   else. Sacramento remains the fallback if the file fails to load. */
@font-face {
  font-family: 'Local Market Script';
  src: url('assets/fonts/local-market-script.woff2') format('woff2'),
       url('assets/fonts/local-market-script.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand type, confirmed with Rachel 8/31 and again 9/1: these are two roles,
     not two options — Local Market Script is the Sylvie Dee's script, Poppins
     is the print type. */
  --font-print: 'Poppins', sans-serif;
  --font-script: 'Local Market Script', 'Sacramento', cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-print);
  color: #2A2C42;
  background: #FFFBF4;
  -webkit-font-smoothing: antialiased;
}
section { scroll-margin-top: 76px; }
a { -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-family: var(--font-print); }
input:focus, textarea:focus, select:focus {
  outline: 2px solid #E97A6E;
  outline-offset: 1px;
  border-color: #E97A6E !important;
}

@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes floaty2 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-20px) rotate(10deg)} }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes wiggle { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }

/* ============ Hover states (replacing the design tool's style-hover) ============ */
.nav-link:hover { background: #F7D4CD; }
.btn-lift:hover { transform: translateY(-2px); }
.btn-lift3:hover { transform: translateY(-3px); }
.btn-outline-dark:hover { background: #2A2C42; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; }
}

/* Full-bleed hero */
/* !important because .hero-badge carries an inline display:flex to center the mark. */
@media (max-width: 900px) { .hero-badge { display: none !important; } }

/* Mobile nav */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 40px;
  padding: 0 9px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background: #2A2C42;
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px 16px 16px;
    background: #FFFBF4;
    border-bottom: 1px solid #F2E2D9;
    box-shadow: 0 18px 30px rgba(42,44,66,.10);
  }
  .nav-links.open { display: flex !important; }
  .nav-links a { padding: 13px 14px; font-size: 16px; }
  .nav-links a:last-child { margin: 8px 0 0; text-align: center; }
}
/* Four items overflow a phone at the desktop tracking; !important beats the inline style. */
@media (max-width: 480px) { .hero-pill { letter-spacing: 1px !important; font-size: 11px !important; padding: 7px 12px !important; } }