/* ================================================================
   SHAUNOVA CRAVE — STYLESHEET
   ================================================================
   TABLE OF CONTENTS
   1. Brand tokens (colours, type, spacing) — EDIT COLOURS HERE
   2. Reset & base
   3. Layout helpers
   4. Header / nav
   5. Buttons
   6. Hero
   7. Menu
   8. Order form
   9. How it works
   10. FAQ
   11. Reviews
   12. Instagram
   13. Footer
   14. Responsive
================================================================= */

/* ================================================================
   1. BRAND TOKENS
   Change any brand colour here and it updates across the entire
   site. Do not need to touch anything below this block to
   re-colour the site.
================================================================= */
:root {
  /* ---- EDIT HERE: BRAND COLOURS ---- */
  --color-espresso: #1E150F;
  --color-cherry: #7A0F1F;
  --color-cherry-light: #9A1B2E;
  --color-gold: #B08D57;
  --color-gold-light: #D9BE8C;
  --color-cream: #F7F1E6;
  --color-taupe: #A88F7A;

  /* Derived / utility tones (rarely need editing) */
  --color-espresso-soft: #2B2019;
  --color-cream-soft: #EFE6D4;
  --color-line: rgba(247, 241, 230, 0.18);
  --color-line-dark: rgba(30, 21, 15, 0.14);

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 14px;
  --max-width: 1120px;

  /* Motion */
  --transition-fast: 160ms ease;
  --transition-med: 280ms ease;
}

/* ================================================================
   2. RESET & BASE
================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-cream);
  color: var(--color-espresso);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 var(--space-sm);
  color: inherit;
}

p { margin: 0 0 var(--space-sm); }

a { color: inherit; }

img { max-width: 100%; display: block; }

button { font-family: inherit; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-cherry);
  color: var(--color-cream);
  padding: 0.75rem 1.25rem;
  z-index: 200;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* Consistent, visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* ================================================================
   3. LAYOUT HELPERS
================================================================= */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  overflow-wrap: break-word;
}

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-gold);
  margin: 0 0 var(--space-xs);
}
.eyebrow-center { text-align: center; }

.section-title {
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
  margin-bottom: var(--space-xs);
  /* Explicit (not inherited) so contrast is always correct regardless
     of which section the title sits in. Light-background sections get
     dark espresso text; dark-background sections override to cream
     below. */
  color: var(--color-espresso);
}
.menu-section .section-title,
.order-section .section-title,
.how-section .section-title,
.faq-section .section-title,
.reviews-section .section-title,
.instagram-section .section-title {
  text-align: center;
}

/* Dark-background sections: force high-contrast cream/gold headings */
.how-section .section-title,
.reviews-section .section-title {
  color: var(--color-cream);
}

.section-sub {
  text-align: center;
  color: var(--color-taupe);
  margin-bottom: var(--space-lg);
}

/* ================================================================
   4. HEADER / NAV
================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(30, 21, 15, 0.94);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--color-line);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

.logo-link {
  text-decoration: none;
  color: var(--color-cream);
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

/* When you add your PNG logo, size it with something like:
   .logo-img { height: 40px; width: auto; } */
.logo-img { height: 40px; width: auto; }

.site-nav {
  position: relative;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
}

.nav-list a {
  text-decoration: none;
  color: var(--color-cream-soft);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color var(--transition-fast);
}
.nav-list a:hover { color: var(--color-gold-light); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-cream);
  display: block;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* ================================================================
   5. BUTTONS
================================================================= */
.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.9rem 1.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--color-cherry);
  color: var(--color-cream);
}
.btn-primary:hover { background: var(--color-cherry-light); }

.btn-ghost {
  background: transparent;
  color: var(--color-cream);
  border-color: var(--color-gold);
}
.btn-ghost:hover {
  background: var(--color-gold);
  color: var(--color-espresso);
}

/* Ghost button used on light (cream) backgrounds */
.instagram-section .btn-ghost {
  color: var(--color-espresso);
  border-color: var(--color-cherry);
}
.instagram-section .btn-ghost:hover {
  background: var(--color-cherry);
  color: var(--color-cream);
}

.btn-submit {
  width: 100%;
  text-align: center;
  font-size: 1.05rem;
  padding: 1.05rem 1.9rem;
}

