/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;0,800;0,900;1,700&display=swap');

/* Icons.
   Every icon is an <i class="icon"> holding an <svg><use href="#i-name"></svg>
   that points at the sprite near the top of index.html. The <i> wrapper is what
   the rest of this file already styles (colour, font-size, width, margins), so
   sizing the svg in em keeps all of those rules working: font-size still scales
   the icon and color still paints it, exactly as the old webfont glyphs did. */
.icon {
  display: inline-block;
  line-height: 1;
}

.icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  /* No preserveAspectRatio override: the wider glyphs stay in proportion
     inside the 1em box instead of being squashed to a square. */
}

/* CSS Variables */
:root {
  --primary: #FF6F00;       /* Rich Amber Saffron */
  --primary-light: #FFF8F1; /* Soft Cream */
  --primary-hover: #E65100; /* Dark Saffron */
  --accent: #B71C1C;        /* Royal Indian Red */
  --accent-light: #FFEBEE;  /* Light rose */
  --bg: #FFFDF9;            /* Warm Off-White */
  --card-bg: #FFFFFF;       /* Pure White */
  --text-main: #2E2722;     /* Charcoal Dark Brown */
  --text-muted: #6E6158;    /* Muted Warm Grey */
  --border: #F0E6DD;        /* Subtle Warm Border */
  --shadow-sm: 0 4px 10px rgba(230, 81, 0, 0.04);
  --shadow-md: 0 10px 25px rgba(230, 81, 0, 0.08);
  --shadow-lg: 0 20px 40px rgba(93, 64, 55, 0.12);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-base: var(--transition);
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', 'Georgia', serif;
}

/* Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--text-main);
  line-height: 1.5;
  overflow-x: hidden;
  position: relative;
}

/* Background grid overlay */
.bg-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: 
    linear-gradient(to right, rgba(230, 92, 0, 0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230, 92, 0, 0.015) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

/* Background floating celestial orb */
.bg-orb {
  position: fixed;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFA000 20%, #E65C00 70%, transparent 100%);
  filter: blur(24px);
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
  top: 0;
  left: 0;
  transition: transform 0.6s cubic-bezier(0.1, 0.8, 0.2, 1), background 0.8s ease, box-shadow 0.8s ease, opacity 0.8s ease;
  box-shadow: 0 0 100px 30px rgba(230, 92, 0, 0.25);
}

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 800;
  color: var(--text-main);
}

.font-serif {
  font-family: var(--font-serif);
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

/* Traditional Top Bar */
.traditional-top-bar {
  background-color: var(--accent);
  color: #FFEB3B;
  padding: 6px 12px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2px;
  border-bottom: 1.5px solid #FFC107;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.traditional-top-bar span {
  display: inline-flex;
  align-items: center;
}

header {
  position: sticky;
  top: 0;
  background-color: rgba(255, 253, 249, 0.95);
  backdrop-filter: blur(10px);
  z-index: 100;
  border-bottom: 1px solid var(--border);
  padding: 0;
  transition: var(--transition);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--accent);
}

.logo-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.logo-text-col {
  display: flex;
  flex-direction: column;
}

.logo-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.nav-links {
  display: flex;
  gap: 24px;
}

.nav-links a {
  font-weight: 600;
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
}

.nav-links a:hover, .nav-links a.active {
  color: var(--primary);
  background-color: var(--primary-light);
}

.contact-btn {
  background-color: var(--primary);
  color: #white !important;
  font-weight: 700 !important;
  border-radius: var(--radius-sm);
  padding: 10px 20px !important;
  box-shadow: var(--shadow-sm);
}

.contact-btn:hover {
  background-color: var(--primary-hover);
  color: white !important;
  transform: translateY(-2px);
}

/* Hero Section */
.hero {
  position: relative;
  padding: 60px 20px 80px 20px;
  background: radial-gradient(circle at 80% 20%, var(--primary-light) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-badge {
  background-color: var(--accent-light);
  color: var(--accent);
  padding: 6px 16px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 10px rgba(183, 28, 28, 0.06);
  border: 1px solid rgba(183, 28, 28, 0.1);
}

.hero-badge i {
  color: var(--primary);
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--text-main);
  max-width: 900px;
  margin-bottom: 18px;
}

.hero-title span {
  color: var(--primary);
}

.hero-desc {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--text-muted);
  max-width: 700px;
  margin-bottom: 32px;
  font-weight: 450;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 48px;
}

.primary-cta {
  background-color: var(--primary);
  color: white;
  font-weight: 700;
  padding: 16px 36px;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 20px rgba(255, 111, 0, 0.25);
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.primary-cta:hover {
  background-color: var(--primary-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(255, 111, 0, 0.35);
}

.secondary-cta {
  background-color: white;
  color: var(--text-main);
  font-weight: 700;
  padding: 16px 36px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.secondary-cta:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-3px);
}

/* Timeline Badge styling inspired by Lijjat */
.timeline-badge {
  display: inline-flex;
  border: 1px solid var(--primary);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(230, 81, 0, 0.05);
}

.timeline-badge .time {
  background-color: var(--primary);
  color: white !important;
  padding: 6px 14px;
  display: inline-block;
}

.timeline-badge .label {
  color: var(--primary);
  padding: 6px 14px;
  background-color: transparent;
  display: inline-block;
}

.hero-logo-box {
  width: 100%;
  max-width: 420px;
  margin-top: 20px;
  animation: float 6s ease-in-out infinite;
}

/* Floating Animation */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}

/* Re-opening Teaser Grid */

.section-tag {
  color: var(--accent);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 2px;
  margin-bottom: 12px;
  display: block;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  margin-bottom: 16px;
}

.section-desc {
  max-width: 600px;
  margin: 0 auto 48px auto;
  color: var(--text-muted);
  font-weight: 500;
}

/* Menu Section */
.menu-section {
  padding: 80px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.menu-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
  gap: 20px;
}

/* Search bar */
.search-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
}

.search-wrapper input {
  width: 100%;
  padding: 16px 20px 16px 50px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  background-color: white;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 550;
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
  outline: none;
  transition: var(--transition);
}

