/* ═══════════════════════════════════════════════════════════════════════════
   SHEFFY — SYSTEM.CSS
   Design token declarations + utility classes.
   Source of truth: DESIGN-TOKEN-SPEC.md v1.0
   ═══════════════════════════════════════════════════════════════════════════ */

      :root {
        --forest-950: #1e2b1e;
        --forest-900: #24332a;
        --forest-800: #2b3a2b;
        --forest-700: #3a4f3a;
        --forest-600: #4a664a;
        --forest-500: #5c7d5c;
        --forest-400: #7a9a7a;
        --forest-300: #9bb89b;
        --forest-200: #bdd4bd;
        --forest-100: #dee9de;
        --forest-50: #eff4ef;

        --lime-950: #2d4016;
        --lime-900: #3d5520;
        --lime-800: #4e6b2a;
        --lime-700: #638535;
        --lime-600: #7aad40;
        --lime-500: #8bc34a;
        --lime-400: #9ccc65;
        --lime-300: #aed581;
        --lime-200: #c5e1a5;
        --lime-100: #dce7c8;
        --lime-50: #f1f8e9;

        --stone-950: #1a1a1a;
        --stone-900: #2a2a28;
        --stone-800: #444444;
        --stone-700: #666662;
        --stone-600: #888888;
        --stone-500: #aaaaaa;
        --stone-400: #bbbbbb;
        --stone-300: #c8d0c4;
        --stone-200: #e8ece4;
        --stone-100: #f6f3ec;
        --stone-50: #eee9df;
        --stone-0: #f5f4f0;

        --color-error: #c62828;
        --color-warning: #e68a00;
        --color-success: #2e7d32;

        --color-surface-canvas: #eee9df;
        --color-surface-warm: var(--stone-50);
        --color-surface-raised: #FFFCF8;
        --color-surface-forest: var(--forest-950);
        --color-surface-forest-elevated: #2b3826;
        --color-surface-floating: rgba(255, 255, 255, 0.7);

        --color-text-display: var(--forest-800);
        --color-text-primary: var(--stone-950);
        --color-text-secondary: var(--stone-700);
        --color-text-tertiary: var(--stone-700);
        --color-text-overline: var(--lime-800);

        --color-text-dark-primary: #ede9e0;
        --color-text-dark-secondary: #a8b0a0;
        --color-text-dark-overline: var(--lime-500);

        --color-accent-primary: var(--forest-700);
        --color-accent-cta-start: var(--forest-800);
        --color-accent-cta-end: var(--lime-600);
        --color-accent-active: var(--lime-600);
        --color-accent-emphasis: var(--forest-700);

        --color-border-subtle: rgba(200, 190, 170, 0.25);
        --color-border-warm: var(--stone-300);
        --color-border-dark: var(--forest-800);

        --font-display: 'Playfair Display', Georgia, serif;
        --font-heading: 'Lexend', ui-sans-serif, system-ui, sans-serif;
        --font-body: 'Jost', ui-sans-serif, system-ui, sans-serif;
        --font-mono: 'JetBrains Mono', 'Courier New', monospace;

        --text-display-hero: 72px;
        --text-display-lg: 48px;
        --text-display-md: 36px;
        --text-heading-lg: 28px;
        --text-heading-md: 22px;
        --text-body-lg: 18px;
        --text-body-md: 16px;
        --text-label: 14px;
        --text-overline: 12px;

        --weight-regular: 400;
        --weight-medium: 500;
        --weight-semibold: 600;

        --measure-body: 65ch;
        --measure-heading: 45ch;
        --measure-caption: 35ch;
        --measure-display: 25ch;
        --paragraph-spacing: 1.5em;

        --space-4xs: 4px;
        --space-3xs: 8px;
        --space-2xs: 12px;
        --space-xs: clamp(16px, 2vw, 20px);
        --space-sm: clamp(24px, 3vw, 32px);
        --space-md: clamp(32px, 5vw, 52px);
        --space-lg: clamp(52px, 8vw, 84px);
        --space-xl: clamp(84px, 12vw, 136px);
        --side-padding: 40px;

        --radius-sm: 6px;
        --radius-md: 8px;
        --radius-lg: 12px;
        --radius-xl: 14px;
        --radius-2xl: 20px;
        --radius-full: 9999px;

        --opacity-ghost: 0.03;
        --opacity-whisper: 0.06;
        --opacity-hint: 0.1;
        --opacity-subtle: 0.2;
        --opacity-medium: 0.4;
        --opacity-strong: 0.6;
        --opacity-heavy: 0.8;
        --opacity-solid: 0.95;

        --blur-subtle: 4px;
        --blur-medium: 16px;
        --blur-immersive: 40px;

        --elevation-0: none;
        --elevation-1:
          0 1px 2px rgba(100, 80, 40, 0.04),
          0 4px 12px rgba(100, 80, 40, 0.05),
          0 12px 32px rgba(80, 60, 30, 0.03);
        --elevation-2:
          0 2px 4px rgba(100, 80, 40, 0.06),
          0 8px 20px rgba(100, 80, 40, 0.08),
          0 20px 44px rgba(80, 60, 30, 0.05);
        --elevation-3:
          0 4px 8px rgba(0, 0, 0, 0.12),
          0 12px 32px rgba(0, 0, 0, 0.14),
          0 24px 64px rgba(0, 0, 0, 0.12);
        --elevation-recessed: inset 0 2px 4px rgba(43, 58, 43, 0.06);

        --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-settle: cubic-bezier(0.34, 1.56, 0.64, 1);
        --ease-hover: cubic-bezier(0.25, 0.1, 0.25, 1);
        --ease-press: cubic-bezier(0.4, 0, 0.2, 1);
        --ease-exit: cubic-bezier(0.4, 0, 1, 1);

        --duration-instant: 80ms;
        --duration-micro: 150ms;
        --duration-fast: 250ms;
        --duration-normal: 400ms;
        --duration-slow: 600ms;
        --duration-dramatic: 900ms;
        --duration-cinematic: 1400ms;

        /* ── Motion: Reveal pattern ── */
        --reveal-lift: 40px;
        --reveal-duration: var(--duration-dramatic);
        --reveal-stagger-step: 120ms;

        --food-filter: sepia(8%) saturate(110%) brightness(102%) contrast(95%);
        --food-vignette: radial-gradient(
          ellipse at 40% 35%,
          transparent 50%,
          rgba(30, 43, 30, 0.15) 100%
        );

        /* ── Food overlay: dissolution pattern (Rule 43) ── */
        --food-overlay-hero-top: rgba(0, 0, 0, 0.65);
        --food-overlay-mid: rgba(0, 0, 0, 0.55);
        --food-overlay-cta-mid: rgba(0, 0, 0, 0.6);
        --food-overlay-edge: rgba(0, 0, 0, 1);
        --food-overlay-edge-width: 80px;
        --food-overlay-seam-tint: rgba(30, 43, 30, 0.82);

        /* Food overlay — pure black, per international catering site benchmarks */

        /* ── Pricing table ── */
        --pricing-mono-color: #1a1a1a; /* price figures on white card — hardcoded, not chained through var() */

        /* ── Pricing disclaimer (Rule 49) ── */
        --disclaimer-margin-top: var(--space-sm);
        --disclaimer-max-width: 560px;
        --disclaimer-color: var(--color-text-tertiary);
        --disclaimer-color-food-bg: rgba(255, 255, 255, 0.45);
        --disclaimer-max-width-food-bg: 100%;
      }

      @media (max-width: 768px) {
        :root {
          --side-padding: 20px;
        }
      }

      /* ── RESET & BASE ── */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: hidden;
      }
      body {
        font-family: var(--font-body);
        font-weight: var(--weight-regular);
        font-size: var(--text-body-lg);
        line-height: 1.6;
        background: var(--color-surface-canvas);
        color: var(--color-text-primary);
        overflow-x: hidden;
        text-rendering: optimizeLegibility;
      }

      /* ── GRAIN OVERLAY ── */
      body::after {
        content: '';
        position: fixed;
        inset: 0;
        filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E#g");
        opacity: var(--opacity-ghost);
        pointer-events: none;
        z-index: 9998;
        mix-blend-mode: overlay;
      }

      /* ── SURFACES ── */
      .surface-canvas {
        background: var(--color-surface-canvas);
        color: var(--color-text-primary);
      }
      .surface-warm {
        background: var(--color-surface-warm);
        color: var(--color-text-primary);
        position: relative;
      }
      .surface-warm::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        opacity: var(--opacity-ghost);
        mix-blend-mode: multiply;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
      }
      
      /* ── Section Rise: light section lifts over preceding dark section ── */
      .section-rise {
        position: relative;
        z-index: 2;
        margin-top: -52px;
        border-radius: 28px 28px 0 0;
        box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.08);
        overflow: hidden;
      }
      .section-rise.surface-warm::before {
        border-radius: 28px 28px 0 0;
      }
      @media (max-width: 768px) {
        .section-rise {
          margin-top: -36px;
          border-radius: 20px 20px 0 0;
        }
        .section-rise.surface-warm::before {
          border-radius: 20px 20px 0 0;
        }
      }

      .surface-raised {
        background: var(--color-surface-raised);
        border: 1px solid var(--color-border-subtle);
        box-shadow: var(--elevation-1);
        border-radius: var(--radius-xl);
        color: var(--color-text-primary);
      }
      .surface-forest {
        background: var(--color-surface-forest);
        color: var(--color-text-dark-primary);
        position: relative;
      }
      .surface-forest::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        opacity: var(--opacity-whisper);
        mix-blend-mode: multiply;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
      }
      .surface-forest .overline {
        color: var(--color-text-dark-overline);
      }
      .surface-forest .body-lg,
      .surface-forest .body-md {
        color: var(--color-text-dark-secondary);
      }
      .surface-floating {
        background: var(--color-surface-floating);
        border-bottom: 1px solid var(--color-border-subtle);
        box-shadow: var(--elevation-3);
        color: var(--color-text-primary);
      }
      @media (min-width: 769px) {
        .surface-floating {
          backdrop-filter: blur(var(--blur-medium));
          -webkit-backdrop-filter: blur(var(--blur-medium));
        }
      }

      /* ── INTENTS ── */
      .intent-interactive {
        cursor: pointer;
        transition:
          transform var(--duration-normal) var(--ease-hover),
          box-shadow var(--duration-normal) var(--ease-hover),
          border-color var(--duration-fast) var(--ease-hover);
      }
      .intent-interactive:hover {
        transform: translateY(-2px);
        box-shadow: var(--elevation-2);
        border-color: var(--color-border-warm);
      }
      .intent-interactive:active {
        transform: translateY(0) scale(0.97);
        transition-duration: var(--duration-instant);
      }
      .intent-static {
        cursor: default;
      }

      /* ── CONTAINERS ── */
      .container-narrow {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--side-padding);
        padding-right: var(--side-padding);
      }
      .container-default {
        width: 100%;
        max-width: 1120px;
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--side-padding);
        padding-right: var(--side-padding);
      }
      .container-wide {
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--side-padding);
        padding-right: var(--side-padding);
      }
      .container-full {
        width: 100%;
      }

      /* ── CTA HIERARCHY ── */
      .cta-primary,
      .cta-secondary,
      .cta-outline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-3xs);
        font-family: var(--font-heading);
        font-weight: var(--weight-semibold);
        text-decoration: none;
        border: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        height: 44px;
        padding: 0 28px;
        font-size: var(--text-label);
        border-radius: var(--radius-sm);
      }
      .cta-primary.cta-lg,
      .cta-secondary.cta-lg,
      .cta-outline.cta-lg {
        height: 52px;
        padding: 0 36px;
        font-size: var(--text-body-md);
        border-radius: var(--radius-md);
      }
      .cta-primary {
        background: var(--lime-500);
        color: var(--forest-800);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.25),
          0 1px 3px rgba(139, 195, 74, 0.2);
        transition:
          background var(--duration-fast) var(--ease-hover),
          box-shadow var(--duration-fast) var(--ease-hover),
          transform var(--duration-instant) var(--ease-press);
      }
      .cta-primary:hover {
        background: var(--lime-400);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.3),
          0 2px 8px rgba(139, 195, 74, 0.3);
      }
      .cta-primary:active {
        transform: scale(0.97);
        transition-duration: var(--duration-instant);
      }
      .cta-primary::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.2),
          transparent
        );
        transition: left 0.5s var(--ease-hover);
        pointer-events: none;
      }
      .cta-primary:hover::after {
        left: 100%;
      }
      .cta-secondary {
        background: var(--forest-800);
        color: #ffffff;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.12),
          0 1px 3px rgba(43, 58, 43, 0.2);
        transition:
          background var(--duration-fast) var(--ease-hover),
          box-shadow var(--duration-fast) var(--ease-hover),
          transform var(--duration-instant) var(--ease-press);
      }
      .cta-secondary:hover {
        background: var(--forest-700);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.15),
          0 2px 8px rgba(43, 58, 43, 0.25);
      }
      .cta-secondary:active {
        transform: scale(0.97);
        transition-duration: var(--duration-instant);
      }
      .cta-outline {
        background: transparent;
        color: var(--forest-800);
        border: 1px solid var(--color-border-subtle);
        box-shadow: var(--elevation-1);
        transition:
          border-color var(--duration-fast) var(--ease-hover),
          background var(--duration-fast) var(--ease-hover),
          transform var(--duration-instant) var(--ease-press);
      }
      .cta-outline:hover {
        border-color: var(--color-border-warm);
        background: var(--stone-50);
      }
      .cta-outline:active {
        transform: scale(0.97);
        transition-duration: var(--duration-instant);
      }
      .cta-text {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3xs);
        font-family: var(--font-heading);
        font-size: var(--text-label);
        font-weight: var(--weight-medium);
        color: var(--forest-800);
        text-decoration: none;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
        transition: color var(--duration-fast) var(--ease-hover);
      }
      .cta-text::after {
        content: '\2192';
        transition: transform var(--duration-fast) var(--ease-hover);
      }
      .cta-text:hover {
        color: var(--forest-700);
      }
      .cta-text:hover::after {
        transform: translateX(4px);
      }
      .surface-forest .cta-outline {
        color: var(--color-text-dark-primary);
        border-color: rgba(255, 255, 255, 0.3);
        box-shadow: none;
      }
      .surface-forest .cta-outline:hover {
        border-color: rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.05);
      }
      .surface-forest .cta-text {
        color: var(--color-text-dark-primary);
      }
      .surface-forest .cta-text:hover {
        color: #ffffff;
      }

      /* ── TYPOGRAPHY ── */
      .display {
        font-family: var(--font-display);
        font-size: clamp(42px, 5.5vw, 64px);
        font-weight: 700;
        line-height: 1.04;
        letter-spacing: -0.04em;
        max-width: var(--measure-display);
      } .nav__logo-img { height: 34px; width: auto; filter: none; } .nav__logo:hover .nav__logo-img { opacity: 1; } 
      .h2 {
        font-family: var(--font-display);
        font-size: clamp(28px, 4vw, 40px);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.04em;
        color: var(--color-text-primary);
        max-width: var(--measure-heading);
      }
      .h3 {
        font-family: var(--font-heading);
        font-size: var(--text-heading-md);
        font-weight: var(--weight-semibold);
        line-height: 1.25;
        letter-spacing: -0.015em;
        color: var(--color-text-primary);
        max-width: var(--measure-heading);
      }
      .body-lg {
        font-size: var(--text-body-lg);
        line-height: 1.65;
        letter-spacing: -0.005em;
        color: var(--color-text-secondary);
        max-width: var(--measure-body);
      }
      .body-md {
        font-size: var(--text-body-md);
        line-height: 1.6;
        color: var(--color-text-secondary);
        max-width: var(--measure-body);
      }
      .body-sm {
        font-size: 13px;
        line-height: 1.5;
        letter-spacing: 0.01em;
        color: var(--color-text-secondary);
        max-width: var(--measure-body);
      }
      .caption {
        font-family: var(--font-heading);
        font-size: 11px;
        font-weight: var(--weight-medium);
        line-height: 1.4;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--color-text-tertiary);
        max-width: var(--measure-caption);
      }
      .overline {
        font-family: var(--font-heading);
        font-size: var(--text-overline);
        font-weight: var(--weight-semibold);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-text-overline);
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .overline::before {
        content: '';
        width: 28px;
        height: 2px;
        background: linear-gradient(
          90deg,
          var(--lime-500),
          rgba(139, 195, 74, 0.3)
        );
        border-radius: 1px;
        flex-shrink: 0;
      }
      .label {
        font-family: var(--font-heading);
        font-size: var(--text-label);
        font-weight: var(--weight-medium);
        line-height: 1.4;
      }
      .mono {
        font-family: var(--font-mono);
        font-size: var(--text-label);
        font-weight: var(--weight-regular);
        letter-spacing: -0.02em;
      }
      .body-lg + .body-lg,
      .body-md + .body-md,
      .body-sm + .body-sm {
        margin-top: var(--paragraph-spacing);
      }

      /* ── SECTIONS & LAYOUT ── */
      .section {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
        position: relative;
      }
      .section-hero {
        min-height: 60vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 38vh;
        padding-bottom: var(--space-xl);
      }

      /* ── SCROLL REVEAL ── */
      .reveal {
        opacity: 0;
        transform: translateY(var(--reveal-lift));
        transition:
          opacity var(--reveal-duration) var(--ease-arrive),
          transform var(--reveal-duration) var(--ease-arrive);
      }
      .reveal.visible {
        opacity: 1;
        transform: none;
      }
      .reveal.visible.intent-interactive:hover {
        transform: translateY(-2px);
      }
      .reveal.visible.intent-interactive:active {
        transform: translateY(0) scale(0.97);
      }
      .reveal-stagger:nth-child(1) {
        transition-delay: 0ms;
      }
      .reveal-stagger:nth-child(2) {
        transition-delay: calc(var(--reveal-stagger-step) * 1);
      }
      .reveal-stagger:nth-child(3) {
        transition-delay: calc(var(--reveal-stagger-step) * 2);
      }
      .reveal-stagger:nth-child(4) {
        transition-delay: calc(var(--reveal-stagger-step) * 3);
      }
      .reveal-stagger:nth-child(5) {
        transition-delay: calc(var(--reveal-stagger-step) * 4);
      }
      .reveal-stagger:nth-child(6) {
        transition-delay: calc(var(--reveal-stagger-step) * 5);
      }

      /* ── PROGRESS BAR ── */
      .progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--lime-500), #c6ff00);
        transform-origin: left center;
        transform: scaleX(0);
        z-index: 200;
        pointer-events: none;
      }
      @media (min-width: 769px) {
        @supports (animation-timeline: scroll()) {
          .progress-bar {
            animation: progress-grow linear;
            animation-timeline: scroll(root block);
          }
          @keyframes progress-grow {
            from {
              transform: scaleX(0);
            }
            to {
              transform: scaleX(1);
            }
          }
        }
      }
      @media (max-width: 768px) {
        .progress-bar {
          display: none;
        }
      }

      /* ── UTILITY ── */
      .pill {
        display: inline-flex;
        align-items: center;
        gap: 0.25ch;
        padding: var(--space-4xs) var(--space-2xs);
        background: rgba(139, 195, 74, var(--opacity-hint));
        border: 1px solid rgba(139, 195, 74, 0.25);
        border-radius: var(--radius-full);
        font-family: var(--font-heading);
        font-size: 11px;
        font-weight: var(--weight-medium);
        color: var(--forest-800);
        white-space: nowrap;
        flex-shrink: 0;
      }
      .surface-forest .pill {
        background: rgba(139, 195, 74, 0.15);
        border-color: rgba(139, 195, 74, 0.35);
        color: var(--lime-300);
      }
      .hero--food-bg .pill {
        background: rgba(139, 195, 74, 0.15);
        border-color: rgba(139, 195, 74, 0.35);
        color: var(--lime-300);
      }
      .text-center {
        text-align: center;
      }
      .measure-center {
        max-width: var(--measure-body);
        margin-left: auto;
        margin-right: auto;
      }
      .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;
      }

      /* ── ACCESSIBILITY ── */
      :focus-visible {
        outline: 2px solid var(--lime-500);
        outline-offset: 2px;
      }
      .surface-forest :focus-visible {
        outline-color: var(--lime-400);
      }
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
        .reveal {
          opacity: 1;
          transform: none;
          transition: opacity var(--duration-fast) ease;
        }
        .dish-list__overflow {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: var(--space-sm);
          grid-column: 1 / -1;
        }
        .menu-expand-btn {
          display: none;
        }
        body::after {
          display: none;
        }
        html {
          scroll-snap-type: none !important;
        }
      }

      /* ═══════════════════════════════════════════════════════════════════════════
   SPOKE PAGE STYLES — Corporate Catering
   ═══════════════════════════════════════════════════════════════════════════ */

      /* ── HERO ── */
      .hero {
        position: relative;
        z-index: 1;
      }
      .hero__content {
        position: relative;
        z-index: 2;
      }
      .hero__title {
        color: #ffffff;
        margin-top: var(--space-xs);
        margin-bottom: var(--space-sm);
      }
      .hero__subtitle {
        max-width: 540px;
        margin-bottom: var(--space-sm);
      }
      /* Beat .surface-forest .body-lg (0,2,0) with hero-specific overrides (0,2,0 + later source order) */
      .hero--food-bg .hero__title {
        color: #ffffff;
      }
      .hero--food-bg .hero__subtitle {
        color: rgba(255, 255, 255, 0.9);
      }
      .hero--food-bg .overline {
        color: var(--lime-400);
      }
      .hero__stats {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3xs);
        margin-bottom: var(--space-md);
      }
      .hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2xs);
      }

      /* ── SECTION HEADER ── */
      .section-header {
        margin-bottom: var(--space-md);
      }
      .section-header .h2 {
        margin-top: var(--space-2xs);
      }
      .section-header .body-lg {
        margin-top: var(--space-xs);
      }

      /* ── TRUST GRID ── */
      .trust-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
      }
      @media (max-width: 768px) {
        .trust-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      .trust-item {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2xs);
      }
      .trust-item__icon {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        gap: 0.25ch;
        justify-content: center;
        background: var(--forest-50);
        border-radius: var(--radius-lg);
        color: var(--forest-700);
        font-size: 18px;
      }
      .trust-item__text {
        display: flex;
        flex-direction: column;
        gap: var(--space-4xs);
      }
      .trust-item__value {
        color: var(--color-text-primary);
      }
      .trust-item__label {
        color: var(--color-text-secondary);
      }

      /* ── MENU PREVIEW ── */
      .menu-preview {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
      }
      @media (max-width: 768px) {
        .menu-preview {
          grid-template-columns: 1fr;
        }
      }
      .menu-preview__card {
        padding: var(--space-sm);
      }
      .menu-preview__card-title {
        margin-bottom: var(--space-2xs);
      }
      .menu-preview__dishes {
        list-style: none;
      }
      .menu-preview__dish {
        padding: var(--space-4xs) 0;
        border-bottom: 1px solid var(--color-border-subtle);
        color: var(--color-text-secondary);
        font-size: var(--text-body-md);
      }
      .menu-preview__dish:last-child {
        border-bottom: none;
      }

      /* ── PRICING TABLE ── */
      .pricing-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .pricing-table {
        width: 100%;
        border-collapse: collapse;
        font-family: var(--font-body);
        font-size: var(--text-body-md);
      }
      .pricing-table thead {
        background: var(--forest-50);
      }
      .pricing-table th {
        font-family: var(--font-heading);
        font-size: var(--text-label);
        font-weight: var(--weight-semibold);
        color: var(--color-text-primary);
        text-align: left;
        padding: var(--space-2xs) var(--space-xs);
        border-bottom: 1px solid var(--color-border-subtle);
      }
      .pricing-table td {
        padding: var(--space-2xs) var(--space-xs);
        border-bottom: 1px solid var(--color-border-subtle);
        color: var(--color-text-secondary);
      }
      .pricing-table td:first-child {
        color: var(--color-text-primary);
        font-weight: var(--weight-medium);
      }
      .pricing-table .mono {
        color: #1a1a1a;
      }
      .pricing-table tbody tr:last-child td {
        border-bottom: none;
      }
      .pricing-disclaimer {
        margin-top: var(--disclaimer-margin-top);
        margin-left: auto;
        margin-right: auto;
        max-width: var(--disclaimer-max-width);
        text-align: center;
        color: var(--disclaimer-color);
      }
      .food-bg .pricing-disclaimer {
        max-width: var(--disclaimer-max-width-food-bg);
        color: var(--disclaimer-color-food-bg);
      }

      /* ── CARD GRID ── */
      .card-grid {
        display: grid;
        gap: var(--space-sm);
      }

      .card-grid--3 {
        grid-template-columns: repeat(3, 1fr);
      }
      .card-grid--4 {
        grid-template-columns: repeat(4, 1fr);
      }

      @media (max-width: 1024px) {
        .card-grid--4 {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 768px) {
        .card-grid--3,
        .card-grid--4 {
          grid-template-columns: 1fr;
        }
      }

      /* ── SERVICE CARD ── */
      .service-card {
        display: flex;
        flex-direction: column;
        padding: var(--space-sm);
        text-decoration: none;
        color: var(--color-text-primary);
        transition:
          box-shadow var(--duration-fast) var(--ease-hover),
          transform var(--duration-fast) var(--ease-hover);
      }
      .service-card:hover {
        box-shadow: var(--elevation-2);
        transform: translateY(-2px);
      }
      .service-card__icon {
        font-size: 32px;
        margin-bottom: var(--space-3xs);
      }
      .service-card__title {
        margin-bottom: var(--space-3xs);
      }
      .service-card__desc {
        color: var(--color-text-secondary);
        margin-bottom: var(--space-xs);
        flex: 1;
      }
      .service-card__meta {
        display: flex;
        gap: var(--space-sm);
        margin-bottom: var(--space-xs);
      }
      .service-card__stat-value {
        display: block;
        font-weight: var(--weight-semibold);
        color: var(--color-text-primary);
      }
      .service-card__stat-label {
        color: var(--color-text-tertiary);
      }
      .service-card__footer {
        display: flex;
        align-items: center;
        gap: var(--space-3xs);
        font-family: var(--font-heading);
        font-weight: var(--weight-medium);
        font-size: var(--text-label);
        color: var(--color-accent-primary);
      }

      /* ── CUISINE CARD ── */
      .cuisine-card {
        display: flex;
        flex-direction: column;
        padding: var(--space-sm);
        text-decoration: none;
      }

      .cuisine-card__header {
        display: flex;
        align-items: center;
        gap: var(--space-2xs);
        margin-bottom: var(--space-3xs);
      }

      .cuisine-card__dishes {
        margin-bottom: var(--space-2xs);
      }

      .cuisine-card__sample {
        flex: 1;
        margin-bottom: var(--space-xs);
      }

      .cuisine-card__best-for {
        color: var(--color-text-tertiary);
        margin-bottom: var(--space-2xs);
      }

      .cuisine-card__footer {
        margin-top: auto;
        padding-top: var(--space-2xs);
        border-top: 1px solid var(--color-border-subtle);
      }

      /* ── PROCESS STEPS ── */
      .process-steps {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-sm);
        counter-reset: step;
      }
      .process-steps--3 {
        grid-template-columns: repeat(3, 1fr);
      }
      @media (max-width: 1024px) {
        .process-steps {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (max-width: 768px) {
        .process-steps {
          grid-template-columns: 1fr;
        }
      }
      .process-step {
        position: relative;
        counter-increment: step;
      }
      .process-step__number {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: var(--forest-50);
        border: 1px solid var(--color-border-subtle);
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-2xs);
        color: var(--forest-700);
      }
      .process-step__title {
        margin-bottom: var(--space-3xs);
      }
      @media (min-width: 769px) {
        .process-step:not(:last-child)::after {
          content: '';
          position: absolute;
          top: 22px;
          left: calc(44px + var(--space-2xs));
          right: calc(-1 * var(--space-sm));
          height: 1px;
          background: var(--color-border-subtle);
        }
      }

      /* ── SAMPLE PACKAGE ── */
      .sample-package {
        padding: var(--space-sm) var(--space-md);
        max-width: 560px;
        margin: 0 auto;
      }
      .sample-package__section {
        margin-bottom: var(--space-xs);
      }
      .sample-package__heading {
        font-family: var(--font-heading);
        font-size: var(--text-label);
        font-weight: var(--weight-semibold);
        color: var(--color-text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: var(--space-3xs);
      }
      .sample-package__item {
        padding: var(--space-4xs) 0;
        color: var(--color-text-secondary);
        font-size: var(--text-body-md);
      }
      .sample-package__item::before {
        content: '\2713  ';
        color: var(--color-success);
        font-weight: var(--weight-semibold);
      }
      .sample-package__total {
        margin-top: var(--space-xs);
        padding-top: var(--space-xs);
        border-top: 2px solid var(--forest-100);
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        flex-wrap: wrap;
        gap: var(--space-3xs);
      }
      @media (max-width: 768px) {
        .sample-package {
          padding: var(--space-sm);
        }
      }

      /* ── CROSS-LINK GRID ── */
      .crosslink-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
      }
      @media (max-width: 768px) {
        .crosslink-grid {
          grid-template-columns: 1fr;
        }
      }
      .crosslink-card {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        padding: var(--space-sm);
        text-decoration: none;
      }
      .crosslink-card__icon {
        flex-shrink: 0;
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--forest-50);
        border-radius: var(--radius-lg);
        font-size: 24px;
      }
      .crosslink-card__text {
        flex: 1;
      }

      /* ── AREAS SERVED ── */
      .areas-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
        margin-bottom: var(--space-md);
      }
      @media (max-width: 768px) {
        .areas-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      .areas-grid__item {
        display: flex;
        align-items: center;
        gap: var(--space-3xs);
        padding: var(--space-2xs) var(--space-xs);
        background: var(--color-surface-raised);
        border: 1px solid var(--color-border-subtle);
        border-radius: var(--radius-md);
        box-shadow: var(--elevation-1);
        font-family: var(--font-heading);
        font-size: var(--text-body-md);
        font-weight: var(--weight-medium);
        color: var(--color-text-primary);
      }
      .areas-grid__item::before {
        content: '\1F4CD';
        font-size: 14px;
        flex-shrink: 0;
      }
      .areas-map {
        width: 100%;
        height: 300px;
        border: 1px solid var(--color-border-subtle);
        border-radius: var(--radius-lg);
        overflow: hidden;
      }
      .areas-map iframe {
        width: 100%;
        height: 100%;
        border: none;
      }

      /* ── CITY SWITCHER ── */
      .city-switcher {
        display: flex;
        align-items: center;
        gap: var(--space-3xs);
        margin-bottom: var(--space-sm);
      }
      .city-switcher__label {
        font-family: var(--font-heading);
        font-size: var(--text-label);
        font-weight: var(--weight-medium);
        color: var(--color-text-tertiary);
      }
      .city-switcher__link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-4xs);
        padding: var(--space-4xs) var(--space-2xs);
        border: 1px solid var(--color-border-subtle);
        border-radius: var(--radius-full);
        box-shadow: var(--elevation-1);
        font-family: var(--font-heading);
        font-size: var(--text-label);
        font-weight: var(--weight-medium);
        color: var(--forest-700);
        text-decoration: none;
        transition:
          border-color var(--duration-fast) var(--ease-hover),
          background var(--duration-fast) var(--ease-hover);
      }
      .city-switcher__link:hover {
        border-color: var(--lime-500);
        background: var(--lime-50);
      }
      .city-switcher__link--active {
        background: var(--forest-50);
        border-color: var(--forest-300);
        color: var(--forest-800);
        pointer-events: none;
      }

      /* ── Instagram Embed Grid ── */
      .ig-scroll-row {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--forest-200) var(--stone-100);
        margin-bottom: var(--space-sm);
        padding-bottom: var(--space-3xs);
      }
      .ig-scroll-row::-webkit-scrollbar {
        height: 4px;
      }
      .ig-scroll-row::-webkit-scrollbar-track {
        background: var(--stone-100);
        border-radius: var(--radius-sm);
      }
      .ig-scroll-row::-webkit-scrollbar-thumb {
        background: var(--forest-200);
        border-radius: var(--radius-sm);
        transition: background var(--duration-normal) var(--ease-default);
      }
      .ig-scroll-row::-webkit-scrollbar-thumb:hover {
        background: var(--lime-400);
      }
      .ig-scroll-row:last-of-type {
        margin-bottom: 0;
      }
      .ig-scroll-track {
        display: flex;
        gap: var(--space-2xs);
        padding: 4px 0;
      }
      .ig-slot {
        flex: 0 0 300px;
        border-radius: var(--radius-xl);
        overflow: hidden;
        background: var(--color-surface-raised);
        border: 1px solid var(--stone-200);
        box-shadow: var(--elevation-1);
        transition: all var(--duration-normal) var(--ease-default);
      }
      .ig-slot:hover {
        border-color: var(--lime-300);
        box-shadow: 0 8px 30px rgba(139, 195, 74, 0.1);
        transform: translateY(-2px);
      }
      .ig-slot iframe {
        display: block;
        width: 100%;
        height: 520px;
        border: none;
      }
      @media (max-width: 768px) {
        .ig-slot {
          flex: 0 0 260px;
        }
        .ig-slot iframe {
          height: 460px;
        }
        .ig-scroll-row {
          margin-bottom: var(--space-xs);
        }
      }

      /* ── STICKY CATEGORY NAVIGATION ── */
      .category-nav {
        position: sticky;
        top: var(--header-height-scrolled);
        z-index: 100;
        background: var(--color-surface-warm);
        border-bottom: 1px solid var(--color-border-subtle);
        padding: 0;
      }
      .category-nav__bar {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-xs);
        max-width: 1200px;
        margin: 0 auto;
        padding: var(--space-xs) var(--space-sm);
      }
      .category-nav__inner {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3xs);
        flex: 1;
        min-width: 0;
      }
      .category-nav__filters {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
        padding-left: var(--space-xs);
        border-left: 2px solid var(--color-border-subtle);
      }
      .category-nav__link {
        font-family: var(--font-heading);
        font-size: 13px;
        font-weight: var(--weight-semibold);
        color: var(--color-text-secondary);
        text-decoration: none;
        white-space: nowrap;
        padding: 8px 16px;
        border-radius: var(--radius-full);
        border: 1.5px solid var(--color-border-warm);
        background: var(--color-surface-raised);
        transition: all var(--duration-fast) var(--ease-hover);
        letter-spacing: 0.01em;
      }
      .category-nav__link:hover {
        border-color: var(--forest-500);
        background: var(--forest-50);
        color: var(--forest-700);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(58, 79, 58, 0.12);
      }
      .category-nav__link.active {
        background: var(--forest-700);
        color: #ffffff;
        border-color: var(--forest-700);
        box-shadow: 0 2px 12px rgba(58, 79, 58, 0.3);
      }

      /* ── DIETARY FILTER CHIPS ── */
      .filter-bar {
        display: flex;
        gap: 6px;
      }
      .filter-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        padding: 0 18px;
        background: var(--color-surface-raised);
        border: 1.5px solid var(--color-border-warm);
        border-radius: var(--radius-full);
        font-family: var(--font-heading);
        font-size: 13px;
        font-weight: var(--weight-semibold);
        color: var(--color-text-secondary);
        cursor: pointer;
        white-space: nowrap;
        letter-spacing: 0.01em;
        transition: all var(--duration-fast) var(--ease-hover);
      }
      .filter-chip:hover {
        border-color: var(--forest-500);
        background: var(--forest-50);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(58, 79, 58, 0.12);
      }
      .filter-chip--active {
        background: var(--forest-700);
        color: #ffffff;
        border-color: var(--forest-700);
        box-shadow: 0 2px 12px rgba(58, 79, 58, 0.3);
      }
      .filter-chip--active .diet-dot {
        background: #fff;
      }

      /* ── STATE/REGION CHIP ROW (inside sticky nav) ── */
      .category-nav__state-bar {
        display: flex;
        gap: 6px;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--space-sm) var(--space-xs);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .category-nav__state-bar::-webkit-scrollbar {
        display: none;
      }
      .category-nav__state-label {
        font-family: var(--font-heading);
        font-size: 11px;
        font-weight: var(--weight-semibold);
        color: var(--color-text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        white-space: nowrap;
        margin-right: 2px;
      }
      .state-chip {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0 12px;
        background: var(--color-surface-raised);
        border: 1.5px solid var(--color-border-warm);
        border-radius: var(--radius-full);
        font-family: var(--font-heading);
        font-size: 12px;
        font-weight: var(--weight-semibold);
        color: var(--color-text-secondary);
        cursor: pointer;
        white-space: nowrap;
        letter-spacing: 0.01em;
        transition: all var(--duration-fast) var(--ease-hover);
      }
      .state-chip:hover {
        border-color: var(--forest-500);
        background: var(--forest-50);
        color: var(--forest-700);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(58, 79, 58, 0.12);
      }
      .state-chip--active {
        background: var(--forest-700);
        color: #ffffff;
        border-color: var(--forest-700);
        box-shadow: 0 2px 12px rgba(58, 79, 58, 0.3);
      }

      /* ── STATE FILTER GRID ── */
      .state-filter-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-xs);
      }
      .state-card {
        appearance: none;
        -webkit-appearance: none;
        background: var(--color-surface-raised);
        box-shadow: var(--elevation-1);
        font: inherit;
        color: inherit;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding: var(--space-sm);
        border-radius: var(--radius-lg);
        cursor: pointer;
        border: 2px solid transparent;
        transition: all 0.25s ease;
        text-align: left;
      }
      .state-card__icon {
        width: 32px;
        height: 32px;
        margin-bottom: var(--space-3xs);
        color: var(--color-text-secondary);
        flex-shrink: 0;
      }
      .state-card__icon svg {
        width: 100%;
        height: 100%;
        display: block;
      }
      .state-card--active .state-card__icon {
        color: var(--lime-600);
      }
      .state-card__desc {
        display: block;
      }
      .state-card:hover {
        border-color: var(--lime-500);
        transform: translateY(-1px);
      }
      .state-card--active {
        border-color: var(--lime-500);
        box-shadow: 0 0 0 1px var(--lime-500);
      }
      .state-card__name {
        margin: 0 0 var(--space-4xs) 0;
      }
      .state-card__desc {
        margin: 0 0 var(--space-3xs) 0;
        color: var(--color-text-secondary);
        flex: 1;
      }
      .state-card__count {
        font-family: var(--font-heading);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        color: var(--lime-800);
      }
      /* hidden class for state filtering */
      .dish-item--hidden-state {
        display: none !important;
      }
      /* ── STATE FILTER STATUS BAR (inside sticky nav) ── */
      .state-filter-status {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-3xs) var(--space-sm);
        background: var(--lime-100);
        border-radius: var(--radius-sm);
        margin: var(--space-3xs) 0 0;
        font-family: var(--font-heading);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        color: var(--lime-900);
      }
      .state-filter-status__clear {
        all: unset;
        cursor: pointer;
        padding: 2px var(--space-3xs);
        border-radius: var(--radius-sm);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        color: var(--lime-800);
        transition: background 0.15s ease;
      }
      .state-filter-status__clear:hover {
        background: var(--lime-200);
      }
      @media (max-width: 768px) {
        .state-filter-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 480px) {
        .state-filter-grid {
          grid-template-columns: 1fr 1fr;
          gap: var(--space-3xs);
        }
        .state-card {
          padding: var(--space-xs);
        }
        .state-card__desc {
          display: none;
        }
      }

      /* ── DIETARY INDICATOR TAGS ── */
      .diet-tag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-family: var(--font-heading);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.05em;
        padding: 0;
        background: none;
        line-height: 1;
      }
      .diet-tag::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .diet-tag--veg {
        color: #2e7d32;
      }
      .diet-tag--veg::before {
        background: #2e7d32;
      }
      .diet-tag--non-veg {
        color: #c62828;
      }
      .diet-tag--non-veg::before {
        background: #c62828;
      }
      .diet-tag--jain {
        color: #f57c00;
      }
      .diet-tag--jain::before {
        background: #f57c00;
      }
      .diet-tag--vegan {
        color: #558b2f;
      }
      .diet-tag--vegan::before {
        background: #558b2f;
      }
      /* hidden class for state filtering */
      .dish-item--hidden-state {
        display: none !important;
      }

      /* ── MUST-TRY BADGE (lime pill on featured dishes) ── */
      .badge--popular {
        display: inline-block;
        padding: 2px var(--space-3xs);
        background: var(--lime-100);
        color: var(--lime-800);
        font-family: var(--font-heading);
        font-size: 10px;
        font-weight: var(--weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-radius: var(--radius-sm);
        margin-top: var(--space-4xs);
      }

      /* ── SCROLL BREAKER (quote/stat card between menu categories) ── */
      .menu-breaker {
        margin: var(--space-md) 0;
        padding: var(--space-sm) var(--space-md);
        border-left: 3px solid var(--lime-500);
        background: var(--color-surface-warm);
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
      }
      .menu-breaker__quote {
        font-family: var(--font-body);
        font-size: var(--text-body-md);
        line-height: 1.65;
        color: var(--color-text-primary);
        font-style: italic;
      }
      .menu-breaker__source {
        display: block;
        margin-top: var(--space-3xs);
        font-family: var(--font-heading);
        font-size: var(--text-label);
        color: var(--color-text-tertiary);
        font-style: normal;
      }

      /* ── DISH LIST GRID VIEW (§20) ── */
      .dish-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
      }
      .dish-item {
        padding: var(--space-sm);
        background: var(--color-surface-raised);
        border: 1px solid var(--color-border-subtle);
        border-radius: var(--radius-lg);
        box-shadow: var(--elevation-1);
        transition: all 0.25s ease;
        display: flex;
        flex-direction: column;
      }
      .dish-item:hover {
        box-shadow: var(--elevation-2);
        transform: translateY(-1px);
      }
      .dish-item--hidden {
        display: none;
      }
      .dish-item__header {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2xs);
        margin-bottom: var(--space-xs);
      }
      .dish-item__icon {
        font-size: 14px;
        line-height: 1;
        flex-shrink: 0;
        letter-spacing: -2px;
        margin-top: 2px;
      }
      .dish-item__name {
        flex: 1;
      }
      .dish-item__desc {
        font-size: var(--text-body-sm);
        line-height: 1.6;
        color: var(--color-text-secondary);
        margin-bottom: var(--space-xs);
        flex: 1;
      }
      .dish-item__meta {
        display: flex;
        gap: var(--space-sm);
        align-items: center;
        margin-top: auto;
      }

      .menu-category {
        margin-bottom: var(--space-lg);
        scroll-margin-top: calc(var(--header-height-scrolled) + 120px);
      }
      .menu-category:last-child {
        margin-bottom: 0;
      }
      .menu-category .h3 {
        margin-bottom: var(--space-sm);
        color: var(--forest-700);
      }

      /* ── DISH OVERFLOW COLLAPSE (§20) ── */
      .dish-list__overflow {
        display: none;
      }
      .dish-list__overflow.expanded {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
        grid-column: 1 / -1;
      }
      .menu-expand-btn {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-3xs);
        width: 100%;
        padding: var(--space-xs) var(--space-sm);
        background: var(--forest-50);
        border: 1px solid var(--forest-200);
        border-radius: var(--radius-md);
        font-family: var(--font-body);
        font-size: var(--text-body-md);
        font-weight: var(--weight-medium);
        color: var(--forest-700);
        cursor: pointer;
        transition:
          background var(--duration-fast) var(--ease-hover),
          border-color var(--duration-fast) var(--ease-hover);
      }
      .menu-expand-btn:hover {
        background: var(--forest-100);
        border-color: var(--forest-300);
      }
      .menu-expand-btn::after {
        content: '+';
        font-size: 18px;
        line-height: 1;
      }
      .menu-expand-btn.expanded::after {
        content: '\2212';
      }

      /* ── MENU RESPONSIVE ── */
      @media (max-width: 1024px) {
        .dish-list,
        .dish-list__overflow.expanded {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      /* ── MOBILE MENU CATEGORY COLLAPSE ── */
      @media (max-width: 768px) {
        .dish-list,
        .dish-list__overflow.expanded {
          grid-template-columns: 1fr;
        }
        .category-nav__bar {
          flex-direction: column;
          gap: var(--space-3xs);
          padding: var(--space-3xs) var(--side-padding);
        }
        .category-nav__inner {
          gap: var(--space-3xs);
        }
        .category-nav__filters {
          align-self: flex-start;
          border-left: none;
          padding-left: 0;
        }
        .category-nav__state-bar {
          padding: 0 var(--side-padding) var(--space-3xs);
        }
        .menu-category--collapsible .dish-list {
          display: none;
        }
        .menu-category--collapsible.expanded .dish-list {
          display: grid;
        }
        .menu-category--collapsible .h3 {
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .menu-category--collapsible .h3::after {
          content: '+';
          flex-shrink: 0;
          width: 28px;
          height: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          font-weight: var(--weight-regular);
          color: var(--color-text-tertiary);
          transition: transform var(--duration-fast) var(--ease-hover);
        }
        .menu-category--collapsible.expanded .h3::after {
          content: '\2212';
        }
      }

      /* ── FAQ ACCORDION ── */
      .faq-list {
        list-style: none;
      }
      .faq-item {
        border-bottom: 1px solid var(--color-border-subtle);
      }
      .faq-item:first-child {
        border-top: 1px solid var(--color-border-subtle);
      }
      .faq-question {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--space-xs) 0;
        background: none;
        border: none;
        cursor: pointer;
        text-align: left;
        font-family: var(--font-heading);
        font-size: var(--text-body-md);
        font-weight: var(--weight-semibold);
        color: var(--color-text-primary);
        line-height: 1.4;
      }
      .faq-question::after {
        content: '+';
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: var(--weight-regular);
        color: var(--color-text-tertiary);
        transition: transform var(--duration-fast) var(--ease-hover);
      }
      .faq-item.open .faq-question::after {
        content: '\2212';
      }
      .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--duration-normal) var(--ease-arrive);
      }
      .faq-answer__inner {
        padding-bottom: var(--space-xs);
      }

      /* ── CTA BAND ── */
      .cta-band__content {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 2;
      }
      .cta-band__title {
        color: var(--color-text-dark-primary);
        max-width: var(--measure-heading);
      }
      .cta-band__subtitle {
        margin-top: var(--space-2xs);
        margin-bottom: var(--space-sm);
      }
      .cta-band__actions {
        justify-content: center;
        margin-top: var(--space-sm);
      }

      /* ── ADD-ONS TABLE ── */
      .addons-table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--text-body-md);
        margin-top: var(--space-xs);
      }
      .addons-table th {
        font-family: var(--font-heading);
        font-size: var(--text-label);
        font-weight: var(--weight-semibold);
        text-align: left;
        padding: var(--space-2xs) var(--space-xs);
        border-bottom: 1px solid var(--color-border-subtle);
        color: var(--color-text-primary);
      }
      .addons-table td {
        padding: var(--space-2xs) var(--space-xs);
        border-bottom: 1px solid var(--color-border-subtle);
        color: var(--color-text-secondary);
      }
      .addons-table td:first-child {
        color: var(--color-text-primary);
        font-weight: var(--weight-medium);
      }
      .addons-table tbody tr:last-child td {
        border-bottom: none;
      }

      /* ── LOGO WALL ── */
      .logo-wall {
        background: var(--color-surface-warm);
        padding: 40px var(--side-padding) 44px;
        position: relative;
        overflow: hidden;
      }
      .logo-wall::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
        background-size: 256px 256px;
        pointer-events: none;
      }
      .logo-wall__inner {
        max-width: 1120px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 28px;
      }
      .logo-wall__overline {
        font-family: var(--font-heading);
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-text-secondary);
      }
      .logo-wall__overline span {
        color: var(--lime-600);
      }
      .logo-wall__grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 0 8px;
        align-items: center;
        justify-items: center;
        width: 100%;
        max-width: 960px;
      }
      .logo-wall__cell {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px 12px;
        width: 100%;
      }
      .logo-wall__cell img {
        max-height: 28px;
        max-width: 110px;
        width: auto;
        height: auto;
        object-fit: contain;
        filter: grayscale(1) brightness(0.45) sepia(0.12);
        opacity: 0.5;
        mix-blend-mode: multiply;
        transition:
          filter var(--duration-fast) var(--ease-hover),
          opacity var(--duration-fast) var(--ease-hover),
          transform var(--duration-fast) var(--ease-hover);
      }
      .logo-wall__cell:hover img {
        filter: grayscale(0) brightness(1) sepia(0);
        opacity: 1;
        transform: scale(1.08);
      }
      .logo-wall__grid .logo-wall__cell:nth-child(n + 7) img {
        opacity: 0.4;
      }
      .logo-wall__grid .logo-wall__cell:nth-child(n + 13) img {
        opacity: 0.3;
      }
      .logo-wall__grid .logo-wall__cell:nth-child(n + 19) img {
        opacity: 0.22;
      }
      .logo-wall__grid .logo-wall__cell:nth-child(n + 7):hover img,
      .logo-wall__grid .logo-wall__cell:nth-child(n + 13):hover img,
      .logo-wall__grid .logo-wall__cell:nth-child(n + 19):hover img {
        opacity: 1;
      }
      @media (max-width: 768px) {
        .logo-wall {
          padding: 32px 20px 36px;
        }
        .logo-wall__grid {
          grid-template-columns: repeat(3, 1fr);
          gap: 0 4px;
        }
        .logo-wall__cell {
          padding: 10px 8px;
        }
        .logo-wall__cell img {
          max-height: 22px;
          max-width: 80px;
        }
        .logo-wall__overline {
          font-size: 12px;
        }
        .logo-wall__cell:nth-child(n + 13) {
          display: none;
        }
      }

      /* Logo wall inside hero — seamless, white static logos */
      .logo-wall--hero {
        background: transparent;
        z-index: 2;
        position: relative;
        overflow: visible;
      }
      .logo-wall--hero::before {
        display: none;
      }
      .logo-wall--hero .logo-wall__overline {
        color: rgba(255, 255, 255, 0.7);
      }
      .logo-wall--hero .logo-wall__overline span {
        color: #ffffff;
      }
      .logo-wall--hero .logo-wall__cell img {
        filter: brightness(0) invert(1);
        opacity: 0.85;
        mix-blend-mode: normal;
        transition: none;
      }
      .logo-wall--hero .logo-wall__cell:hover img {
        filter: brightness(0) invert(1);
        opacity: 0.85;
        transform: none;
      }
      .logo-wall--hero .logo-wall__grid .logo-wall__cell:nth-child(n + 7) img {
        opacity: 0.7;
      }
      .logo-wall--hero .logo-wall__grid .logo-wall__cell:nth-child(n + 13) img {
        opacity: 0.55;
      }
      .logo-wall--hero .logo-wall__grid .logo-wall__cell:nth-child(n + 19) img {
        opacity: 0.4;
      }
      .logo-wall--hero .logo-wall__grid .logo-wall__cell:nth-child(n + 25) img {
        opacity: 0.28;
      }
      .logo-wall--hero .logo-wall__grid .logo-wall__cell:nth-child(n + 31) img {
        opacity: 0.2;
      }

      /* ── SECTION DIVIDER ── */
      .section-divider {
        border: none;
        border-top: 1px solid var(--color-border-subtle);
        margin: 0;
      }

      /* ── FOOD PHOTOGRAPHY LAYER ── */

      /* Hero: pure black 3-stop gradient (Puff'n'Stuff benchmark) */
      .hero--food-bg {
        background-size: cover;
        background-position: center 30%;
        background-repeat: no-repeat;
      }
      .hero--food-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to bottom,
          var(--food-overlay-hero-top) 0%,
          var(--food-overlay-mid) 20%,
          var(--food-overlay-mid) calc(100% - var(--food-overlay-edge-width)),
          var(--food-overlay-edge) 100%
        );
        z-index: 1;
      }

      /* Food sections: food photo as background + warm dark overlay + light text */
      .food-bg {
        position: relative;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        color: var(--color-text-dark-primary);
      }
      .food-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to bottom,
          var(--food-overlay-edge) 0%,
          var(--food-overlay-mid) var(--food-overlay-edge-width),
          var(--food-overlay-mid) calc(100% - var(--food-overlay-edge-width)),
          var(--food-overlay-edge) 100%
        );
        z-index: 0;
        pointer-events: none;
      }

      /* Light text overrides — pure #fff headings, rgba white body (no text-shadow per benchmark) */
      .food-bg .h2 {
        color: #ffffff;
      }
      .food-bg .h3 {
        color: #ffffff;
      }
      .food-bg .body-lg {
        color: rgba(255, 255, 255, 0.9);
      }
      .food-bg .body-md {
        color: rgba(255, 255, 255, 0.85);
      }
      .food-bg .body-sm {
        color: rgba(255, 255, 255, 0.8);
      }
      .food-bg .overline {
        color: var(--lime-400);
      }
      .food-bg .overline::before {
        background: linear-gradient(
          90deg,
          var(--lime-400),
          rgba(156, 204, 101, 0.3)
        );
      }
      .food-bg .mono {
        color: #ffffff;
      }
      .food-bg .label {
        color: rgba(255, 255, 255, 0.75);
      }

      /* Cards within food sections: reset to dark text on white background */
      .food-bg 
      /* ── Section Rise: light section lifts over preceding dark section ── */
      .section-rise {
        position: relative;
        z-index: 2;
        margin-top: -52px;
        border-radius: 28px 28px 0 0;
        box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.08);
        overflow: hidden;
      }
      .section-rise.surface-warm::before {
        border-radius: 28px 28px 0 0;
      }
      @media (max-width: 768px) {
        .section-rise {
          margin-top: -36px;
          border-radius: 20px 20px 0 0;
        }
        .section-rise.surface-warm::before {
          border-radius: 20px 20px 0 0;
        }
      }

      .surface-raised {
        color: var(--color-text-primary);
      }
      .food-bg .surface-raised .h2 {
        color: var(--color-text-display);
      }
      .food-bg .surface-raised .h3 {
        color: var(--color-text-primary);
      }
      .food-bg .surface-raised .body-lg {
        color: var(--color-text-secondary);
      }
      .food-bg .surface-raised .body-md {
        color: var(--color-text-secondary);
      }
      .food-bg .surface-raised .body-sm {
        color: var(--color-text-secondary);
      }
      .food-bg .surface-raised .overline {
        color: var(--color-text-overline);
      }
      .food-bg .surface-raised .overline::before {
        background: linear-gradient(
          90deg,
          var(--lime-500),
          rgba(139, 195, 74, 0.3)
        );
      }
      .food-bg .surface-raised .mono {
        color: var(--color-text-primary);
      }

      .food-bg .surface-raised .label {
        color: var(--color-text-primary);
      }

      /* Process steps on food bg: dark backing */
      .food-bg .process-step {
        background: rgba(0, 0, 0, 0.45);
        border-radius: var(--radius-lg);
        padding: var(--space-xs);
      }
      .food-bg .process-step__number {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.2);
        color: var(--lime-300);
      }
      .food-bg .process-step:not(:last-child)::after {
        background: rgba(255, 255, 255, 0.2);
      }

      /* FAQ on food bg: dark backing */
      .food-bg .faq-item {
        border-color: rgba(255, 255, 255, 0.12);
        background: rgba(0, 0, 0, 0.4);
        padding: 0 var(--space-xs);
      }
      .food-bg .faq-item:first-child {
        border-top-color: rgba(255, 255, 255, 0.12);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      }
      .food-bg .faq-item:last-child {
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
      }
      .food-bg .faq-question {
        color: #ffffff;
      }
      .food-bg .faq-question::after {
        color: rgba(255, 255, 255, 0.5);
      }

      /* Addons table on food bg — sits inside .surface-raised white card,
         so text must be dark. Same fix as pricing table. */
      .food-bg .addons-table th {
        color: #1a1a1a;
        border-bottom-color: rgba(0, 0, 0, 0.1);
      }
      .food-bg .addons-table td {
        color: #1a1a1a;
        border-bottom-color: rgba(0, 0, 0, 0.06);
      }
      .food-bg .addons-table td:first-child {
        color: #1a1a1a;
      }
      .food-bg .addons-table .mono {
        color: #1a1a1a;
      }

      /* Pricing table on food bg — table sits inside a .surface-raised white
         card. Force ALL text dark so nothing is white-on-white invisible.
         Uses #1a1a1a directly (not var chain) to guarantee visibility. */
      .food-bg .pricing-table .mono {
        color: #1a1a1a;
      }
      .food-bg .pricing-table thead {
        background: var(--forest-50);
      }
      .food-bg .pricing-table th {
        color: #1a1a1a;
      }
      .food-bg .pricing-table td {
        color: #1a1a1a;
      }

      /* Links on food bg */
      .food-bg
        a:not(.service-card):not(.cuisine-card):not(.btn):not(
          .menu-preview__card
        ) {
        color: var(--lime-300);
      }

      /* Content z-index above overlay */
      .food-bg .container-default,
      .food-bg .container-narrow,
      .food-bg .container-wide {
        position: relative;
        z-index: 2;
      }

      .cta-band--food-bg {
        position: relative;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      /* CTA band → footer dissolve. 5-stop seam-safe gradient — see
         system.css for the token-level doc on why each stop exists. */
      .cta-band--food-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to bottom,
          var(--food-overlay-edge) 0%,
          var(--food-overlay-cta-mid) var(--food-overlay-edge-width),
          var(--food-overlay-cta-mid) 50%,
          var(--food-overlay-seam-tint) 78%,
          var(--color-surface-forest) 100%
        );
        z-index: 1;
        pointer-events: none;
      }
      .cta-band--food-bg > * {
        position: relative;
        z-index: 2;
      }

    