/* ================================================================
   6. HERO
================================================================= */
.hero {
  background: var(--color-espresso);
  color: var(--color-cream);
  position: relative;
  padding: clamp(4rem, 6vw, 7rem) 0 clamp(3.5rem, 5vw, 5.5rem);
  overflow: hidden;
}

.hero-inner {
  text-align: center;
  max-width: 720px;
}

.hero .eyebrow {
  color: var(--color-gold-light);
}

.hero-title {
  margin: var(--space-xs) 0 var(--space-sm);
}
.hero-title-line {
  display: block;
  font-size: clamp(2.6rem, 2rem + 4vw, 4.6rem);
  letter-spacing: -0.01em;
}

.hero-slogan {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.55rem);
  color: var(--color-gold-light);
  margin-bottom: var(--space-md);
}

.hero-sub {
  font-size: 1.05rem;
  color: var(--color-cream-soft);
}

.hero-tags {
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--color-taupe);
  margin-bottom: var(--space-lg);
}

.hero-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* Signature hairline: a single deliberate gold rule, referencing
   the cookie drizzle mentioned in the brand copy — restrained, not
   a gradient or blob. */
.hero-rule {
  height: 2px;
  width: min(70%, 460px);
  margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
  background: linear-gradient(90deg, transparent, var(--color-gold) 20%, var(--color-gold) 80%, transparent);
}

/* ================================================================
   7. MENU
   Signature motif: a soft "bite" taken out of the top-right corner
   of each card — a literal nod to a thick, soft-baked cookie.
================================================================= */
.menu-section {
  padding: var(--space-xl) 0;
  background: var(--color-cream);
  color: var(--color-espresso);
}

/* ---- Crave Box promo callout ---- */
.crave-box-promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  background: var(--color-espresso);
  color: var(--color-cream);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-top: var(--space-lg);
}
.crave-box-promo .eyebrow { color: var(--color-gold-light); margin-bottom: 0.3rem; }
.crave-box-promo-text h3 {
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}
.crave-box-promo-text p:last-child {
  color: var(--color-cream-soft);
  margin: 0;
  max-width: 42ch;
}
.crave-box-promo-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  flex-shrink: 0;
}
.crave-box-price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-gold-light);
  margin: 0;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
}

.menu-card {
  background: var(--color-espresso);
  color: var(--color-cream);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* The "bite mark": a cream circle matching the page background,
   positioned to overlap the card's top-right corner. */
.menu-card::after {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 56px;
  height: 56px;
  background: var(--color-cream);
  border-radius: 50%;
  box-shadow: -2px 2px 0 0 rgba(30, 21, 15, 0.06);
}

.menu-card-image {
  aspect-ratio: 4 / 3;
  background: var(--color-espresso-soft);
  overflow: hidden;
}

/* Once a real photo <img> replaces the placeholder div, it will
   automatically fill the frame, crop intelligently and never stretch. */
.menu-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed var(--color-taupe);
  color: var(--color-taupe);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.menu-card-body {
  padding: var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.menu-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.menu-card-head h3 {
  font-size: 1.2rem;
  margin: 0;
}

.badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-available { background: rgba(176, 141, 87, 0.18); color: var(--color-gold-light); border: 1px solid var(--color-gold); }
.badge-sold-out { background: rgba(168, 143, 122, 0.18); color: var(--color-taupe); border: 1px solid var(--color-taupe); }
.badge-coming-soon { background: rgba(247, 241, 230, 0.08); color: var(--color-cream-soft); border: 1px solid var(--color-line); }
.badge-seasonal { background: rgba(122, 15, 31, 0.25); color: #E7A2AD; border: 1px solid var(--color-cherry-light); }

.menu-card-desc {
  color: var(--color-cream-soft);
  font-size: 0.95rem;
  flex: 1;
}

.menu-card-note {
  font-size: 0.8rem;
  color: var(--color-taupe);
  margin: var(--space-xs) 0 0;
}

/* Sold out cards read as muted/inactive */
.menu-card[data-status="sold-out"] .menu-card-image,
.menu-card[data-status="sold-out"] .menu-card-body {
  opacity: 0.55;
}

/* ================================================================
   8. ORDER FORM
================================================================= */
.order-section {
  padding: var(--space-xl) 0;
  background: var(--color-cream-soft);
  border-top: 1px solid var(--color-line-dark);
  border-bottom: 1px solid var(--color-line-dark);
}

.order-notice {
  max-width: 640px;
  margin: 0 auto var(--space-lg);
  text-align: center;
  background: rgba(122, 15, 31, 0.06);
  border: 1px solid rgba(122, 15, 31, 0.25);
  color: var(--color-cherry);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 500;
}

.order-form {
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-cream);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line-dark);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm) var(--space-md);
}