.search-wrapper input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(255, 111, 0, 0.1);
}

.search-wrapper i {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1.1rem;
}

/* Filter Tags */
.filter-tabs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  width: 100%;
  max-width: 700px;
  padding: 5px;
  justify-content: flex-start;
  scrollbar-width: none; /* Firefox */
}

.filter-tabs::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

.filter-btn {
  background-color: white;
  border: 1px solid var(--border);
  padding: 12px 24px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.filter-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.filter-btn.active {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 6px 15px rgba(255, 111, 0, 0.2);
}

/* Menu Grid */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}

.menu-card {
  background-color: var(--card-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  position: relative;
  display: flex;
  flex-direction: column;
}

.menu-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255, 111, 0, 0.15);
}

.popular-card {
  border: 2px solid rgba(255, 111, 0, 0.3);
}

.badge-popular {
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: var(--primary);
  color: white;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 100px;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(255, 111, 0, 0.3);
}

.card-img-wrapper {
  position: relative;
  aspect-ratio: 1/1;
  width: 100%;
  overflow: hidden;
  background-color: var(--primary-light);
}

.card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.menu-card:hover .card-img-wrapper img {
  transform: scale(1.05);
}

.veg-indicator {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 2;
}

.veg-box {
  display: flex;
  width: 22px;
  height: 22px;
  background-color: white;
  border: 2px solid #388E3C;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.mini-veg {
  width: 18px;
  height: 18px;
}

.veg-dot {
  width: 10px;
  height: 10px;
  background-color: #388E3C;
  border-radius: 50%;
}

.card-info {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 10px;
}

.item-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.2;
}

.item-unit {
  font-size: 0.75rem;
  color: var(--text-muted);
  background-color: #F5EFEB;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  white-space: nowrap;
}

.item-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.6rem;
  font-weight: 500;
}

.card-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.item-price {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--accent);
}

/* Quantity / Add Button Controller */
.quantity-controller {
  min-width: 90px;
  height: 38px;
}

.add-btn {
  width: 100%;
  height: 100%;
  background-color: white;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.add-btn:hover {
  background-color: var(--primary);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 111, 0, 0.2);
}

.qty-btn {
  width: 32px;
  height: 32px;
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1.1rem;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.qty-btn:hover {
  background-color: var(--primary-hover);
  transform: scale(1.05);
}

.qty-val {
  font-weight: 800;
  font-size: 1rem;
  width: 26px;
  text-align: center;
  display: inline-block;
}

.qty-btn, .qty-val {
  vertical-align: middle;
}

.qty-btn:focus, .add-btn:focus {
  outline: none;
}

/* Sticky Bottom Cart Bar */
.cart-bar-sticky {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  width: calc(100% - 40px);
  max-width: 500px;
  background-color: var(--accent);
  color: white;
  border-radius: var(--radius-md);
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 10px 30px rgba(183, 28, 28, 0.35);
  z-index: 99;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cart-bar-sticky.active {
  transform: translateX(-50%) translateY(0);
}

.cart-details-left {
  display: flex;
  flex-direction: column;
}

.cart-count-lbl {
  font-weight: 700;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.5px;
}

.cart-total-lbl {
  font-weight: 800;
  font-size: 1.25rem;
}

.cart-btn-right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.95rem;
}

.cart-btn-right i {
  font-size: 1.1rem;
}

/* Re-opening Announcement Modal & General Modal */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(46, 39, 34, 0.6);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 20px;
}

.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-container {
  background-color: var(--card-bg);
  width: 100%;
  max-width: 500px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  transform: translateY(40px);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.modal-backdrop.active .modal-container {
  transform: translateY(0);
}

.modal-header {
  padding: 24px 24px 16px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  font-size: 1.35rem;
  font-weight: 800;
}

.modal-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
}

.modal-body {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
}

/* Reopening Announcement Styling */
.announcement-box {
  text-align: center;
}

.announce-badge {
  background-color: var(--accent-light);
  color: var(--accent);
  padding: 6px 16px;
  border-radius: 100px;
  font-weight: 800;
  font-size: 0.8rem;
  display: inline-block;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}

.announce-title {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  margin-bottom: 12px;
  line-height: 1.2;
}

.announce-title span {
  color: var(--primary);
}

.announce-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 24px;
  font-weight: 500;
}

.countdown-box {
  background-color: var(--primary-light);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 24px;
  border: 1px dashed var(--primary);
}

.countdown-label {
  font-weight: 800;
  color: var(--primary-hover);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  display: block;
}

.countdown-timer {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--accent);
}

.announce-btn {
  width: 100%;
  background-color: var(--primary);
  color: white;
  border: none;
  padding: 16px;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255,111,0,0.25);
  transition: var(--transition);
}

.announce-btn:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
}

/* Order Modal List Styling */
.modal-items-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.modal-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.row-details {
  display: flex;
  align-items: center;
  gap: 10px;
}

.row-name {
  font-weight: 700;
  font-size: 0.95rem;
}

.row-unit {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.row-pricing {
  display: flex;
  align-items: center;
  gap: 20px;
}

.row-qty-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.row-qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #EEE5DD;
  color: var(--text-main);
  border: none;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--transition);
}

.row-qty-btn:hover {
  background-color: var(--border);
}

.row-qty {
  font-weight: 800;
  font-size: 0.9rem;
  width: 20px;
  text-align: center;
}

.row-price {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--accent);
  min-width: 60px;
  text-align: right;
}

.total-summary-row {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  font-weight: 800;
  font-size: 1.15rem;
}

.total-summary-row span:last-child {
  color: var(--accent);
  font-size: 1.35rem;
}

/* Form inputs in Modal */
.input-group {
  margin-bottom: 16px;
  text-align: left;
}

.input-group label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: block;
}

.input-group input, .input-group textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 2.5px solid var(--border);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  outline: none;
  transition: var(--transition);
}

.input-group input:focus, .input-group textarea:focus {
  border-color: var(--primary);
}

/* About & Location Section */
.about-section {
  padding: 80px 20px;
  background-color: white;
  border-top: 1px solid var(--border);
}