/* ═══════════════════════════════════════════════════════════════════════════
   SHEFFY — SITE NAV + FOOTER STYLES
   Site-wide header navigation and footer. All values reference system.css tokens.

   Components:
   1. Fixed Header (transparent scrim → near-solid dark forest on scroll)
   2. Nav Links (opacity hover — cream both states, lime-400 on hover)
   3. Mega-menu Panels (narrow single-column dark-on-dark)
   4. CTA Button (outlined lime with status dot)
   5. Hamburger Icon (3-line → X, CSS only)
   6. Mobile Full-Screen Overlay (city-first filtering)
   7. Footer (statement scale: giant wordmark → contact card → 5-col grid → trust strip → legal bar)

   v2.1 (2026-04-12) — full sync from mockup. Removes dual-state CTA, logo glyph,
   2-col mega-menu, body.has-nav, and scroll-direction hide. Adds dissolve edge,
   scrim gradient, outlined CTA, single-column mega-menu with hover arrow.
   See DESIGN-TOKEN-SPEC.md §17.
   ═══════════════════════════════════════════════════════════════════════════ */

/* All header / mega-menu / footer tokens live in system.css under :root.
   This file consumes them only — no local :root overrides. */

/* ───────────────────────────────────────────────────────────────────────────
   1. FIXED HEADER — Dual state (scrim top → dark forest frost on scroll)
   ─────────────────────────────────────────────────────────────────────────── */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--header-z);
  height: var(--header-height-top);
  transition:
    background var(--duration-fast) var(--ease-hover),
    height var(--duration-fast) var(--ease-hover),
    box-shadow var(--duration-fast) var(--ease-hover),
    border-color var(--duration-fast) var(--ease-hover);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--footer-max-width);
  margin: 0 auto;
  padding: 0 var(--side-padding);
}

