:root{
  --bg: #fffaf6;
  --text: #2b2b2b;
  --accent: #b25f3b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.site-header{
  width:100%;
  padding: clamp(28px, 5vh, 48px) clamp(12px, 5vw, 48px);
  position:sticky;
  top:0;
  background:rgba(255,250,246,0.9);
  backdrop-filter: blur(4px);
  z-index:20;
  border-bottom:1px solid rgba(0,0,0,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.logo-link{
  position:absolute;
  left:clamp(12px,5vw,48px);
  flex-shrink:0;
  display:flex;
  align-items:center;
}
.logo-link img{
  height:clamp(48px,6vw,80px);
  max-height:calc(100vh - 80px);
  width:auto;
  display:block;
}
.site-menu{
  display:flex;
  align-items:center;
  justify-content:center;
}
.site-menu ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:row;
  gap:clamp(16px,4vw,40px);
}
.site-menu a{
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  font-size:clamp(16px,2.4vw,20px);
  display:block;
  padding:clamp(10px,1.2vw,14px) 0;
  border-bottom:2px solid transparent;
  transition:border-color 160ms ease, color 160ms ease;
}
.site-menu a:hover{
  color:var(--accent);
  border-bottom-color:var(--accent);
}

.social-icons{
  position:absolute;
  right:clamp(12px,5vw,48px);
  display:flex;
  align-items:center;
  gap:clamp(8px,2vw,16px);
}
.social-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:clamp(40px,5vw,64px);
  height:clamp(40px,5vw,64px);
  border-radius:50%;
  background:rgba(178,95,59,0.08);
  transition:background 160ms ease, transform 160ms ease;
}
.social-link:hover{
  background:rgba(178,95,59,0.15);
  transform:scale(1.1);
}
.social-link img{
  width:60%;
  height:60%;
  display:block;
}

/* Mobile: collapse center nav into a hamburger + mobile menu */
.menu-btn{display:none;background:transparent;border:0;padding:8px;border-radius:6px;cursor:pointer}
.menu-btn .hamburger{display:block;width:22px;height:2px;background:var(--text);position:relative}
.menu-btn .hamburger::before,.menu-btn .hamburger::after{content:"";position:absolute;left:0;width:100%;height:2px;background:var(--text)}
.menu-btn .hamburger::before{top:-7px}
.menu-btn .hamburger::after{top:7px}

.mobile-menu{display:none}

@media (max-width:720px){
  .site-menu{display:none}
  .social-icons{display:none}
  .menu-btn{display:flex;align-items:center;justify-content:center;position:absolute;right:clamp(12px,5vw,48px)}

  /* Mobile menu: compact, high-contrast card */
  .mobile-menu{display:block;position:absolute;left:12px;right:12px;top:calc(100% + 10px);background:#ffffff;border-radius:12px;padding:6px 6px 10px 6px;box-shadow:0 18px 40px rgba(6,8,10,0.12);overflow:hidden;opacity:0;transform:translateY(-10px) scale(0.995);transform-origin:top center;transition:opacity 220ms cubic-bezier(0.2,0.9,0.2,1), transform 220ms cubic-bezier(0.2,0.9,0.2,1);z-index:20;pointer-events:none}

  .mobile-menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

  .mobile-menu ul{list-style:none;margin:0;padding:6px 4px;display:flex;flex-direction:column;gap:6px}
  .mobile-menu li{list-style:none}
  .mobile-menu ul, .mobile-menu li{padding-left:0;margin-left:0}
  .mobile-menu a{display:block;padding:14px 18px;font-size:18px;border-radius:8px;color:var(--text);background:transparent;text-decoration:none;text-align:left;transition:background 140ms ease, color 140ms ease}
  .mobile-menu a:hover{background:rgba(43,43,43,0.04);color:var(--accent)}

  .mobile-menu a + a{margin-top:0}
  .mobile-menu .mobile-social{display:flex;gap:12px;padding:12px 16px;border-top:0;margin-top:8px;justify-content:flex-start}
  /* make social icons smaller inside mobile menu to avoid layout issues */
  .mobile-menu .mobile-social .social-link{width:clamp(28px,6vw,40px);height:clamp(28px,6vw,40px);}
  .mobile-menu .mobile-social .social-link img{width:70%;height:70%}
      /* ensure social links keep their circular background and centered image
        (the generic .mobile-menu a rule sets background:transparent and display:block,
        which hides the circle and can make white icons invisible on a white card) */
      .mobile-menu .mobile-social .social-link{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(178,95,59,0.12);transition:background 160ms ease}
      /* boost contrast for very small screens so white/very-light PNG logos become visible */
      @media (max-width:420px){
        /* stronger circle so light or white PNG logos are visible; remove image inversion */
        .mobile-menu .mobile-social .social-link{background:rgba(43,43,43,0.18)}
        .mobile-menu .mobile-social .social-link img{filter:none;opacity:1;display:block;width:60%;height:60%;object-fit:contain}
      }

  /* backdrop is added dynamically by JS */
  .mobile-backdrop{position:fixed;inset:0;background:rgba(11,10,8,0.28);z-index:18;opacity:0;transition:opacity 180ms ease}
  .mobile-backdrop.visible{opacity:1}
}

.hero{display:flex;align-items:center;justify-content:center;padding:48px 16px}
.hero-media{position:relative;max-width:900px;width:100%;}
.hero-image{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 12px 40px rgba(35,24,17,0.12);filter:brightness(0.65)}
.hero-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.brand{font-family:'Playfair Display',serif;color:var(--bg);font-size:64px;letter-spacing:2px;margin:0 0 12px 0;padding:12px 28px;background:linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0.35));border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,0.2)}
.slogan{font-family:'Playfair Display',serif;color:var(--bg);font-size:clamp(16px,3vw,26px);letter-spacing:2px;margin:0;padding:6px 20px;background:transparent;border-radius:0;font-weight:400;font-style:italic;opacity:0.9}