.about-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 50px;
  align-items: center;
}

.about-left h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  margin-bottom: 24px;
}

.about-left p {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 20px;
  font-weight: 450;
}

.location-card {
  background-color: var(--primary-light);
  border-radius: var(--radius-md);
  padding: 30px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.loc-row {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.loc-row i {
  color: var(--primary);
  font-size: 1.35rem;
  margin-top: 3px;
}

.loc-details h4 {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.loc-details p {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
}

.map-btn {
  width: 100%;
  background-color: white;
  color: var(--text-main);
  border: 2px solid var(--border);
  padding: 12px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}

.map-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Footer */
footer {
  background-color: #2E2722;
  color: #F7EDE2;
  padding: 60px 20px;
  text-align: center;
  border-top: 1px solid #1C1815;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo img {
  width: 54px;
  height: 54px;
}

.footer-logo h2 {
  color: white;
  font-family: var(--font-serif);
  font-size: 1.5rem;
}

.footer-nav {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-nav a {
  color: #D3C9C2;
  font-weight: 600;
  font-size: 0.95rem;
}

.footer-nav a:hover {
  color: var(--primary);
}

.footer-socials {
  display: flex;
  gap: 20px;
}

.social-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #3E352F;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  transition: var(--transition);
}

.social-circle:hover {
  background-color: var(--primary);
  transform: translateY(-3px);
}

.copyright {
  font-size: 0.8rem;
  color: #9C8E84;
  margin-top: 10px;
}

/* Mobile Responsiveness Rules */
@media (max-width: 768px) {
  .nav-links { display: none; }

  
  .about-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .hero-title {
    font-size: 2.25rem;
  }
  
  .primary-cta, .secondary-cta {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  header {
    padding: 0;
  }

  .nav-container {
    padding: 8px 12px;
  }

  .logo-wrap {
    gap: 8px;
    font-size: 1.1rem;
  }

  .logo-icon {
    width: 36px;
    height: 36px;
  }

  .logo-sub {
    font-size: 0.6rem;
    letter-spacing: 0.2px;
  }

  .contact-btn {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
  }

  .traditional-top-bar {
    font-size: 0.62rem;
    letter-spacing: 0.5px;
    padding: 4px 6px;
    gap: 8px;
  }

  .hero {
    padding: 40px 16px 60px 16px;
  }

  .hero-title {
    font-size: 1.85rem;
  }

  .hero-desc {
    font-size: 0.95rem;
    margin-bottom: 24px;
  }

  .section-title {
    font-size: 1.75rem;
  }

  .menu-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
  }

  .card-info {
    padding: 16px;
  }

  .item-title {
    font-size: 1.05rem;
  }
}

.no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.no-results i {
  font-size: 3rem;
  margin-bottom: 16px;
  color: var(--border);
}

.no-results p {
  font-weight: 600;
  font-size: 1.1rem;
}

/* Story Section styling */
.story-section {
  padding: 100px 20px;
  background-color: #FAF5F0;
  transition: background-color 0.6s ease;
  position: relative;
  z-index: 1;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  max-width: 1200px;
  margin: 0 auto;
}

.story-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 40px 30px;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(46, 39, 34, 0.03);
  transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
  border: 1px solid rgba(46, 39, 34, 0.06);
  text-align: left;
}

.story-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(46, 39, 34, 0.07);
  background: rgba(255, 255, 255, 0.95);
}

.story-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 24px;
}

.story-card h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--text-dark);
  margin-bottom: 16px;
  line-height: 1.4;
}

.story-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Corporate Section Styling */
.corporate-section {
  padding: 100px 20px;
  background: linear-gradient(135deg, #2E2722 0%, #1A1512 100%);
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
}

.corporate-container {
  max-width: 1200px;
  margin: 0 auto;
}

.corporate-header-block {
  margin-bottom: 50px;
}

.corporate-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 800px;
  margin: 0 auto 50px auto;
}

.corp-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 40px 30px;
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: left;
}

.corp-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--primary);
  transform: translateY(-5px);
}

.corp-card.featured {
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid var(--primary);
}

.corp-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(230, 92, 0, 0.12);
  padding: 4px 10px;
  border-radius: 12px;
}

.corp-card.featured .corp-badge {
  color: white;
  background: var(--primary);
}

.corp-card h3 {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  margin-bottom: 12px;
  color: white;
}

.corp-desc {
  font-size: 0.9rem;
  color: #c4b8ad;
  margin-bottom: 24px;
  line-height: 1.5;
}

.corp-features {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}

.corp-features li {
  font-size: 0.9rem;
  color: #FAF5F0;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.corp-features li i {
  color: var(--primary);
  font-size: 0.95rem;
}

.quote-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 16px 36px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(230, 92, 0, 0.25);
}

.quote-btn:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(230, 92, 0, 0.4);
}

/* Responsiveness for Story and Corporate sections */
@media (max-width: 992px) {
  .story-grid, .corporate-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .story-section, .corporate-section {
    padding: 60px 16px;
  }
  
  .story-grid, .corporate-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .story-card, .corp-card {
    padding: 30px 24px;
  }
  
  .quote-btn, .secondary-quote-btn {
    width: 100%;
    justify-content: center;
  }
}

.secondary-quote-btn {
  background: transparent;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: none;
}

.secondary-quote-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: white;
  box-shadow: none;
  color: white;
}

/* ==========================================================================
   LAYOUT LAYER · MOBILE FIRST
   Base rules below target a phone (~360-430px). Larger screens are additive,
   via min-width queries only. Nothing here assumes a mouse or a wide viewport.
   Breakpoints:  sm 600px (large phone) · md 800px (tablet) · lg 1080px (desktop)
   ========================================================================== */

/* Never let anything push the page sideways on a narrow screen */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg { max-width: 100%; }

.bg-grid, .bg-orb { z-index: 0; }

/* Reading progress along the top edge */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 120;
  background: linear-gradient(90deg, var(--accent), var(--primary) 60%, #FFD180);
  transition: width 0.1s linear;
}