/* State: scrim gradient over dark hero — defense against bright hero content.
   The backdrop-filter blur is invisible over the dark hero image (blurring
   dark = still dark) but makes any hero TEXT that scrolls behind the header
   illegible, preventing the "muddled nav links" problem in the first fold. */
.site-header--top {
  background: #eee9df;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 8px 30px -4px rgba(30, 43, 30, 0.18), 0 2px 6px rgba(30, 43, 30, 0.10);
  border-bottom: none;
}

/* State: scrolled — same light surface as --top (locked design) */
.site-header--scrolled {
  background: #eee9df;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 8px 30px -4px rgba(30, 43, 30, 0.18), 0 2px 6px rgba(30, 43, 30, 0.10);
  border-bottom: none;
}

/* Dissolve edge — 8px gradient below header that reads as "frost thinning
   into the page". Only visible in scrolled state. Same vocabulary as the
   food-layer dissolution pattern used elsewhere on the page. */
.site-header::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--header-dissolve-height);
  background: linear-gradient(
    to bottom,
    var(--header-dissolve-color),
    transparent
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-hover);
}

.site-header--scrolled::after {
  opacity: 1;
}

/* NO body.has-nav padding — hero fills from y=0 and extends behind the fixed
   header. Hero's own padding-top handles content breathing room. */