.page-content{
  padding:48px 16px;
  min-height:calc(100vh - 200px);
}
.container{
  max-width:900px;
  margin:0 auto;
}
.page-content h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(32px,5vw,56px);
  margin:0 0 16px 0;
  color:var(--text);
  text-align: center;
}
.page-content p{
  font-size:clamp(14px,2vw,18px);
  color:rgba(43,43,43,0.7);
  line-height:1.6;
}

/* --- Packages Page Styling --- */
.package-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin-top: 32px;
}
.package-card {
  background: #fffaf6;
  border-radius: 16px;
  box-shadow: 0 6px 32px rgba(35,24,17,0.10);
  padding: 32px 28px 24px 28px;
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.package-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  color: var(--accent);
  margin: 0 0 10px 0;
  text-align: center;
}
.package-desc {
  font-size: 1.1rem;
  color: #2b2b2b;
  font-style: italic;
  margin-bottom: 16px;
  text-align: center;
}
.package-details {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  text-align: center;
}
.package-details li {
  font-size: 1rem;
  color: #6a6a4c;
  margin-bottom: 4px;
}
.package-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 28px;
  font-size: 1.1rem;
  font-family: Inter, system-ui, sans-serif;
  color: #fffaf6;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(178,95,59,0.10);
  transition: background 160ms, box-shadow 160ms;
}
.package-btn:hover {
  background: #a04e2c;
  box-shadow: 0 4px 16px rgba(178,95,59,0.18);
}
.package-info {
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
  font-size: 1rem;
  color: #2b2b2b;
  background: #fffaf6;
  border-radius: 12px;
  padding: 18px 16px 10px 16px;
  box-shadow: 0 2px 12px rgba(35,24,17,0.07);
}
.package-info a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}
@media (max-width:600px) {
  .package-card {
    padding: 18px 8px 14px 8px;
    max-width: 98vw;
  }
  .package-title {
    font-size: 1.3rem;
  }
}