.field {
  margin-bottom: var(--space-md);
}

.field label,
.size-fieldset legend {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

.field-hint {
  font-size: 0.85rem;
  color: var(--color-taupe);
  margin-bottom: var(--space-sm);
}

.req { color: var(--color-cherry); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.98rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-taupe);
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  color: var(--color-espresso);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
textarea:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.2);
  outline: none;
}

textarea { resize: vertical; min-height: 90px; }

/* ---- Order size selector ---- */
.size-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-md);
}
.size-fieldset legend {
  padding: 0;
}

.size-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border: 1px solid var(--color-taupe);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.size-option:has(input:checked) {
  border-color: var(--color-cherry);
  background: rgba(122, 15, 31, 0.05);
}
.size-option:has(input:focus-visible) {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.size-option input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--color-cherry);
}

.size-option-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.size-option-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
}
.size-option-desc {
  font-size: 0.82rem;
  color: var(--color-taupe);
}

.size-option-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-cherry);
  flex-shrink: 0;
}

/* Conditional detail blocks (flavour select / Crave Box mix),
   shown/hidden by js/script.js based on the chosen order size. */
.size-detail {
  background: var(--color-cream-soft);
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
}

select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.98rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-taupe);
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  color: var(--color-espresso);
}
select:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.2);
  outline: none;
}

.size-detail-second-label {
  margin-top: var(--space-sm);
}

.qty-error {
  color: var(--color-cherry);
  font-size: 0.85rem;
  margin-top: var(--space-xs);
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.checkbox-field input {
  margin-top: 0.3rem;
  width: 18px;
  height: 18px;
  accent-color: var(--color-cherry);
  flex-shrink: 0;
}
.checkbox-field label {
  font-weight: 400;
  font-size: 0.9rem;
}

.total-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-espresso);
  color: var(--color-cream);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  font-weight: 600;
}
.total-amount {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-gold-light);
}

.payment-note {
  font-size: 0.85rem;
  color: var(--color-taupe);
  text-align: center;
  margin-bottom: var(--space-md);
}

.hidden-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.form-success {
  margin-top: var(--space-md);
  background: rgba(176, 141, 87, 0.12);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  text-align: center;
}
.form-success-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin-bottom: 0.2rem;
}
.form-success-subtitle {
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.form-success-order-number {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-cherry);
  background: rgba(122, 15, 31, 0.06);
  border: 1px solid rgba(122, 15, 31, 0.25);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  margin-bottom: 0.9rem;
}
.form-success p:last-child {
  margin-bottom: 0;
}

.form-error {
  margin-top: var(--space-sm);
  color: var(--color-cherry);
  text-align: center;
  font-weight: 500;
}

/* ================================================================
   9. HOW IT WORKS
================================================================= */
.how-section {
  background: var(--color-espresso);
  color: var(--color-cream);
  padding: var(--space-xl) 0;
}
.how-section .eyebrow { color: var(--color-gold-light); }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.step-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  position: relative;
}

.step-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--color-gold);
  margin-bottom: 0.2rem;
}

.step-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

.step-card p:last-child {
  color: var(--color-cream-soft);
  margin-bottom: 0;
  font-size: 0.95rem;
}

.pickup-note {
  text-align: center;
  color: var(--color-cream-soft);
  max-width: 560px;
  margin: 0 auto;
}

/* ================================================================
   10. FAQ
================================================================= */
.faq-section {
  padding: var(--space-xl) 0;
  background: var(--color-cream);
  color: var(--color-espresso);
}

.faq-list {
  max-width: 720px;
  margin: 0 auto;
  border-top: 1px solid var(--color-line-dark);
}

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