/* ───────────────────────────────────────────────────────────────────────────
   LEAD — Logo + desktop city pill (leading edge of the header)
   ─────────────────────────────────────────────────────────────────────────── */

.nav__lead {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   DESKTOP CITY PILL — tap/click-to-swap city
   Small pill next to the logo. Click opens a narrow vertical dropdown
   listing Gurgaon / Delhi / Noida. Selecting a city calls switchCity()
   which rewrites the URL prefix. Hidden below 768px — mobile uses the
   hamburger overlay's city picker.
   ─────────────────────────────────────────────────────────────────────────── */

.nav__city-wrap {
  position: relative;
}

.nav__city {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4xs);
  height: var(--nav-city-height);
  min-height: 44px;
  padding: 0 var(--nav-city-padding-x);
  font-family: var(--font-heading);
  font-size: var(--header-link-size);
  font-weight: var(--header-link-weight);
  letter-spacing: var(--header-link-tracking);
  color: #2b3a2b;
  background: var(--nav-city-bg);
  border: 1px solid rgba(30, 43, 30, 0.15);
  border-radius: var(--nav-city-radius);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-hover),
    border-color var(--duration-fast) var(--ease-hover),
    color var(--duration-fast) var(--ease-hover);
}

.nav__city:hover,
.nav__city[aria-expanded='true'] {
  background: rgba(30, 43, 30, 0.04);
  border-color: rgba(30, 43, 30, 0.25);
}

