body, html {
          background: #000000;
          margin: 0;
          font-family: "Georgia", serif;
        }

        /* MENU PILL POSITION */
        .menu-pill-wrapper {
          position: sticky;
          top: 24px;                 /* 👈 how far from top it sticks */
          z-index: 3000;
        
          width: 100%;
          margin-top: -100px;
          display: flex;
          justify-content: center;       /* 👈 pulls it upward into hero */
          padding-bottom: 80px;     /* 👈 preserves layout flow */
          width: 100%;
          display: flex;
          justify-content: center;
        }
        
        .menu-pill-wrapper {
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }



        /* MENU BUTTON */
        .menu-btn {
          background: #fff;
              color: #000;
              border-radius: 30px;
              padding: 10px 25px;
              border: none;
              font-weight: 500;
            }
            
            /* OVERLAY */
            .menu-overlay {
              position: fixed;
              height: 85vh;
              inset: 0;
              background: url("images/nav-container.png") center/cover no-repeat;
              display: flex;
              justify-content: center;
              align-items: center;
              opacity: 0;
              pointer-events: none;
              transition: opacity 0.35s ease;
              z-index: 3100;
            }

            .menu-overlay.active {
              opacity: 1;
              pointer-events: auto;
            }

            /* MENU PANEL */
            .menu-panel {
              width: 80%;
              height: 60vh;
              display: flex;
              flex-direction: column;
              gap: 22px;
            }

            :root {
              --line-color: rgba(0, 0, 0, 0.8);
              --line-thin: 1px;
              --extension: 12px; /* How far the corners cross */
              --intrude-length: 25px; /* How far the middle line pokes inside */
            }

            .nav-wrapper {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: 30px;
              padding: 50px;
            }

            .nav-row {
              display: flex;
              gap: 50px;
            }

            .menu-item-sketch {
              position: relative;
              padding: 15px 40px;
              background: rgba(255, 255, 255, 0.9);
              cursor: pointer;
              display: inline-block;
            }

            /* Vertical Lines (Left & Right) */
            .menu-item-sketch::before,
            .menu-item-sketch::after {
              content: "";
              position: absolute;
              top: calc(-1 * var(--extension));
              bottom: calc(-1 * var(--extension));
              width: var(--line-thin);
              background-color: var(--line-color);
            }
            .menu-item-sketch::before { left: 0; }
            .menu-item-sketch::after { right: 0; }

            /* Horizontal Lines (Top & Bottom) */
            .line-h::before,
            .line-h::after {
              content: "";
              position: absolute;
              left: calc(-1 * var(--extension));
              right: calc(-1 * var(--extension));
              height: var(--line-thin);
              background-color: var(--line-color);
            }
            .line-h::before { top: 0; }
            .line-h::after { bottom: 0; }

            .menu-item-sketch a {
              text-decoration: none;
              color: #1a1a1a;
              font-family: "Georgia", serif;
              font-size: 1.1rem;
              letter-spacing: 5px;
              text-transform: uppercase;
              position: relative;
              align-items: center;        /* vertical center */
              justify-content: center;    /* horizontal center */
              display: flex;              /* 🔑 required */
            }

            /* The Inward Intruding Line */
            .menu-item-sketch a::after {
              content: "";
              position: absolute;
              right: -40px; /* Aligns with the right vertical line */
              width: var(--intrude-length);
              height: var(--line-thin);
              background-color: var(--line-color);
              top: 50%;
              transform: translateY(-50%);
              z-index: 2;
            }

            /* === MOBILE STYLES === */
            @media (max-width: 768px) {
                .menu-overlay {
                  position: fixed;
                  height: 100vh;
                }

              .nav-row {
                flex-direction: column; /* Stacks the first 3 items */
                gap: 30px;
                width: 100%;
                align-items: center;
              }

              .nav-wrapper {
                gap: 30px; /* Maintains spacing for the "Locate Us" item */
              }

              .menu-item-sketch {
                width: 100%; /* Optional: makes boxes wider on mobile */
                max-width: 300px;
              }
            }

        /* CLOSE ITEM – SAME STYLE, SLIGHTLY BOLDER */
        .close-item {
          letter-spacing: 5px;
        }

        /* MOBILE */
        @media (max-width: 768px) {
          .menu-panel {
            width: 100%;
            height: 100vh;
          }

          .menu-item-sketch {
            font-size: 0.95rem;
            padding: 16px 18px;
          }
        }




        /* BASE */
        .menu-pill {
          background: #fff;
          display: flex;
          align-items: center;
          box-shadow: 0 10px 30px rgba(0,0,0,0.2);
          backdrop-filter: blur(10px);

          clip-path: polygon(
            8px 0,
            calc(100% - 8px) 0,
            100% 8px,
            100% calc(100% - 8px),
            calc(100% - 8px) 100%,
            8px 100%,
            0 calc(100% - 8px),
            0 8px
          );

          transform-origin: center center;
        }

        /* TEXT */
        .menu-item {
          padding: 7px 12px;
          font-weight: 300;
          font-size: 1rem;
          letter-spacing: 2px;
          color: #000;
        }
        .menu-item-pill {
          padding: 7px 12px;
          font-weight: 300;
          font-size: 1rem;
          letter-spacing: 2px;
          color: #000;
        }

        .menu-divider {
          width: 42px;
          height: 42px;
          font-size: 1.8rem;
          margin: 0 6px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        /* 📱 MOBILE */
        @media (max-width: 768px) {

          .menu-pill {
            transform: scale(0.99); /* ✅ scale inner, not wrapper */
            box-shadow: 0 6px 18px rgba(0,0,0,0.18);

            clip-path: polygon(
              6px 0,
              calc(100% - 6px) 0,
              100% 6px,
              100% calc(100% - 6px),
              calc(100% - 6px) 100%,
              6px 100%,
              0 calc(100% - 6px),
              0 6px
            );
          }

          .menu-item {
            padding: 6px 10px;
            font-size: 0.8rem;
            letter-spacing: 1.5px;
          }
          .menu-item-pill {
              padding: 6px 10px;
              font-size: 0.8rem;
              letter-spacing: 1.5px;
            }

          .menu-divider {
            width: 34px;
            height: 34px;
            font-size: 1.4rem;
            margin: 0 4px;
          }
        }

        .image-carousel {
          display: flex;
          gap: 19px;
          padding: 0px 12vw; /* Increased padding to allow for the "bow" height */
          overflow-x: scroll;
          cursor: grab;
          scroll-behavior: smooth;
          align-items: center; /* Crucial: keeps the 'pinch' centered */
          min-height: 500px;
        }

        .hero-tagline {
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          letter-spacing: 3px;
          font-weight: 300;
        }

        /* BRANDING SECTION */
        .brand-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 30px;
            margin-bottom: 50px; /* Space between brand and buttons */
        }

        .brand-text {
            font-family: "Helvetica", sans-serif;
            font-size: clamp(1.5rem, 6vw, 4.5rem);
            letter-spacing: 0.35em;
            font-weight: 400;
        }

        .brand-logo {
            width: clamp(100px, 12vw, 160px);
            height: auto;
        }

        /* NAVIGATION WRAPPER */
        .nav-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 30px;
        }

        /* Row of items on Desktop */
        .nav-row {
            display: flex;
            gap: 40px;
        }

        /* SKETCH ITEM STYLE (1px lines) */
        .menu-item-sketch {
            position: relative;
            padding: 15px 40px;
            min-width: 200px;
        }

        /* The Inward Intruding Line */
        .menu-item-sketch a::after {
            content: "";
            position: absolute;
            right: -40px; /* Aligns with right vertical border */
            width: 25px;   /* Pokes 25px inside the box */
            height: 1px;
            background-color: #000;
            top: 50%;
        }

        /* === MOBILE VIEW === */
        @media (max-width: 768px) {
            .brand-header {
                gap: 10px;
                margin-bottom: 30px;
            }

            .brand-text {
                letter-spacing: 0.1em;
            }

            /* Force nav items into one straight column */
            .nav-row {
                flex-direction: column;
                gap: 25px;
                width: 100%;
                align-items: center;
            }
        }
        /* Tablets & below */
        @media (max-width: 768px) {
          .hero-tagline {
            padding: 1%;
            font-size: 12px;
            letter-spacing: 2.5px;
          }

          h1 {
             font-size: clamp(32px, 6vw, 64px);
            padding: 1%;
            line-height: 1.1;
          }
        }

        /* Small phones */
        @media (max-width: 480px) {
          .hero-tagline {
            font-size: 11px;
            letter-spacing: 2px;
          }

          h1 {
            font-size: 34px;
            line-height: 1.15;
          }
        }

        .hero-copy {
          max-width: 880px;
          margin: 0 auto;
          text-align: center;
          color: #ffffff;

          background-image:
          url("images/background-section-2.png"); /* replace with your image */

          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
        }
        .hero-copy-2 {
          max-width: 800px;
          margin: 0 auto;
          text-align: center;
          color: #ffffff;
        }

        /* Top line */
        .hero-top {
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-size: 15px;
          letter-spacing: 1px;
          opacity: 0.9;
        }

        /* Middle statement (normal / brand font) */
        .hero-middle {
          font-family: inherit; /* uses site default */
          font-size: 26px;
          font-weight: 300 !important;
          line-height: 1.45;
          margin-bottom: 36px;
        }

        /* Bottom paragraph */
        .hero-bottom {
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-size: 20px;
          line-height: 1.7;
          opacity: 0.85;
        }

        @media (max-width: 768px) {
          .hero-copy{
            padding: 10%;
          }
          .hero-middle {
            font-size: 20px;
          }

          .hero-top,
          .hero-bottom {
            font-size: 13px;
          }
        }
        .bg-noodles-image {
          background-image: url("images/mina-noodles.png"); /* replace */
          background-size: cover;
          background-repeat: no-repeat;

          min-height: 220px; /* important so it’s visible */
        }

        @media (max-width: 768px) {
          .bg-noodles-image {
            min-height: 160px;
          }
        }

    .hero-copy-2 {
        padding-bottom: 100px; /* Space to allow the image to overlap without hitting text */
    }

    .intruder-container {
        display: flex;
        position: relative;
        justify-content: center;
        width: 100%;
    }

    .intruding-image {
        width: 100%; /* Adjust width as needed */
        height: auto;

        /* The Magic: Move up by 35% of the image's height */
        margin-top: -35%;

        /* Positioning */
        position: relative;
        z-index: 1; /* Sits behind the text div */

        /* Optional: Fading effect for a smooth "background" transition */
        mask-image: linear-gradient(to top, rgba(0,0,0,1) 70%, rgba(0,0,0,0));
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 70%, rgba(0,0,0,0));
    }
    .intruding-image-2 {
        width: 100%; /* Adjust width as needed */
        height: auto;
        object-fit: cover;
        /* Positioning */
        position: relative;
        z-index: 1; /* Sits behind the text div */
    }
       .intruder-footer {
            position: relative;
            width: 100%;
            min-height: 60vh; /* 👈 gives stable reference height */
        }



        @media (max-width: 768px) {
            .intruder-footer {
                min-height: 115vh; /* taller image on mobile */
            }

            .hours-card-container {
                bottom: 10%;                      /* stays in middle-lower zone */
                transform: translateX(-50%) scale(0.65);
            }
        }

       .footer-copyright {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 20px; /* space below the card */
            color: black;
            font-size: 0.85rem;
            letter-spacing: 0.08em;
            text-align: center;
            z-index: 2;
            white-space: nowrap;
        }
        @media (max-width: 768px) {
            .footer-copyright {
                font-size: 0.65rem;
                bottom: 8px;
                letter-spacing: 0.06em;
            }
        }

        .footer-copyright::before {
            content: "";
            display: block;
            width: 40px;
            height: 1px;
            background: rgba(255,255,255,0.4);
            margin: 0 auto 6px;
        }
        
        .icons {
          position: relative;
          z-index: 50;
        }
        
        .icons a {
          pointer-events: auto;
        }