/* --------------------------------------------------------------------------
   HEADER + MOBILE MENU
   -------------------------------------------------------------------------- */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 253, 249, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition: background 0.4s ease, border-color 0.4s ease;
}

header.on-deep {
  background: rgba(26, 15, 10, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
header.on-deep .logo-text-col span { color: #FFF3E4; }
header.on-deep .logo-sub { color: rgba(255, 243, 228, 0.6); }
header.on-deep .nav-links a { color: rgba(255, 243, 228, 0.75); }
header.on-deep .nav-links a:hover,
header.on-deep .nav-links a.active { color: #FFB74D; }
header.on-deep .nav-toggle span { background: #FFF3E4; }

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 1150px;
  margin: 0 auto;
  padding: 10px 16px;
}

.logo-wrap { flex: 1 1 auto; min-width: 0; }
.logo-icon { width: 52px; height: 52px; }
.logo-text-col span { font-size: 1.15rem; }
.logo-sub { font-size: 0.65rem; letter-spacing: 0.2px; }

/* On a phone the top bar carries one action; the rest lives in the drawer */
.nav-links { display: none; }

.contact-btn {
  flex: 0 0 auto;
  padding: 10px 16px;
  font-size: 0.85rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.nav-toggle {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-main);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: linear-gradient(165deg, #2A1A12 0%, #40200F 60%, #1E120C 100%);
  padding: 84px 22px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-100%);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu.open { transform: none; }

.mobile-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 8px 4px;
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: #FFF6EA;
  border-bottom: 1px solid rgba(255, 246, 234, 0.1);
}

.mobile-menu a::after {
  content: '\2192';
  font-family: var(--font-sans);
  font-size: 1rem;
  color: #FFB74D;
  opacity: 0.6;
}

.mobile-menu a:active { color: #FFB74D; }

.mm-actions {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.mm-call, .mm-map {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  border-bottom: none;
}

.mm-call { background: var(--primary); color: #fff; }
.mm-map  { background: rgba(255, 255, 255, 0.08); color: #FFF6EA; border: 1px solid rgba(255, 246, 234, 0.28); }
.mm-call::after, .mm-map::after { content: none; }

.mm-hours {
  margin-top: 22px;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.7;
  color: rgba(255, 246, 234, 0.6);
}

body.menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   STEP RAIL: desktop affordance only, hidden on touch-sized screens
   -------------------------------------------------------------------------- */
.step-rail { display: none; }

.rail-step {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 2px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: inherit;
  opacity: 0.4;
  transition: var(--transition);
  position: relative;
}

.rail-step:hover { opacity: 0.8; }
.rail-step.active { opacity: 1; color: var(--primary); }

.rail-step.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  width: 8px;
  height: 2px;
  background: var(--primary);
  transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   SECTION SHELL + TONE SYSTEM
   -------------------------------------------------------------------------- */
.hero-section,
.story-block {
  position: relative;
  padding: 56px 16px 64px;
  overflow: hidden;
  --tone-text: var(--text-main);
  --tone-muted: var(--text-muted);
  --tone-accent: var(--primary-hover);
  color: var(--tone-text);
}

[data-tone="cream"]  { background-color: #FFFDF9; }
[data-tone="butter"] { background-color: #FFF6E9; }

[data-tone="deep"] {
  background: linear-gradient(160deg, #2A1A12 0%, #40200F 55%, #24140D 100%);
  --tone-text: #FFF6EA;
  --tone-muted: rgba(255, 246, 234, 0.76);
  --tone-accent: #FFB74D;
}

/* The dark gradient on this legacy class must not survive the tone system */
.corporate-section { background-image: none; }

.story-block + .story-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--primary);
  opacity: 0.5;
}

.block-inner,
.hero-inner {
  max-width: 1150px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   SECTION TYPE
   -------------------------------------------------------------------------- */
.sec-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.sec-num {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--tone-accent);
  line-height: 1;
}

.sec-rule { width: 34px; height: 2px; background: var(--tone-accent); opacity: 0.5; }

.sec-label {
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--tone-muted);
}

.sec-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.85rem, 7.5vw, 3.3rem);
  line-height: 1.14;
  letter-spacing: -0.4px;
  color: var(--tone-text);
  margin-bottom: 16px;
}

.sec-title em { font-style: italic; color: var(--tone-accent); }

.sec-body {
  max-width: 64ch;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--tone-muted);
  font-weight: 450;
  margin-bottom: 32px;
}

.sec-body strong { color: var(--tone-text); font-weight: 700; }

.block-link {
  margin-top: 26px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tone-muted);
}

.block-link a {
  display: inline-block;
  padding: 4px 0;
  color: var(--tone-accent);
  font-weight: 700;
  border-bottom: 1px solid currentColor;
}

/* --------------------------------------------------------------------------
   SCROLL REVEAL
   -------------------------------------------------------------------------- */
/* Scroll-in animation.
   These rules are scoped to .js, a class the inline script in <head> adds to
   <html>. Without it the content stays plainly visible, because the hidden
   state is what gets opted into. Before this was scoped, all 59 .reveal
   elements, the h1 included, started at opacity 0, so anyone without
   JavaScript, and any crawler that does not run it, saw a blank page. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track, .hv-main, .hv-small { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero-section { padding-top: 44px; }

.hero-inner { display: flex; flex-direction: column; }

.hero-eyebrow {
  align-self: flex-start;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #FFB74D;
  padding: 8px 14px;
  border: 1px solid rgba(255, 183, 77, 0.4);
  border-radius: 100px;
  margin-bottom: 20px;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.3rem, 11vw, 5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1px;
  color: #FFF6EA;
  margin-bottom: 18px;
}

.hero-title em { font-style: italic; color: #FFB74D; }

.hero-lead {
  max-width: 60ch;
  font-size: 1.02rem;
  line-height: 1.72;
  color: rgba(255, 246, 234, 0.8);
  margin-bottom: 28px;
}

/* Full-width, thumb-sized buttons on a phone */
.hero-ctas { display: grid; gap: 12px; margin-bottom: 34px; }

.hero-ctas .primary-cta,
.hero-ctas .secondary-cta {
  width: 100%;
  justify-content: center;
  min-height: 52px;
}

.hero-section .secondary-cta {
  color: #FFF6EA;
  border-color: rgba(255, 246, 234, 0.35);
  background: rgba(255, 255, 255, 0.05);
}

.hero-section .secondary-cta:hover {
  border-color: #FFB74D;
  color: #FFB74D;
  background: rgba(255, 255, 255, 0.1);
}

.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 18px;
  justify-content: start;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 246, 234, 0.16);
}

.fact { display: flex; flex-direction: column; gap: 3px; }

.fact strong {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 800;
  color: #FFB74D;
  line-height: 1;
}

.fact span {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
  color: rgba(255, 246, 234, 0.6);
}

/* Hero photo cluster */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 36px auto 0;
  padding-right: 6px;
}

.hv-main {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
  border: 3px solid rgba(255, 246, 234, 0.14);
  animation: float 7s ease-in-out infinite;
}

.hv-main img {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}

/* The label crowds the picture at phone size, it returns on wider screens */
.hv-tag { display: none; }

.hv-small {
  position: absolute;
  left: -14px;
  bottom: 12px;
  width: 40%;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 3px solid rgba(255, 246, 234, 0.18);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5);
  animation: float 7s ease-in-out infinite 1.2s;
}