.faq-question {
  width: 100%;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  /* Explicit (not "none"/transparent) so this native <button> can never
     pick up a browser's own dark control chrome underneath our text. */
  background-color: var(--color-cream);
  border: none;
  cursor: pointer;
  padding: var(--space-sm) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-espresso);
}

.faq-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: var(--space-sm);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--color-cherry);
  transition: transform var(--transition-fast);
}
.faq-icon::before {
  top: 50%; left: 0;
  width: 100%; height: 2px;
  transform: translateY(-50%);
}
.faq-icon::after {
  top: 0; left: 50%;
  width: 2px; height: 100%;
  transform: translateX(-50%);
}
.faq-question[aria-expanded="true"] .faq-icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-med);
}
.faq-answer > p {
  overflow: hidden;
  min-height: 0;
  color: var(--color-taupe);
  margin: 0;
}
.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}
.faq-answer {
  overflow: hidden;
}
.faq-item.is-open .faq-answer p {
  padding-bottom: var(--space-sm);
}

/* ================================================================
   11. REVIEWS
================================================================= */
.reviews-section {
  background: var(--color-espresso);
  color: var(--color-cream);
  padding: var(--space-xl) 0;
}
.reviews-section .eyebrow { color: var(--color-gold-light); }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}

.review-card {
  background: var(--color-espresso-soft);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  position: relative;
}
.review-card::before {
  content: "\201C";
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--color-cherry-light);
  line-height: 1;
  display: block;
  margin-bottom: 0.2rem;
}

.review-quote {
  color: var(--color-cream-soft);
  font-style: italic;
}

.review-author {
  color: var(--color-gold-light);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0;
}

/* ================================================================
   12. INSTAGRAM
================================================================= */
.instagram-section {
  padding: var(--space-xl) 0;
  background: var(--color-cream);
  color: var(--color-espresso);
}
.instagram-inner {
  text-align: center;
}
.instagram-link {
  font-family: var(--font-display);
  font-size: 1.1rem;
}

/* ================================================================
   13. FOOTER
================================================================= */
.site-footer {
  background: var(--color-espresso);
  color: var(--color-cream-soft);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-gold);
}

.footer-inner {
  text-align: center;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-cream);
  margin-bottom: 0.2rem;
}

.footer-slogan {
  font-style: italic;
  color: var(--color-gold-light);
  margin-bottom: var(--space-sm);
}

.footer-location {
  margin-bottom: 0.2rem;
}

.footer-instagram {
  display: inline-block;
  color: var(--color-cream-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--color-gold);
  margin-bottom: var(--space-md);
}
.footer-instagram:hover { color: var(--color-gold-light); }

.footer-tagline {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--color-taupe);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

/* On wider screens the full tagline already fits on one line, so the
   forced break is only switched on at mobile widths (see the 640px
   media query further down), where it replaces random word-wrap with
   a deliberate, balanced two-line layout. */
.footer-tagline-break {
  display: none;
}

.footer-copy {
  font-size: 0.78rem;
  color: var(--color-taupe);
  margin: 0;
}

/* ================================================================
   14. RESPONSIVE
================================================================= */
@media (max-width: 860px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .nav-toggle {
    display: flex;
  }

  /* Fixed to the viewport (not the nav button) so the drawer's width is
     always exactly the screen width — it can never inherit a narrow
     width from a small ancestor and force horizontal overflow. Its
     "top" offset is set in px by js/script.js to sit right below the
     header, since the header's height can vary slightly by device. */
  .nav-list {
    position: fixed;
    top: 64px; /* fallback; overridden precisely by JS */
    right: 0;
    left: 0;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    background: var(--color-espresso);
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-line);
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
    z-index: 99;
  }
  .nav-list.is-open {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-list li {
    border-bottom: 1px solid var(--color-line);
  }
  .nav-list li:last-child { border-bottom: none; }
  .nav-list a {
    display: block;
    padding: 0.85rem 0;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .footer-tagline-break {
    display: block;
  }
}

/* Extra-narrow phones (iPhone SE and similar, ~320px): tighten
   letter-spacing just enough to keep each of the two tagline lines
   from wrapping again. Same font-size, same weight — just slightly
   less tracking. */
@media (max-width: 340px) {
  .footer-tagline {
    letter-spacing: 0.06em;
  }
}