.nav__city-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: #638535;
}

.nav__city-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.nav__city-label {
  line-height: 1;
}

.nav__city .nav__chevron svg {
  width: 9px;
  height: 9px;
  fill: currentColor;
  opacity: 0.7;
}

.nav__city[aria-expanded='true'] .nav__chevron {
  transform: rotate(180deg);
}

/* Narrow left-aligned dropdown under the pill */
.nav__city-dropdown {
  position: absolute;
  top: calc(100% + var(--space-3xs));
  left: 0;
  width: var(--nav-city-dropdown-width);
  background: var(--nav-city-dropdown-bg);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--nav-city-dropdown-border);
  border-radius: var(--megamenu-radius);
  box-shadow: var(--nav-city-dropdown-shadow);
  padding: var(--space-4xs);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition:
    opacity var(--megamenu-open-duration) var(--ease-arrive),
    transform var(--megamenu-open-duration) var(--ease-arrive),
    visibility var(--megamenu-open-duration);
}

.nav__city-dropdown--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__city-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--header-link-size);
  color: var(--color-text-dark-primary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition:
    background var(--duration-fast) var(--ease-hover),
    color var(--duration-fast) var(--ease-hover);
}

.nav__city-option:hover {
  background: rgba(139, 195, 74, 0.08);
  color: var(--lime-400);
}