.hv-small img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; }

.hv-logo {
  position: absolute;
  right: -8px;
  top: -20px;
  width: 38%;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.55));
}

.hero-scroll {
  position: relative;
  z-index: 2;
  align-self: center;
  margin-top: 38px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 700;
  color: rgba(255, 246, 234, 0.6);
}

.hero-scroll i { animation: nudge 2s ease-in-out infinite; }

@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   01 · HOW IT'S MADE
   -------------------------------------------------------------------------- */
.craft-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

.craft-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.craft-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  color: var(--primary-hover);
  background: var(--primary-light);
  margin-bottom: 16px;
}

.craft-card h3 { font-family: var(--font-serif); font-size: 1.28rem; margin-bottom: 8px; }
.craft-card p { color: var(--text-muted); line-height: 1.68; font-size: 0.96rem; }

/* --------------------------------------------------------------------------
   02 · MOST LOVED
   -------------------------------------------------------------------------- */
.signature-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }

.sig-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}

.sig-img { aspect-ratio: 16/10; overflow: hidden; position: relative; }
.sig-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }

.sig-flag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(46, 39, 34, 0.85);
  color: #FFD180;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
}

.sig-body { padding: 20px; }
.sig-body h3 { font-family: var(--font-serif); font-size: 1.35rem; margin-bottom: 8px; }
.sig-body p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.62; }

/* --------------------------------------------------------------------------
   03 · MENU
   -------------------------------------------------------------------------- */
.menu-section { max-width: none; }
.menu-controls { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; align-items: stretch; }
.search-wrapper { max-width: 100%; }

/* 16px minimum stops iOS zooming the page when the field is focused */
.search-wrapper input,
.input-group input,
.input-group textarea,
#corp-package { font-size: 16px; }

.filter-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 16px 4px 0;
  margin-right: -16px;      /* let the row bleed to the screen edge */
  scroll-snap-type: x proximity;
  flex-wrap: nowrap;
  max-width: none;
}

.filter-btn { flex: 0 0 auto; min-height: 44px; scroll-snap-align: start; }

.menu-grid { grid-template-columns: 1fr; gap: 18px; }
.card-img-wrapper { aspect-ratio: 16/10; }

.menu-footnote {
  margin-top: 28px;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.menu-footnote i { color: var(--primary); }

/* --------------------------------------------------------------------------
   04 · SUKO NASTO
   -------------------------------------------------------------------------- */
.nasto-marquee {
  overflow: hidden;
  margin: 0 0 28px;
  padding: 12px 0;
  border-top: 1px solid rgba(46, 39, 34, 0.14);
  border-bottom: 1px solid rgba(46, 39, 34, 0.14);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }

.marquee-track span {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  white-space: nowrap;
  color: var(--text-muted);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.nasto-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.nasto-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.nasto-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.nasto-card span { display: block; padding: 12px 14px; font-weight: 700; font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   05 · BULK ORDERS
   -------------------------------------------------------------------------- */
.corporate-section { text-align: left; }
.corporate-container { max-width: 1150px; }
.corporate-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0; max-width: 900px; }

.corporate-section .corp-card {
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 28px 22px;
}

.corporate-section .corp-card.featured { background: #fff; border: 2px solid var(--primary); }
.corporate-section .corp-card h3 { color: var(--text-main); }
.corporate-section .corp-desc { color: var(--text-muted); }
.corporate-section .corp-features li { color: var(--text-main); }

.corp-actions { display: grid; gap: 12px; margin-top: 28px; }

.corp-actions .quote-btn {
  width: 100%;
  justify-content: center;
  min-height: 52px;
  text-decoration: none;
}

.secondary-quote-btn {
  background: #fff;
  color: var(--primary-hover);
  border: 2px solid var(--primary);
}

.secondary-quote-btn:hover { background: var(--primary-light); color: var(--primary-hover); }

.corp-note { margin-top: 18px; font-size: 0.88rem; color: var(--tone-muted); }

/* --------------------------------------------------------------------------
   VISIT CALLOUT
   -------------------------------------------------------------------------- */
.visit-callout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1000px;
  padding: 24px 20px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255, 111, 0, 0.16), rgba(183, 28, 28, 0.13));
  border: 1px solid rgba(255, 183, 77, 0.34);
}

.visit-icon {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  color: #2E2722;
  background: linear-gradient(135deg, #FFD180, #FF6F00);
  box-shadow: 0 10px 22px rgba(255, 111, 0, 0.32);
}

.visit-tag {
  display: inline-block;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--tone-accent);
  margin-bottom: 10px;
}

.visit-text h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 5.5vw, 1.85rem);
  line-height: 1.25;
  color: var(--tone-text);
  margin-bottom: 12px;
}

.visit-text p { color: var(--tone-muted); line-height: 1.7; margin-bottom: 18px; max-width: 60ch; }
.visit-text p strong { color: var(--tone-text); }