/* --- Menu Page Styling --- */
.menu-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  margin-top: 32px;
}
.menu-section {
  background: #fffaf6;
  border-radius: 16px;
  box-shadow: 0 6px 32px rgba(35,24,17,0.10);
  padding: 32px 28px 24px 28px;
  max-width: 520px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.menu-title {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: var(--accent);
  margin: 0 0 10px 0;
  text-align: center;
  letter-spacing: 1px;
}
.menu-title.tight{margin-bottom:4px}
.menu-sub {
  font-size: 1.1rem;
  color: #6a6a4c;
  font-weight: 400;
  font-style: italic;
}
/* Subtle subnote for section captions (e.g., seasonal notes) */
.menu-subnote{
  font-size: 0.95rem;
  color: #6a6a4c;
  font-style: italic;
  text-align: center;
  margin: 0 0 8px 0;
}
.menu-items {
  list-style: none;
  padding: 0 0 0 18px;
  margin: 0 0 18px 0;
  text-align: left;
  width: 100%;
  max-width: 440px;
}
.menu-items li {
  font-size: 1rem;
  color: #2b2b2b;
  margin-bottom: 6px;
  font-family: Inter, system-ui, sans-serif;
  text-align: left;
}
.menu-items li.premium{color:var(--text)}
.premium-marker{font-size:0.9em;color:var(--accent);vertical-align:super;margin-left:2px;font-family:serif;opacity:0.85;pointer-events:none}
/* Make the legend's dagger slightly larger without affecting list items */
.menu-note .premium-marker{font-size:1.2em}
.menu-items li strong {
  color: var(--accent);
}
.menu-note {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  font-size: 1rem;
  color: #2b2b2b;
  background: #fffaf6;
  border-radius: 12px;
  padding: 14px 12px 8px 12px;
  box-shadow: 0 2px 12px rgba(35,24,17,0.07);
  font-style: italic;
}
.menu-note strong {
  color: var(--accent);
}
@media (max-width: 600px) {
  .menu-section {
    padding: 18px 8px 14px 8px;
    max-width: 98vw;
  }
  .menu-title { font-size: 1.2rem; }
}

/* --- Contact Form Styling (harmonized with package/menu cards) --- */
.contact-intro {
  text-align:center;
  font-size:1.1rem;
  color:#6a6a4c;
  max-width:680px;
  margin:0 auto 32px auto;
  font-style:italic;
}
.contact-form {
  max-width:720px;
  margin:0 auto 24px auto;
  background:var(--bg);
  border-radius:16px;
  padding:40px 36px 34px 36px;
  box-shadow:0 6px 32px rgba(35,24,17,0.10);
  display:flex;
  flex-direction:column;
  gap:24px;
  position:relative;
}
.contact-form::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border:1px solid rgba(178,95,59,0.18);
  border-radius:16px;
}
.form-row {display:grid;grid-template-columns:1fr 1fr;gap:28px}
.form-group {display:flex;flex-direction:column;gap:8px;margin:0}
.form-group label {
  font-family:'Playfair Display',serif;
  font-size:1.05rem;
  color:var(--accent);
  letter-spacing:.5px;
  font-weight:600;
}
.form-group input,
.form-group select,
.form-group textarea {
  background:#ffffff;
  border:2px solid #e8dfd4;
  border-radius:10px;
  padding:14px 16px;
  font-size:1rem;
  font-family:Inter,system-ui,sans-serif;
  color:var(--text);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(178,95,59,0.20)}
.form-group input::placeholder{color:#9c8f80}
.form-group textarea{resize:vertical;min-height:110px;line-height:1.5}
.submit-btn {width:100%;padding:16px 28px;font-size:1.1rem;margin-top:8px}
.submit-btn:disabled {opacity:.65;cursor:progress}

/* Dynamic menu selection area */
.menu-selection-container {
  background:#f5ede3;
  border:1px solid rgba(178,95,59,0.25);
  border-radius:14px;
  padding:28px 24px 24px 24px;
  box-shadow:0 4px 18px rgba(35,24,17,0.10);
  display:flex;
  flex-direction:column;
  gap:26px;
}
.menu-selection-header {
  font-family:'Playfair Display',serif;
  font-size:1.6rem;
  color:var(--accent);
  text-align:center;
  margin:0 0 4px 0;
  letter-spacing:1px;
}
.menu-category {display:flex;flex-direction:column;gap:14px}
.menu-category-title {
  font-family:'Playfair Display',serif;
  font-size:1.25rem;
  color:var(--accent);
  margin:0;
  font-weight:600;
}
.menu-category-sub {font-size:.95rem;color:#6a6a4c;font-style:italic;font-weight:400;font-family:Inter,sans-serif}
.menu-category-items {display:grid;grid-template-columns:1fr;gap:10px}
.checkbox-wrapper {display:flex;align-items:flex-start;gap:12px;padding:10px 14px;background:#ffffff;border:1px solid #e8dfd4;border-radius:10px;transition:background-color .25s ease,border-color .25s ease}
.checkbox-wrapper:hover {background:#fffaf6;border-color:#d9c9b8}
.checkbox-wrapper input[type="checkbox"] {width:20px;height:20px;margin-top:2px;cursor:pointer;accent-color:var(--accent)}
.checkbox-wrapper label {font-size:.95rem;color:#2b2b2b;font-family:Inter,sans-serif;line-height:1.4;cursor:pointer}

/* Responsive adjustments */
@media (max-width:760px){
  .contact-form{padding:32px 24px 28px 24px}
  .form-row{grid-template-columns:1fr;gap:22px}
  .menu-selection-container{padding:22px 18px}
  .menu-selection-header{font-size:1.4rem}
  .menu-category-title{font-size:1.15rem}
}
@media (max-width:520px){
  .contact-form{padding:28px 20px 24px 20px;border-radius:14px}
  .menu-selection-container{border-radius:12px}
  .submit-btn{font-size:1rem;padding:14px 22px}
}