.nav__city-option--active {
  color: var(--lime-400);
}

.nav__city-option--active::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--lime-500);
  box-shadow: 0 0 8px rgba(139, 195, 74, 0.55);
  flex-shrink: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   LOGO — Cream wordmark, no glyph (dark-on-dark commitment)
   ─────────────────────────────────────────────────────────────────────────── */

.nav__logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--header-logo-size);
  font-weight: 700;
  letter-spacing: var(--header-logo-tracking);
  text-decoration: none;
  flex-shrink: 0;
  color: #2b3a2b;
}

.nav__logo-img {
  height: 34px;
  width: auto;
  filter: none;
}

.nav__logo:hover .nav__logo-img {
  opacity: 1;
}

/* ───────────────────────────────────────────────────────────────────────────
   2. NAV LINKS — Cream both states, lime-400 on hover
   ─────────────────────────────────────────────────────────────────────────── */

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--header-link-gap);
  list-style: none;
}

.nav__item {
  position: relative;
}

.nav__link {
  font-family: var(--font-heading);
  font-size: var(--header-link-size);
  font-weight: var(--header-link-weight);
  letter-spacing: var(--header-link-tracking);
  text-decoration: none;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4xs);
  color: #2b3a2b;
  opacity: 0.92;
  transition:
    opacity var(--duration-fast) var(--ease-hover),
    color var(--duration-fast) var(--ease-hover);
  cursor: pointer;
  background: none;
  border: none;
}

.nav__link:hover,
.nav__link--active {
  opacity: 1;
  color: #638535;
}

/* ───────────────────────────────────────────────────────────────────────────
   DROPDOWN CHEVRON
   ─────────────────────────────────────────────────────────────────────────── */

.nav__chevron {
  display: inline-flex;
  align-items: center;
  transition: transform var(--duration-fast) var(--ease-hover);
}

.nav__chevron svg {
  width: 10px;
  height: 10px;
  display: block;
  fill: currentColor;
  opacity: 0.8;
}

.nav__link[aria-expanded='true'] .nav__chevron {
  transform: rotate(180deg);
}

/* ───────────────────────────────────────────────────────────────────────────
   3. MEGA-MENU — Narrow single-column dark-on-dark panel
   Upgraded from old 2-col grid. Single column of service items with Playfair
   name + Lexend caption + arrow on hover. Near-solid dark forest surface.
   ─────────────────────────────────────────────────────────────────────────── */