.visit-address {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--tone-text);
  background: rgba(0, 0, 0, 0.26);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 18px;
}

.visit-address i { color: var(--tone-accent); margin-top: 3px; }

.visit-actions { display: grid; gap: 12px; }

.visit-actions .primary-cta,
.visit-actions .secondary-cta {
  width: 100%;
  justify-content: center;
  min-height: 52px;
}

.visit-actions .secondary-cta {
  color: #FFF6EA;
  border-color: rgba(255, 246, 234, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

.visit-actions .secondary-cta:hover { color: #FFB74D; border-color: #FFB74D; background: rgba(255, 255, 255, 0.12); }

/* --------------------------------------------------------------------------
   07 · ABOUT US
   -------------------------------------------------------------------------- */
.heritage-layout { display: grid; grid-template-columns: 1fr; gap: 28px; margin-bottom: 40px; }

.timeline { position: relative; display: grid; gap: 24px; padding-left: 28px; }

.timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--primary), rgba(255, 111, 0, 0.12));
}

.tl-item { position: relative; }

.tl-dot {
  position: absolute;
  left: -28px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(255, 111, 0, 0.14);
}

.tl-item.is-next .tl-dot { background: var(--accent); animation: pulseDot 2.2s ease-in-out infinite; }

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(183, 28, 28, 0.16); }
  50%      { box-shadow: 0 0 0 10px rgba(183, 28, 28, 0.04); }
}

.tl-when {
  display: block;
  text-transform: uppercase;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--primary-hover);
  margin-bottom: 5px;
}

.tl-item h3 { font-family: var(--font-serif); font-size: 1.28rem; margin-bottom: 6px; }
.tl-item p { color: var(--text-muted); line-height: 1.68; font-size: 0.96rem; max-width: 56ch; }

.promise-card {
  background: var(--primary-light);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  box-shadow: var(--shadow-sm);
}

.promise-card > i { color: var(--primary); font-size: 1.25rem; margin-bottom: 12px; display: block; }

.promise-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--text-main);
  margin-bottom: 14px;
}

.promise-by {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 800;
  color: var(--primary-hover);
}

.stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 14px;
  border-top: 1px solid var(--border);
  padding-top: 30px;
}

.stat { text-align: center; }

.stat-num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 8vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  color: var(--primary-hover);
  margin-bottom: 6px;
}

.stat-lbl {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 700;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   VISIT US
   -------------------------------------------------------------------------- */
.visit-section .about-container { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 8px; }

.visit-section .about-left p {
  color: var(--tone-muted);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 16px;
}

.whatsapp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  margin-top: 6px;
  padding: 14px 24px;
  border-radius: 100px;
  font-weight: 700;
  background: #25D366;
  color: #06301A;
  box-shadow: 0 12px 24px rgba(37, 211, 102, 0.22);
}

.visit-section .location-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 24px 20px;
}

.visit-section .location-card h3 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  margin-bottom: 18px;
  color: var(--tone-accent);
}

.visit-section .loc-details h4 { color: var(--tone-text); }
.visit-section .loc-details p  { color: var(--tone-muted); }
.visit-section .loc-details p a { color: var(--tone-accent); font-weight: 700; }
.visit-section .loc-row i { color: var(--tone-accent); }

.map-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.map-btn:hover { background: var(--primary-hover); color: #fff; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
footer {
  background: #180F0A;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  position: relative;
  z-index: 2;
  padding: 48px 16px 110px;   /* room for the sticky visit bar */
}

.footer-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 1.5px;
  color: #FFB74D;
}

.footer-nav { flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.footer-nav a { font-size: 0.85rem; padding: 6px 2px; }
.social-circle { width: 46px; height: 46px; }

/* --------------------------------------------------------------------------
   STICKY "VISIT US" BAR: a phone-width action bar, a pill on desktop
   -------------------------------------------------------------------------- */
.visit-fab {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 18px;
  border-radius: 100px;
  background: linear-gradient(135deg, #FF6F00, #E65100);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(230, 81, 0, 0.4);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: var(--transition);
}

.visit-fab.show { opacity: 1; transform: none; pointer-events: auto; }
.visit-fab i { font-size: 1.05rem; }
.visit-fab span { display: flex; flex-direction: column; line-height: 1.2; }
.visit-fab small { font-size: 0.68rem; font-weight: 500; opacity: 0.85; }

/* --------------------------------------------------------------------------
   MODALS
   -------------------------------------------------------------------------- */
.modal-backdrop { padding: 16px; align-items: center; justify-content: center; }
.modal-container { display: flex; flex-direction: column; max-height: 85vh; width: 100%; overflow: hidden; margin: auto; }
.modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: none; padding: 20px 16px; flex: 1; }
.modal-close-btn { width: 44px; height: 44px; }

.row-inputs { flex-direction: column; gap: 15px !important; }
.row-inputs .input-group { margin-bottom: 0; }

.announce-info {
  text-align: left;
  margin-bottom: 22px;
  font-size: 0.92rem;
  color: var(--text-muted);
  background: var(--primary-light);
  padding: 14px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--primary);
}

.announce-info p:first-child { margin-bottom: 8px; }
.announce-info i { color: var(--primary); margin-right: 8px; }

.announce-btn, .quote-btn, .primary-cta, .secondary-cta, .filter-btn, .contact-btn { touch-action: manipulation; }

#corp-package {
  width: 100%;
  padding: 12px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: white;
}

/* ==========================================================================
   sm: larger phones and up (600px)
   ========================================================================== */