.nav__dropdown {
  position: absolute;
  /* Visual gap of 8px preserved. The gap is covered by an invisible ::before
     bridge that extends up from the panel into the <li>'s hit box, so the cursor
     path from button to panel never leaves descendants of <li> and mouseleave
     never fires mid-hover. */
  top: calc(100% + var(--space-3xs));
  left: 50%;
  transform: translateX(-50%) translateY(-14px);
  opacity: 0;
  visibility: hidden;
  width: var(--megamenu-width);
  background: var(--megamenu-bg);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--megamenu-border-color);
  border-radius: var(--megamenu-radius);
  box-shadow: var(--megamenu-shadow);
  padding: var(--megamenu-padding);
  z-index: 1001;
  transition:
    opacity var(--megamenu-open-duration) var(--ease-arrive),
    transform var(--megamenu-open-duration) var(--ease-arrive),
    visibility var(--megamenu-open-duration);
}

/* Hover bridge — invisible strip filling the 8px gap between nav item and
   the visible card. Child of .nav__dropdown (descendant of <li>), so the
   cursor never leaves <li>'s DOM subtree while crossing the gap. */
.nav__dropdown::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-3xs));
  left: 0;
  right: 0;
  height: var(--space-3xs);
  background: transparent;
}

.nav__dropdown--open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Single-column layout (no grid, no card column) */
.nav__dropdown-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xs);
}

.nav__dropdown-services {
  display: contents;
}

/* Service rows with hover arrow */
.nav__dropdown-item {
  position: relative;
  display: block;
  opacity: 0;
  transform: translateY(-10px);
  padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition:
    opacity var(--megamenu-item-duration) var(--ease-arrive),
    transform var(--megamenu-item-duration) var(--ease-arrive),
    background var(--duration-fast) var(--ease-hover);
}

.nav__dropdown-item::after {
  content: '\2192';
  position: absolute;
  right: var(--space-sm);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  color: var(--lime-400);
  opacity: 0;
  font-family: var(--font-heading);
  font-size: var(--text-body-md);
  transition:
    opacity var(--duration-fast) var(--ease-hover),
    transform var(--duration-fast) var(--ease-hover);
}

.nav__dropdown-item:hover {
  background: rgba(139, 195, 74, 0.08);
}

.nav__dropdown-item:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Staggered fade-in using megamenu tokens — covers up to 7 items */
.nav__dropdown--open .nav__dropdown-item:nth-child(1) {
  transition-delay: 0ms;
  opacity: 1;
  transform: translateY(0);
}
.nav__dropdown--open .nav__dropdown-item:nth-child(2) {
  transition-delay: var(--megamenu-item-stagger);
  opacity: 1;
  transform: translateY(0);
}
.nav__dropdown--open .nav__dropdown-item:nth-child(3) {
  transition-delay: calc(var(--megamenu-item-stagger) * 2);
  opacity: 1;
  transform: translateY(0);
}
.nav__dropdown--open .nav__dropdown-item:nth-child(4) {
  transition-delay: calc(var(--megamenu-item-stagger) * 3);
  opacity: 1;
  transform: translateY(0);
}
.nav__dropdown--open .nav__dropdown-item:nth-child(5) {
  transition-delay: calc(var(--megamenu-item-stagger) * 4);
  opacity: 1;
  transform: translateY(0);
}
.nav__dropdown--open .nav__dropdown-item:nth-child(6) {
  transition-delay: calc(var(--megamenu-item-stagger) * 5);
  opacity: 1;
  transform: translateY(0);
}
.nav__dropdown--open .nav__dropdown-item:nth-child(7) {
  transition-delay: calc(var(--megamenu-item-stagger) * 6);
  opacity: 1;
  transform: translateY(0);
}

/* Two-column layout for Parties (7 items) */
.nav__dropdown--two-col {
  width: var(--megamenu-width-wide);
}

.nav__dropdown--two-col .nav__dropdown-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xs);
}

/* Section labels inside Browse By dropdown ("By Style", "By Diet") */
.nav__dropdown-section-label {
  font-family: var(--font-heading);
  font-size: var(--text-overline);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dark-overline);
  padding: var(--space-xs) var(--space-sm) var(--space-4xs);
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity var(--megamenu-item-duration) var(--ease-arrive),
    transform var(--megamenu-item-duration) var(--ease-arrive);
}

/* Separator line before second+ section labels (lime-tinted per spec) */
.nav__dropdown-section-label ~ .nav__dropdown-section-label {
  border-top: 1px solid var(--megamenu-section-divider);
  margin-top: var(--space-3xs);
  padding-top: var(--space-xs);
}

.nav__dropdown--open .nav__dropdown-section-label {
  opacity: 1;
  transform: translateY(0);
}

.nav__service-name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-text-dark-primary);
  margin-bottom: 2px;
  transition: color var(--duration-fast) var(--ease-hover);
}

.nav__dropdown-item:hover .nav__service-name {
  color: var(--lime-400);
}

.nav__service-caption {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-overline);
  color: var(--color-text-dark-secondary);
  line-height: 1.4;
}

/* ───────────────────────────────────────────────────────────────────────────
   4. CTA BUTTON — Outlined lime with status dot
   Transparent bg, lime border at 45%, lime-400 text, small lime status dot
   before the label. On hover the interior fills with a lime tint and the
   border firms up to solid lime-500. Same radius-sm shape family.
   ─────────────────────────────────────────────────────────────────────────── */

.nav__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  font-family: var(--font-heading);
  font-size: var(--header-link-size);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  height: var(--header-cta-height);
  padding: 0 var(--header-cta-padding-x);
  border: 1px solid #2b3a2b;
  border-radius: var(--header-cta-radius);
  background: #2b3a2b;
  color: #FFFCF8;
  text-shadow: none;
  transition:
    background var(--duration-fast) var(--ease-hover),
    border-color var(--duration-fast) var(--ease-hover),
    color var(--duration-fast) var(--ease-hover),
    box-shadow var(--duration-fast) var(--ease-hover),
    transform var(--duration-instant) var(--ease-press);
}

/* Status dot before CTA label */
.nav__cta::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--lime-500);
  box-shadow: 0 0 8px rgba(139, 195, 74, 0.55);
  flex-shrink: 0;
}

.nav__cta:hover {
  background: #1e2b1e;
  border-color: #1e2b1e;
  color: #FFFCF8;
  box-shadow: 0 2px 8px rgba(30, 43, 30, 0.25);
}

.nav__cta:active {
  transform: scale(0.97);
  transition-duration: var(--duration-instant);
}

/* ───────────────────────────────────────────────────────────────────────────
   5. HAMBURGER (3-line → X) — CSS only
   ─────────────────────────────────────────────────────────────────────────── */

.nav__hamburger {
  display: none;
  width: 28px;
  height: 20px;
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  z-index: 1002;
}

.nav__hamburger span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  border-radius: 1px;
  left: 0;
  background: #2b3a2b;
  transition:
    transform var(--duration-fast) var(--ease-hover),
    opacity var(--duration-fast) var(--ease-hover),
    top var(--duration-fast) var(--ease-hover);
}

.nav__hamburger span:nth-child(1) {
  top: 0;
}
.nav__hamburger span:nth-child(2) {
  top: 9px;
}
.nav__hamburger span:nth-child(3) {
  top: 18px;
}

/* X state */
.nav__hamburger--open span:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}

.nav__hamburger--open span:nth-child(2) {
  opacity: 0;
}

.nav__hamburger--open span:nth-child(3) {
  top: 9px;
  transform: rotate(-45deg);
}

/* Force light when overlay open */
.nav__hamburger--open span {
  background: var(--color-text-dark-primary) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   6. MOBILE FULL-SCREEN OVERLAY
   ─────────────────────────────────────────────────────────────────────────── */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--color-surface-forest);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-normal) var(--ease-arrive),
    visibility var(--duration-normal);
  overflow-y: auto;
  padding: calc(var(--header-height-top) + var(--space-sm)) var(--side-padding)
    var(--space-lg);
}

.mobile-nav--open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav__city-selector {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.mobile-nav__city-icon {
  font-size: 20px;
}

.mobile-nav__city-btn {
  font-family: var(--font-heading);
  font-size: var(--text-heading-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-dark-primary);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 0;
}

.mobile-nav__city-btn .nav__chevron svg {
  fill: var(--color-text-dark-primary);
  opacity: 1;
}

.mobile-nav__city-options {
  display: none;
  flex-direction: column;
  gap: var(--space-4xs);
  margin-top: var(--space-3xs);
  margin-left: calc(20px + var(--space-xs));
}

.mobile-nav__city-options--open {
  display: flex;
}

.mobile-nav__city-option {
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text-dark-secondary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: var(--space-4xs) 0;
  transition: color var(--duration-fast) var(--ease-hover);
}

.mobile-nav__city-option:hover,
.mobile-nav__city-option--active {
  color: var(--color-text-dark-primary);
}

.mobile-nav__section-label {
  font-family: var(--font-heading);
  font-size: var(--text-overline);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dark-overline);
  margin-bottom: var(--space-3xs);
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-nav__section-label::before {
  content: '';
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--lime-500), rgba(139, 195, 74, 0.3));
  border-radius: 1px;
  flex-shrink: 0;
}

.mobile-nav__group {
  margin-bottom: var(--space-sm);
}

.mobile-nav__link {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-heading-md);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  color: var(--color-text-dark-primary);
  text-decoration: none;
  padding: var(--space-4xs) 0;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-normal) var(--ease-arrive),
    transform var(--duration-normal) var(--ease-arrive);
}

/* Reveal links when overlay opens. :nth-of-type targets <a> elements only
   (section-label div is child 1, so :nth-child would miscount). */
.mobile-nav--open .mobile-nav__link {
  opacity: 1;
  transform: translateY(0);
}
.mobile-nav--open .mobile-nav__link:nth-of-type(1) {
  transition-delay: 100ms;
}
.mobile-nav--open .mobile-nav__link:nth-of-type(2) {
  transition-delay: 180ms;
}
.mobile-nav--open .mobile-nav__link:nth-of-type(3) {
  transition-delay: 260ms;
}
.mobile-nav--open .mobile-nav__link:nth-of-type(4) {
  transition-delay: 340ms;
}

.mobile-nav__simple-links {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.mobile-nav__simple-link {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-heading-md);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  color: var(--color-text-dark-primary);
  text-decoration: none;
  padding: var(--space-3xs) 0;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-normal) var(--ease-arrive),
    transform var(--duration-normal) var(--ease-arrive);
}

.mobile-nav--open .mobile-nav__simple-link {
  opacity: 1;
  transform: translateY(0);
}
.mobile-nav--open .mobile-nav__simple-link:nth-of-type(1) {
  transition-delay: 450ms;
}
.mobile-nav--open .mobile-nav__simple-link:nth-of-type(2) {
  transition-delay: 530ms;
}

.mobile-nav__cta {
  margin-top: var(--space-md);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-normal) var(--ease-arrive),
    transform var(--duration-normal) var(--ease-arrive);
}

.mobile-nav--open .mobile-nav__cta {
  transition-delay: 600ms;
  opacity: 1;
  transform: translateY(0);
}

.mobile-nav__cta .cta-primary {
  width: 100%;
  justify-content: center;
}

/* ───────────────────────────────────────────────────────────────────────────
   7. FOOTER — Statement scale (6-section stack)
   (1) Giant wordmark  (2) Contact card  (3) 5-col nav grid
   (4) Trust strip     (5) Copyright + socials
   ─────────────────────────────────────────────────────────────────────────── */

.site-footer {
  position: relative;
  background: var(--footer-bg);
  color: var(--color-text-dark-primary);
  padding-top: var(--footer-pad-top);
  padding-bottom: var(--footer-pad-bottom);
  overflow: hidden;
}

.site-footer__container {
  position: relative;
  z-index: 2;
  max-width: var(--footer-max-width);
  margin: 0 auto;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
  display: flex;
  flex-direction: column;
  gap: var(--footer-gap-major);
}

/* (1) Giant wordmark block */
.site-footer__wordmark {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.site-footer__wordmark-text {
  font-family: var(--font-display);
  font-size: var(--footer-wordmark-size);
  font-weight: var(--footer-wordmark-weight);
  line-height: var(--footer-wordmark-line-height);
  letter-spacing: var(--footer-wordmark-tracking);
  color: var(--footer-wordmark-color);
  margin: 0;
}

.site-footer__tagline {
  font-family: var(--font-heading);
  font-size: var(--footer-tagline-size);
  font-weight: var(--weight-medium);
  color: var(--footer-tagline-color);
  max-width: 52ch;
  line-height: 1.5;
}

.site-footer__tagline strong {
  color: var(--footer-tagline-accent);
  font-weight: var(--weight-medium);
}

/* (2) Contact card — 3 CTAs (Call / WhatsApp / Email) */
.site-footer__contact-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--footer-contact-gap);
}

.site-footer__contact-btn {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition:
    background var(--duration-fast) var(--ease-hover),
    transform var(--duration-fast) var(--ease-hover);
}

.site-footer__contact-btn:hover {
  background: rgba(255, 255, 255, 0.03);
  transform: translateY(-2px);
}

.site-footer__contact-icon {
  width: var(--footer-contact-icon-size);
  height: var(--footer-contact-icon-size);
  color: var(--footer-contact-icon-color);
  flex-shrink: 0;
}

.site-footer__contact-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xs);
}

.site-footer__contact-label {
  font-family: var(--font-heading);
  font-size: var(--text-overline);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime-500);
}

.site-footer__contact-value {
  font-family: var(--font-heading);
  font-size: var(--text-body-md);
  font-weight: var(--weight-medium);
  color: var(--color-text-dark-primary);
}

/* (3) Nav grid — 5 columns */
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--footer-gap-minor);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.site-footer__heading {
  font-family: var(--font-heading);
  font-size: var(--footer-heading-size);
  font-weight: var(--footer-heading-weight);
  letter-spacing: var(--footer-heading-tracking);
  text-transform: uppercase;
  color: var(--footer-heading-color);
  margin: 0;
}

.site-footer__link-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-family: var(--font-heading);
  font-size: var(--footer-link-size);
  font-weight: var(--footer-link-weight);
  color: var(--footer-link-color);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-hover);
}

.site-footer__link:hover {
  color: var(--footer-link-color-hover);
}

/* (4) Footer bottom stack — trust strip → copyright → socials */
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding-top: var(--space-md);
}

.site-footer__trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--footer-trust-gap);
}

.site-footer__trust-item {
  font-family: var(--footer-trust-font);
  font-size: var(--footer-trust-size);
  font-weight: var(--weight-regular);
  color: var(--footer-trust-color);
  letter-spacing: 0.02em;
}

.site-footer__trust-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--footer-trust-accent);
  flex-shrink: 0;
}

/* (5) Copyright + socials */
.site-footer__copyright {
  font-family: var(--font-heading);
  font-size: var(--footer-legal-size);
  color: var(--color-text-dark-secondary);
  text-align: center;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--footer-legal-social-icon-size) + 12px);
  height: calc(var(--footer-legal-social-icon-size) + 12px);
  color: var(--color-text-dark-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-hover);
}

.site-footer__social-link svg {
  width: var(--footer-legal-social-icon-size);
  height: var(--footer-legal-social-icon-size);
}

.site-footer__social-link:hover {
  color: var(--lime-400);
}

/* ───────────────────────────────────────────────────────────────────────────
   8. ACTION BAR — Sticky mobile Call + WhatsApp (§18)
   Two-button strip fixed to the bottom of the viewport. Hidden on desktop.
   Same dark-forest surface as the scrolled header. Icons in lime, labels in
   cream. 50/50 split with a thin vertical divider.
   ─────────────────────────────────────────────────────────────────────────── */

.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--action-bar-z);
  display: flex;
  align-items: stretch;
  height: var(--action-bar-height);
  background: var(--action-bar-bg);
  border-top: var(--action-bar-border-top);
  box-shadow: var(--action-bar-shadow);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.action-bar__action {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4xs);
  text-decoration: none;
  transition: transform var(--duration-instant) var(--ease-press);
}

.action-bar__action:active {
  transform: scale(0.96);
}

/* Vertical divider between the two actions */
.action-bar__action + .action-bar__action {
  border-left: 1px solid rgba(237, 233, 224, 0.1);
}

.action-bar__icon {
  width: var(--action-bar-icon-size);
  height: var(--action-bar-icon-size);
  color: var(--action-bar-icon-color);
  flex-shrink: 0;
}

.action-bar__label {
  font-family: var(--action-bar-label-font);
  font-size: var(--action-bar-label-size);
  font-weight: var(--action-bar-label-weight);
  letter-spacing: var(--action-bar-label-tracking);
  color: var(--action-bar-label-color);
  line-height: 1;
}

/* ───────────────────────────────────────────────────────────────────────────
   9. DESKTOP HEADER CONTACT ICONS — Call + WhatsApp (§18.3)
   Icon-only links next to the CTA button. Lime-400 default, lime-300 hover.
   Hidden on mobile (the action bar handles it).
   ─────────────────────────────────────────────────────────────────────────── */

.nav__contact-icons {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
}

.nav__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  color: #638535;
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-hover),
    background var(--duration-fast) var(--ease-hover),
    box-shadow var(--duration-fast) var(--ease-hover);
}

.nav__contact-icon svg {
  width: 18px;
  height: 18px;
}

.nav__contact-icon:hover {
  color: #2b3a2b;
  background: rgba(30, 43, 30, 0.06);
  box-shadow: none;
}

.nav__contact-icon:active {
  transform: scale(0.95);
  transition-duration: var(--duration-instant);
}

/* ───────────────────────────────────────────────────────────────────────────
   PAGE-LEVEL RULES SHARED WITH HEADER/FOOTER PROPAGATION
   These rules ship alongside the nav system because the migration script
   inlines this whole file into every page's <style> block.
   ─────────────────────────────────────────────────────────────────────────── */

/* Logo wall embedded in hero */
.logo-wall--hero {
  padding: var(--space-lg) 0 0;
}

/* CTA band → footer dissolve lives in system.css now, as the tokenized
   5-stop `.cta-band--food-bg::after` rule. */

/* ───────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .site-footer__contact-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .nav__hamburger {
    display: block;
  }

  .nav__menu,
  .nav__cta--desktop,
  .nav__city-wrap,
  .nav__contact-icons {
    display: none;
  }

  body {
    padding-bottom: calc(var(--action-bar-height) + env(safe-area-inset-bottom, 0px));
  }

  .site-header {
    height: var(--header-height-scrolled);
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .site-footer__trust-strip {
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .site-footer__trust-dot {
    display: none;
  }
}

@media (min-width: 769px) {
  .mobile-nav {
    display: none !important;
  }

  .nav__hamburger {
    display: none !important;
  }

  .action-bar {
    display: none !important;
  }
}



/* ── QUOTE MODAL ── */
.quote-modal {
  border: none;
  background: transparent;
  padding: 0;
  max-width: 440px;
  width: calc(100% - 32px);
  overflow: visible;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.quote-modal::backdrop {
  background: rgba(30, 43, 30, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.quote-modal[open] {
  animation: quote-modal-in 0.22s ease-out;
}
@keyframes quote-modal-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.quote-modal__card {
  background: var(--color-surface-forest);
  border-radius: var(--radius-xl);
  padding: var(--space-md) var(--space-md) var(--space-sm);
  position: relative;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.quote-modal__close {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  color: var(--color-text-dark-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-hover);
}
.quote-modal__close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-text-dark-primary);
}
.quote-modal__close svg { width: 18px; height: 18px; }
.quote-modal__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--color-text-dark-primary);
  margin: 0 0 var(--space-4xs);
  padding-right: var(--space-md);
}
.quote-modal__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-text-dark-secondary);
  margin: 0 0 var(--space-sm);
}
.quote-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.quote-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xs);
}
.quote-form__label {
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--color-text-dark-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.quote-form__input {
  height: 52px;
  padding: 0 var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--color-text-primary);
  background: var(--color-surface-raised);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-hover),
              box-shadow var(--duration-fast) var(--ease-hover);
}
.quote-form__input::placeholder { color: var(--stone-500); }
.quote-form__input:focus {
  border-color: var(--lime-500);
  box-shadow: 0 0 0 3px rgba(139, 195, 74, 0.18);
}
.quote-form__input--error { border-color: var(--color-error); }
.quote-form__input--error:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12);
}
.quote-form__error {
  font-size: var(--text-caption);
  color: #ef9a9a;
  margin-top: 2px;
}
.quote-form__submit { width: 100%; margin-top: var(--space-3xs); }
.quote-form__fine {
  font-size: var(--text-caption);
  color: var(--color-text-dark-secondary);
  text-align: center;
  margin: var(--space-3xs) 0 0;
  opacity: 0.7;
}
.quote-form__success {
  text-align: center;
  padding: var(--space-sm) 0 var(--space-xs);
}
.quote-form__success svg {
  width: 56px;
  height: 56px;
  color: var(--lime-500);
  margin-bottom: var(--space-xs);
}
.quote-form__success-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--color-text-dark-primary);
  margin: 0 0 var(--space-4xs);
}
.quote-form__success-body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--color-text-dark-secondary);
  margin: 0;
}

.skip-link{position:fixed;top:-100%;left:16px;z-index:9999;padding:8px 16px;background:#1a3a2a;color:#c8ff00;border-radius:0 0 6px 6px;font-size:14px;font-weight:600;text-decoration:none;transition:top .2s}.skip-link:focus{top:0}
.ig-facade{position:relative;width:100%;height:100%;cursor:pointer;overflow:hidden;background:#1a1a1a;border-radius:8px}.ig-facade img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .2s}.ig-facade__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:2;transition:background .2s,transform .2s}.ig-facade__play::after{content:'';display:block;width:0;height:0;border-style:solid;border-width:12px 0 12px 22px;border-color:transparent transparent transparent #fff;margin-left:3px}.ig-facade:hover .ig-facade__play{background:rgba(0,0,0,.6);transform:translate(-50%,-50%) scale(1.08)}.ig-facade__brand{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:8px;background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);display:flex;align-items:center;justify-content:center;z-index:2}.ig-facade__brand svg{width:16px;height:16px;fill:#fff}.ig-facade--loading img{filter:brightness(.6)}.ig-facade--loading .ig-facade__play::after{border:none;width:24px;height:24px;margin:0;border-radius:50%;border-top:3px solid #fff;border-right:3px solid transparent;animation:ig-spin .7s linear infinite}@keyframes ig-spin{to{transform:rotate(360deg)}}