@media (min-width: 600px) {
  .hero-section, .story-block { padding: 72px 22px 80px; }
  .hero-section { padding-top: 56px; }

  .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
  .hero-ctas .primary-cta, .hero-ctas .secondary-cta { width: auto; }

  .hero-facts { gap: 34px; }
  .fact strong { font-size: 1.6rem; }
  .fact span { font-size: 0.7rem; letter-spacing: 1.6px; }

  .hero-visual { max-width: 340px; }
  .hv-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    left: 14px;
    top: 14px;
    background: rgba(20, 12, 8, 0.82);
    color: #FFD180;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 100px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .craft-grid, .signature-grid, .corporate-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .nasto-strip { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .menu-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .stat-row { grid-template-columns: repeat(4, 1fr); }

  .corp-actions, .visit-actions { display: flex; gap: 14px; flex-wrap: wrap; }
  .corp-actions .quote-btn, .visit-actions .primary-cta, .visit-actions .secondary-cta { width: auto; }
  .whatsapp-cta { width: auto; display: inline-flex; }

  .visit-callout { flex-direction: row; gap: 22px; padding: 32px; }
  .visit-address { align-items: center; font-size: 0.9rem; }

  .visit-fab { left: 18px; right: auto; bottom: 18px; justify-content: flex-start; padding: 12px 20px 12px 16px; }
  footer { padding: 56px 20px 90px; }

  .modal-backdrop { align-items: center; padding-top: 0; }
  .modal-container { width: auto; }
  .row-inputs { flex-direction: row; }
}

/* ==========================================================================
   md: tablets (800px)
   ========================================================================== */
@media (min-width: 800px) {
  .hero-section, .story-block { padding: 88px 24px 96px; }

  .sec-mark { gap: 16px; margin-bottom: 22px; }
  .sec-num { font-size: 1.6rem; }
  .sec-rule { width: 46px; }
  .sec-label { font-size: 0.76rem; letter-spacing: 3px; }
  .sec-body { font-size: 1.05rem; line-height: 1.78; margin-bottom: 44px; }

  .craft-grid, .signature-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .nasto-strip { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .menu-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .heritage-layout { grid-template-columns: 1.35fr 0.65fr; gap: 44px; margin-bottom: 56px; }
  .visit-section .about-container { grid-template-columns: 1.15fr 0.85fr; gap: 40px; }

  .marquee-track span { font-size: 1.3rem; }
  .sig-img { aspect-ratio: 4/3; }
  .card-img-wrapper { aspect-ratio: 4/3; }

  .filter-tabs { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; }
}

/* ==========================================================================
   lg: desktop (1080px), full nav, side rail, two-column hero
   ========================================================================== */
@media (min-width: 1080px) {
  .hero-section, .story-block { padding: 96px 20px 104px; }

  .nav-container { padding: 12px 20px; }
  .nav-links { display: flex; gap: 26px; align-items: center; }
  .nav-links a { font-size: 0.9rem; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none; }
  .logo-icon { width: 62px; height: 62px; }
  .logo-text-col span { font-size: 1.3rem; }

  .step-rail {
    display: flex;
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    flex-direction: column;
    gap: 10px;
    color: var(--text-muted);
  }

  .step-rail.on-deep { color: rgba(255, 243, 228, 0.55); }

  .hero-section { min-height: 92vh; justify-content: center; display: flex; flex-direction: column; }

  .hero-inner {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 50px;
    align-items: center;
  }

  .hero-eyebrow, .hero-title, .hero-lead, .hero-ctas, .hero-facts { grid-column: 1; }
  /* A grid item stretches by default, keep the pill hugging its text */
  .hero-eyebrow { justify-self: start; }

  .hero-visual {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: center;
    max-width: none;
    margin: 0;
    padding: 0 10px 40px 0;
  }

  .hv-small { left: -34px; width: 44%; }
  .hv-logo { right: -18px; top: -26px; width: 40%; }

  .hero-title { font-size: clamp(3rem, 5vw, 5rem); }
  .hero-lead { font-size: 1.1rem; }
  .fact strong { font-size: 1.9rem; }
  .fact span { font-size: 0.76rem; letter-spacing: 2px; }

  .menu-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; }
  .footer-nav { gap: 24px; }
  footer { padding: 60px 20px 60px; }
}

/* Devices that genuinely have a hover-capable pointer get the lift effects */
@media (hover: hover) and (pointer: fine) {
  .craft-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
  .sig-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
  .sig-card:hover .sig-img img { transform: scale(1.06); }
  .nasto-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
  .visit-fab:hover { transform: translateY(-3px); }
  .whatsapp-cta:hover { transform: translateY(-3px); }
  .corporate-section .corp-card:hover { box-shadow: var(--shadow-md); }
}

/* Phone header: logo + menu only. The drawer carries Call and Directions,
   and the sticky bar reappears as soon as you scroll. */
@media (max-width: 599px) {
  .contact-btn { display: none; }
  .nav-container { padding: 8px 14px; }
  .logo-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .logo-text-col { min-width: 0; }

  /* Compact 2-column grid for menu on mobile (like Suko Nasto) */
  .menu-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .menu-card .card-info { padding: 12px 10px; }
  .menu-card .item-title { font-size: 0.95rem; margin-bottom: 6px; }
  .menu-card .item-desc { display: none; } /* Hidden to save space on mobile */
  .menu-card .item-price { font-size: 1.05rem; }
  .menu-card .item-unit { font-size: 0.7rem; padding: 2px 6px; }
  .menu-card .card-img-wrapper { aspect-ratio: 1/1; }
  .badge-popular { top: 8px; left: 8px; font-size: 0.65rem; padding: 3px 8px; }
  .veg-indicator { bottom: 8px; right: 8px; transform: scale(0.75); transform-origin: bottom right; }

  /* Announcement Modal Mobile Fixes */
  .announce-title { font-size: 1.45rem; }
  .announce-desc { font-size: 0.85rem; margin-bottom: 16px; }
  .announce-info { padding: 12px; font-size: 0.85rem; }
}

/* ==========================================================================
   MADE HERE · SOLD HERE band
   ========================================================================== */
.promise-band {
  position: relative;
  z-index: 2;
  background: linear-gradient(100deg, #FFB300 0%, #FF6F00 55%, #E65100 100%);
  color: #2A1408;
  padding: 26px 16px;
}

.band-inner {
  max-width: 1150px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.band-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.band-item i {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.05rem;
  color: #FFF6EA;
  background: rgba(42, 20, 8, 0.82);
}

.band-item span { display: flex; flex-direction: column; line-height: 1.35; }

.band-item strong {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.band-item span { font-size: 0.88rem; font-weight: 600; color: rgba(42, 20, 8, 0.82); }
.band-item strong { color: #2A1408; }

@media (min-width: 600px) {
  .promise-band { padding: 30px 22px; }
  .band-inner { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

@media (min-width: 800px) {
  .promise-band { padding: 36px 24px; }
  .band-inner { gap: 34px; }
  .band-item i { width: 48px; height: 48px; font-size: 1.15rem; }
  .band-item strong { font-size: 1.2rem; }
  .band-item span { font-size: 0.92rem; }
}

/* Small Gujarati kicker on the craft cards */
.craft-chip {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--primary-hover);
  background: var(--primary-light);
  border: 1px solid rgba(255, 111, 0, 0.22);
  padding: 5px 11px;
  border-radius: 100px;
  margin-bottom: 16px;
}

/* Seven nav labels only fit on one line if they are kept tight */
@media (min-width: 1080px) {
  .nav-links { gap: 4px; }
  .nav-links a {
    white-space: nowrap;
    padding: 8px 10px;
    font-size: 0.86rem;
  }
  .logo-sub { white-space: nowrap; }
}

/* The container caps at 1150px, so a wider window gives the nav no extra
   room, loosening it here would only squeeze the logo. */
.logo-text-col { overflow: hidden; }

/* Keep the location rows aligned whatever the icon glyph width */
.loc-row i { width: 20px; text-align: center; flex: 0 0 20px; }

/* Licence credits for the stock food photos */
.credits-link {
  color: rgba(247, 237, 226, 0.5);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.credits-link:hover { color: #FFB74D; }

/* The emblem is square; never let a container stretch it out of shape */
.logo-icon, .footer-logo img, .hv-logo { object-fit: contain; aspect-ratio: 1 / 1; border-radius: 50%; background-color: #fff; }

/* Plain-text menu that sits in #menu-grid until script.js renders the cards over
   it. Visitors with JavaScript never see this; search engines and no-JS browsers
   get the full item list. Styled so it still reads properly if JS never runs. */
.menu-static {
  grid-column: 1 / -1;
  text-align: left;
}

.menu-static h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--primary);
  margin: 22px 0 10px;
}

.menu-static ul {
  list-style: none;
  display: grid;
  gap: 10px;
}

.menu-static li {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}

.menu-static strong {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Search clear button and the empty state
   -------------------------------------------------------------------------- */
.search-wrapper input {
  /* room for the clear button so long queries do not run underneath it */
  padding-right: 52px;
}

.search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 50%;
  transition: var(--transition);
}

.search-clear:hover,
.search-clear:focus-visible {
  color: var(--text-main);
  background-color: rgba(0, 0, 0, 0.05);
}

.search-clear[hidden] { display: none; }

.no-results-btn {
  margin-top: 16px;
  padding: 12px 24px;
  min-height: 44px;
  border: none;
  border-radius: 100px;
  background-color: var(--primary);
  color: white;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--transition);
}

.no-results-btn:hover { background-color: var(--primary-hover); }

/* --------------------------------------------------------------------------
   Tap targets. Anything a finger has to hit wants roughly 44px; these were
   between 16 and 32px tall, the phone numbers worst of all at 18px.
   -------------------------------------------------------------------------- */
.loc-details a,
.menu-footnote a {
  display: inline-block;
  padding: 12px 0;
}

.footer-nav a {
  display: inline-block;
  padding: 12px 8px;
}

.credits-link {
  display: inline-block;
  padding: 13px 8px;
}

/* --------------------------------------------------------------------------
   Keyboard focus. The browser default is a thin dark outline, which all but
   disappears on the dark brown sections.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.search-wrapper input:focus-visible {
  outline-offset: 0;
}

/* Jumps a keyboard user straight past the nav. Off-screen until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 14px 22px;
  background-color: var(--primary);
  color: white;
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

/* The opening date in the announcement. Bold and in the main text colour, which
   lifts it off the muted grey of the box around it without a highlight. */
.date-strong {
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   COMMON QUESTIONS
   Native <details> so the answers are real text in the page, readable by
   search engines and by anyone without JavaScript, not hidden behind a script.
   -------------------------------------------------------------------------- */
.faq-list {
  max-width: 820px;
  margin-top: 36px;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 2px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-main);
  transition: var(--transition);
}

/* the default disclosure triangle, in both engines */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }

.faq-item summary::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--primary);
  transition: transform 0.25s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item summary:hover {
  color: var(--primary-hover);
}

.faq-item p {
  padding: 0 2px 22px;
  margin: 0;
  max-width: 68ch;
  color: var(--text-muted);
  line-height: 1.75;
}

.faq-item p a {
  color: var(--primary-hover);
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 599px) {
  .faq-list { margin-top: 26px; }
  .faq-item summary { font-size: 0.98rem; padding: 18px 2px; }
  .faq-item p { font-size: 0.95rem; padding-bottom: 18px; }
}

/* --------------------------------------------------------------------------
   THANK-YOU NOTE
   No icon: on a phone it stole 76px of a 358px block and squeezed the text to
   37 characters a line. Full width instead, amber heading, and the body at
   full strength rather than the 76% muted tone, which read as washed out
   against the dark section.
   -------------------------------------------------------------------------- */
.thanks-note {
  max-width: 900px;
  margin: 34px 0 10px;
  padding: 28px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 183, 77, 0.2);
  border-left: 4px solid var(--tone-accent);
  background: rgba(255, 183, 77, 0.06);
}

.thanks-note h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  line-height: 1.25;
  /* --tone-text, not --tone-accent: the amber went muddy against the brown and
     did not match the headings on the rest of the dark sections. */
  color: var(--tone-text);
  margin-bottom: 12px;
}

.thanks-note p {
  color: var(--tone-text);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 62ch;
}

@media (max-width: 599px) {
  .thanks-note {
    margin: 26px 0 6px;
    padding: 22px 20px;
    border-radius: var(--radius-md);
  }

  .thanks-note h3 { font-size: 1.35rem; margin-bottom: 10px; }
  .thanks-note p { font-size: 0.98rem; line-height: 1.7; }
}
}