PageSourceSearch

https://wolfandlamb.co.uk/virtual-kitchen/

html wolfandlamb.co.uk collected 2026-10-08 00:03:06 UTC 49,973 bytes, 1,346 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8" />
6  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7  <meta name="author" content="Wolf and Lamb" />
8
9  <!-- Stylesheets -->
10  <link rel="stylesheet" href="/css/main.css" />
11  <link rel="stylesheet" href="/css/header.css" />
12  <link rel="stylesheet" href="/css/hero.css" />
13  <link rel="stylesheet" href="/css/services.css" />
14  <link rel="stylesheet" href="/css/how-we-work.css" />
15  <link rel="stylesheet" href="/css/logo.css" />
16  <link rel="stylesheet" href="/css/client-carousel.css" />
17  <link rel="stylesheet" href="/css/carousel.css" />
18  <link rel="stylesheet" href="/css/footer.css" />
19  <link rel="stylesheet" href="/css/video-intro.css" />
20  <link rel="stylesheet" href="/css/virtual-kitchen.css">
21  <link rel="stylesheet" href="/css/banner-image.css">
22  <link rel="stylesheet" href="/css/virtual-banner.css">
23  <link rel="stylesheet" href="/css/scroll-gallery.css">
24  <link rel="stylesheet" href="/css/allergen-scan.css">
25  <link rel="stylesheet" href="/css/lunch-box-scroll.css">
26  <link rel="stylesheet" href="/css/breakfast-pots-spin.css">
27  <link rel="stylesheet" href="/css/dessert-pots-spin.css">
28  <link rel="stylesheet" href="/css/platters-banner.css">
29  <link rel="stylesheet" href="/css/sandwich-scroll.css">
30
31
32
33  <!-- Fonts -->
34  <link rel="preconnect" href="https://fonts.googleapis.com" />
35  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
36  <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet" />
37
38  <title>Wolf and Lamb - A Catering Co.</title>
39
40  <!-- Favicon -->
41  <link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png" />
42  <link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png" />
43  <link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png" />
44  <link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png" />
45  <link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png" />
46  <link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png" />
47  <link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png" />
48  <link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png" />
49  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png" />
50  <link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-icon-192x192.png" />
51  <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
52  <link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png" />
53  <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
54
55  <!-- HammerJS -->
56  
56<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
56
57</head>
58
59<body class="dark-page">
60
61  
62  <header>
63    
64 
65 
66
67<script>
68  (function() {
69    try {
70      const alerts = [{
71          id: 'aw-menu',
72          text: 'AW26 menu now live',
73          linkText: 'View menu',
74          linkHref: '/menu?category=seasonal-lunch'
75        },
76        {
77          id: 'last-minute',
78          text: 'Last-minute catering available - cut-off 11am the day before delivery',
79          linkText: 'Enquire',
80          linkHref: '/contact'
81        }
82      ];
83
84      const index = Number(sessionStorage.getItem('alertIndex') || 0);
85      const current = alerts[index % alerts.length];
86
87      // Store current alert so PHP/JS can read it
88      window.__GLOBAL_ALERT__ = current;
89
90      // If THIS alert was dismissed, hide it before paint
91      if (sessionStorage.getItem('alertDismissed:' + current.id) === '1') {
92        document.documentElement.classList.add('alert-dismissed');
93      }
94    } catch (e) {}
95  })();
96</script>
96
97
98
99<header class="site-header has-alert">
100
101      <div class="global-alert" id="global-alert" role="status">
102      <div class="container">
103        <span id="alert-text"></span>
104        <a id="alert-link"></a>
105
106        <button class="alert-close" aria-label="Close alert">&times;</button>
107      </div>
108    </div>
109
110  
111
112
113  <nav class="navbar" id="site-navbar">
114
115    <div class="container">
116      <a href="/" class="logo">
117        <img class="logo-svg" src="/img/SVG/wolf-lamb-logo-black.svg" alt="Wolf & Lamb Logo">
118      </a>
119
120      <div class="nav-links">
121    
122            <a class="scroll-link " href="/">bespoke</a>
123    
124            <a class="selected" href="/virtual-kitchen">virtual kitchen</a>
125         
126        <a class="" href="/menu">menu</a>
127    
128            <a class="" href="/on-location">on-location</a>
129    
130            <a class="" href="/inside">inside?</a>
131    
132            <a class="" href="/sustainability">sustainability</a>
133    
134            <a class="" href="/contact">contact</a>
135    </div>
136      <div class="nav-right">
137    
138    
139            <a href="/make-an-enquiry">
140            <button class="nav-button">
141                Make An Enquiry
142            </button>
143        </a>
144    
145    </div>
146    </div>
147
148    <div class="hamburger" id="hamburger-menu">
149      <div></div>
150      <div></div>
151      <div></div>
152    </div>
153  </nav>
154
155</header>
156
157
158
159<script>
160  (function() {
161    function isVisible(el) {
162      if (!el) return false;
163      const rect = el.getBoundingClientRect();
164      const style = getComputedStyle(el);
165      return rect.height > 0 && style.display !== 'none' && style.visibility !== 'hidden';
166    }
167
168    function setHeaderVars() {
169      const alertEl = document.getElementById('global-alert');
170      const navEl = document.getElementById('site-navbar');
171
172      const alertH = isVisible(alertEl) ? alertEl.getBoundingClientRect().height : 0;
173      const navH = navEl ? navEl.getBoundingClientRect().height : 0;
174
175      document.documentElement.style.setProperty('--global-alert-h', alertH + 'px');
176      document.documentElement.style.setProperty('--header-offset', (alertH + navH) + 'px');
177    }
178
179    // Run now + next frame
180    setHeaderVars();
181    requestAnimationFrame(setHeaderVars);
182
183    // Fonts/images can change heights
184    if (document.fonts && document.fonts.ready) {
185      document.fonts.ready.then(setHeaderVars);
186    }
187    window.addEventListener('load', setHeaderVars);
188    window.addEventListener('resize', setHeaderVars);
189
190    // If alert text wraps / changes, keep it accurate
191    const alertEl = document.getElementById('global-alert');
192    if (alertEl && 'ResizeObserver' in window) {
193      const ro = new ResizeObserver(setHeaderVars);
194      ro.observe(alertEl);
195    }
196  })();
197</script>
197
198
199
200
201
202
203<script>
204  function adjustNavLinksMargin() {
205    if (window.innerWidth < 800) {
206      const navRight = document.querySelector('.nav-right');
207      const navLinks = document.querySelector('.nav-links');
208
209      // Get the height of nav-right and apply it as margin-top to nav-links
210      if (navRight && navLinks) {
211        const height = navRight.offsetHeight;
212        navLinks.style.marginTop = height + 'px';
213        console.log("its happening")
214      }
215    } else {
216      // If the width is greater than 800px, reset the margin-top
217      const navLinks = document.querySelector('.nav-links');
218      if (navLinks) {
219        navLinks.style.marginTop = '0';
220      }
221    }
222  }
223  document.addEventListener('DOMContentLoaded', function() {
224
225
226
227    var hamburgerMenu = document.getElementById('hamburger-menu');
228    hamburgerMenu.addEventListener('click', function() {
229      var links = document.querySelector('.nav-links');
230      var rightLinks = document.querySelector('.nav-right');
231      var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
232
233      // Toggle '.active' class for .nav-links regardless of screen width
234      links.classList.toggle('active');
235
236      // Under 800px, also toggle '.active' for .nav-right
237      if (screenWidth < 800) {
238        rightLinks.classList.toggle('active');
239      }
240      adjustNavLinksMargin();
241
242    });
243
244
245
246    // Event listener for nav-links for smooth scrolling
247    document.querySelectorAll('.scroll-link').forEach(link => {
248      link.addEventListener('click', function(event) {
249        // Check if the href attribute of the clicked link starts with '#'
250        if (this.getAttribute('href').startsWith('#')) {
251          // Prevent the default link behavior
252          event.preventDefault();
253          // Retrieve the element corresponding to the ID
254          const targetId = this.getAttribute('href');
255          const targetElement = document.querySelector(targetId);
256          // Scroll to the target element
257          if (targetElement) {
258            targetElement.scrollIntoView({
259              behavior: 'smooth',
260              block: 'start'
261            });
262          }
263          // If the nav-links are displayed as a dropdown on mobile view, toggle 'active' class to close the dropdown
264          if (window.innerWidth < 800) {
265            var links = document.querySelector('.nav-links');
266            var rightLinks = document.querySelector('.nav-right');
267            links.classList.remove('active');
268            rightLinks.classList.remove('active');
269          }
270        }
271      });
272    });
273  });
274
275  window.addEventListener('resize', function() {
276    var links = document.querySelector('.nav-links');
277    var rightLinks = document.querySelector('.nav-right');
278    // Remove the 'active' class if it exists
279    if (links.classList.contains('active')) {
280      links.classList.remove('active');
281    }
282    if (rightLinks.classList.contains('active')) {
283      rightLinks.classList.remove('active');
284    }
285    adjustNavLinksMargin();
286  });
287
288  function debounce(func, wait, immediate) {
289    var timeout;
290    return function() {
291      var context = this,
292        args = arguments;
293      var later = function() {
294        timeout = null;
295        if (!immediate) func.apply(context, args);
296      };
297      var callNow = immediate && !timeout;
298      clearTimeout(timeout);
299      timeout = setTimeout(later, wait);
300      if (callNow) func.apply(context, args);
301    };
302  };
303
304  var handleResize = debounce(function() {
305    var links = document.querySelector('.nav-links');
306    var rightLinks = document.querySelector('.nav-right');
307    links.classList.remove('active');
308    rightLinks.classList.remove('active');
309  }, 250);
310
311  window.addEventListener('resize', handleResize);
312
313  document.addEventListener('DOMContentLoaded', function() {
314    const navbar = document.querySelector('.navbar');
315
316    function checkScroll() {
317      if (window.scrollY > 100) {
318        navbar.classList.add('scrolled');
319      } else {
320        navbar.classList.remove('scrolled');
321      }
322    }
323
324    window.addEventListener('scroll', checkScroll);
325  });
326
327  function debounce(func, wait) {
328    let timeout;
329    return function() {
330      const context = this,
331        args = arguments;
332      clearTimeout(timeout);
333      timeout = setTimeout(() => {
334        func.apply(context, args);
335      }, wait);
336    };
337  }
338
339  document.addEventListener('DOMContentLoaded', function() {
340    const navbar = document.querySelector('.navbar');
341
342    const checkScroll = debounce(function() {
343      if (window.scrollY > 100) {
344        navbar.classList.add('scrolled');
345      } else {
346        navbar.classList.remove('scrolled');
347      }
348    }, 10); // Adjust debounce time as needed
349
350    window.addEventListener('scroll', checkScroll);
351  });
352</script>
352  </header>
353
354  <main>
355    <section class="hero ">
356<div class="container">
357<div class="hero-fill"></div>
358    <div class="hero-content fade-in-viewport">
359      <h4 class="highlight">Elevate Your Workplace Catering Experience</h4>
360      <h1>Our New Virtual Kitchen Service</h1>
361      <p>Welcome to Wolf and Lamb's brand new Virtual Kitchen delivery service - delivering fresh, seasonal, nutritional food directly to your office or meeting room. Order today to get your membership discounts.</p>
362      <a href="/make-an-enquiry" class="primary-button">Enquire Now</a>
363    </div>
364    <picture class="fade-in-viewport">
365    <source media="(max-width: 1024px)" srcset="../img/hero-small.png">
366    <source media="(min-width: 1025px)" srcset="../img/hero.png">
367    <img src=".../img/hero.png" alt="Delicious Food">
368  </picture>
369    </div>
370  </div>
371</section>
372
373    <div class="client-carousel-container">
374  <div class="client-carousel" id="client-carousel"></div>
375</div>
376
377<script>
378  // Fisher-Yates Shuffle
379  function shuffleArray(array) {
380    for (let i = array.length - 1; i > 0; i--) {
381      const j = Math.floor(Math.random() * (i + 1));
382      [array[i], array[j]] = [array[j], array[i]];
383    }
384    return array;
385  }
386
387  fetch('/get_images.php')
388    .then(res => res.json())
389    .then(images => {
390      const container = document.getElementById('client-carousel');
391
392      // ✅ Shuffle the image order before rendering
393      shuffleArray(images).forEach(url => {
394        const img = document.createElement('img');
395        img.src = url;
396        img.alt = 'Client Logo';
397        img.className = 'carousel-logo';
398        container.appendChild(img);
399      });
400    });
401</script>
401
402    <section class="virtual-kitchen-banner">
403    <div class="vk-content-wrapper">
404        <!-- Text content -->
405        <div class="vk-text">
406            <h2 class="fade-in-viewport">Seasonal meals,<br><strong>made fresh.</strong></h2>
407            <p class="fade-in-viewport">
408                Delivered directly to your workplace—<br>
409                individually boxed, beautifully balanced,<br>
410                and designed for every dietary need.
411            </p>
412            <a href="/menu"
413                class="menu-link fade-in-viewport"
414                data-category="seasonal-lunch">
415                View our menus
416                <span class="arrow">›</span>
417            </a>
418
419
420
421        </div>
422
423        <!-- Visual content -->
424        <div class="vk-image-container">
425            <div class="fade-in-viewport vk-green-bar bar-1 "></div>
426            <div class="fade-in-viewport vk-green-bar bar-2 "></div>
427            <img src="/img/virtual-kitchen/individual-pesce-lunch-box.jpg" alt="Wolf and Lamb Meal Pack" class="vk-image" />
428        </div>
429    </div>
430</section>
431
432
433<script>
434    window.addEventListener('scroll', () => {
435        const bars = document.querySelectorAll('.vk-green-bar');
436        const scroll = window.scrollY;
437        bars.forEach((bar, i) => {
438            bar.style.transform = `rotate(${scroll / (10 + i * 10)}deg)`;
439        });
440    });
441</script>
441    <section class="scroll-gallery">
442  <div class="scroll-gallery-row  fade-in-viewport">
443    
444    <img src="/img/virtual-kitchen/gallery/verde-box.jpg" alt="Meal 3" class="scroll-meal" />
445    <img src="/img/virtual-kitchen/gallery/vegan-box.jpg" alt="Meal 4" class="scroll-meal" />
446    <img src="/img/virtual-kitchen/gallery/carne-box.jpg" alt="Meal 1" class="scroll-meal" />
447    <img src="/img/virtual-kitchen/gallery/pesce-box.jpg" alt="Meal 2" class="scroll-meal" />
448    <img src="/img/virtual-kitchen/gallery/verde-box.jpg" alt="Meal 3" class="scroll-meal" />
449    <img src="/img/virtual-kitchen/gallery/vegan-box.jpg" alt="Meal 4" class="scroll-meal" />
450    <img src="/img/virtual-kitchen/gallery/carne-box.jpg" alt="Meal 1" class="scroll-meal" />
451    <img src="/img/virtual-kitchen/gallery/pesce-box.jpg" alt="Meal 2" class="scroll-meal" />
452  </div>
453</section>
454
455<script>
456  const row = document.querySelector('.scroll-gallery-row');
457
458  function getMultiplier() {
459    const width = window.innerWidth;
460
461    if (width >= 1200) return 0.3;   // large screens
462    if (width >= 768) return 0.15;   // tablets
463    return 0.1;                     // small screens / mobiles
464  }
465
466  function updateScrollTranslation() {
467    const scrollY = window.scrollY;
468    const multiplier = getMultiplier();
469    row.style.transform = `translateX(${-scrollY * multiplier}px)`;
470  }
471
472  window.addEventListener('scroll', updateScrollTranslation);
473</script>
473
474
475
476    <section class="allergen-scan-section">
477  <div class="as-content-wrapper">
478    
479    <!-- Image first -->
480    <div class="as-image-container">
481      <img
482        src="/img/allergen/allergen-scan.png"
483        alt="QR Allergen Label"
484        class="as-main-image fade-in-viewport"
485      />
486    </div>
487
488    <!-- Text second -->
489    <div class="as-text-block">
490      <h2 class="fade-in-viewport">Unique QR code<br><strong>labelling</strong></h2>
491      <p class="fade-in-viewport">
492        From allergens to nutritional information,<br>
493        everything you need is just one scan away.
494      </p>
495
496      <!-- Secondary image below text -->
497      <div class="as-secondary-image-wrapper fade-in-viewport">
498        <img
499          src="/img/allergen/nutritional-information.png"
500          alt="Nutrition Label"
501          class="as-secondary-image"
502        />
503      </div>
504    </div>
505    
506  </div>
507</section>
508    <section class="lunch-box-scroll">
509    <!-- Background + green bars behind text -->
510    <div class="lunch-box-text-wrapper">
511        <!-- Green bars behind -->
512        <div class="green-bar bar-top-left fade-in-viewport"></div>
513        <div class="green-bar bar-bottom-right fade-in-viewport"></div>
514
515        <!-- Background block holds the text and sits above the bars -->
516        <div class="lunch-box-background-block">
517            <div class="lunch-box-text fade-in-viewport">
518                <h2 class="wave-heading fade-in-viewport">
519                    <span>Enjoy</span>
520                    <span>a</span>
521                    <span>different</span><br>
522                    <span>lunch,</span>
523                    <span>every</span>
524                    <span>day</span>
525                    <span>of</span>
526                    <span>the</span>
527                    <span>week.</span>
528                </h2>
529
530                <p>
531                    From allergens to nutritional information,<br>
532                    everything you need is just one scan away.
533                </p>
534            </div>
535        </div>
536    </div>
537
538
539    <!-- Scrollable row of images -->
540    <div class="lunch-box-row ">
541        <img src="/img/virtual-kitchen/lunch-scroll/lunch7.jpg" alt="Lunch 7" class="lunch-box-img" />
542        <img src="/img/virtual-kitchen/lunch-scroll/lunch6.jpg" alt="Lunch 6" class="lunch-box-img" />
543
544        <img src="/img/virtual-kitchen/lunch-scroll/lunch3.jpg" alt="Lunch 3" class="lunch-box-img" />
545
546        <img src="/img/virtual-kitchen/lunch-scroll/lunch1.jpg" alt="Lunch 1" class="lunch-box-img" />
547        <img src="/img/virtual-kitchen/lunch-scroll/lunch4.jpg" alt="Lunch 4" class="lunch-box-img" />
548
549        <img src="/img/virtual-kitchen/lunch-scroll/lunch5.jpg" alt="Lunch 5" class="lunch-box-img" />
550        <img src="/img/virtual-kitchen/lunch-scroll/lunch7.jpg" alt="Lunch 7" class="lunch-box-img" />
551
552        <img src="/img/virtual-kitchen/lunch-scroll/lunch1.jpg" alt="Lunch 1" class="lunch-box-img" />
553        <img src="/img/virtual-kitchen/lunch-scroll/lunch4.jpg" alt="Lunch 4" class="lunch-box-img" />
554
555
556
557    </div>
558</section>
559<script>
560    const lunchBoxRow = document.querySelector('.lunch-box-row');
561
562    function getMultiplier() {
563        const width = window.innerWidth;
564        if (width >= 1200) return 0.3;
565        if (width >= 768) return 0.15;
566        return 0.1;
567    }
568
569    function updateScrollRight() {
570        const scrollY = window.scrollY;
571        const section = document.querySelector('.lunch-box-scroll');
572        const offsetTop = section.getBoundingClientRect().top + window.scrollY;
573
574
575        const startTrigger = offsetTop - 900; // scroll starts 400px before section
576        const startScroll = scrollY - startTrigger;
577
578        if (startScroll > 0) {
579            const multiplier = getMultiplier();
580            lunchBoxRow.style.transform = `translateX(${startScroll * multiplier}px)`;
581        } else {
582            lunchBoxRow.style.transform = 'translateX(0px)';
583        }
584    }
585
586    window.addEventListener('scroll', updateScrollRight);
587
588
589    window.addEventListener('scroll', () => {
590        const scroll = window.scrollY;
591
592        // Only target green bars inside .lunch-box-scroll
593        const bars = document.querySelectorAll('.lunch-box-scroll .green-bar');
594
595        bars.forEach((bar, i) => {
596            // ROTATE ANTI-CLOCKWISE
597            bar.style.transform = `rotate(${-scroll / (10 + i * 10)}deg)`;
598        });
599    });
600
601
602    const waveHeading = document.querySelector('.wave-heading');
603    const waveSpans = waveHeading.querySelectorAll('span');
604
605    let hasAnimated = false;
606
607    const observer = new IntersectionObserver(entries => {
608        entries.forEach(entry => {
609            if (entry.isIntersecting && entry.intersectionRatio > 0.6 && !hasAnimated) {
610                hasAnimated = true;
611
612                waveSpans.forEach((span, i) => {
613                    setTimeout(() => {
614                        span.style.transform = 'scale(1.1) rotate(-1deg)';
615
616                    }, i * 60);
617
618                    setTimeout(() => {
619                        span.style.transform = 'scale(1)';
620                    }, i * 60 + 300);
621                });
622            }
623
624            // Reset flag when leaving view
625            if (!entry.isIntersecting) {
626                hasAnimated = false;
627            }
628        });
629    }, {
630        threshold: 0.6
631    });
632
633    observer.observe(waveHeading);
634</script>
634    <section class="breakfast-pots-spin">
635    <div class="vk-content-wrapper">
636        <!-- Text content -->
637        <div class="vk-text">
638            <h2 class="fade-in-viewport">Beautifully balanced<br><strong>breakfast pots</strong></h2>
639            <p class="fade-in-viewport">
640                Made fresh every morning. Designed to keep you full, focused and feeling good — without slowing you down.
641            </p>
642            
643            <a href="/menu"
644                class="menu-link fade-in-viewport"
645                data-category="breakfast">
646                View our menus
647                <span class="arrow">›</span>
648            </a>
649        </div>
650
651        <!-- Visual content -->
652        <div class="vk-image-container spin-wrapper ">
653            <!-- <div class="vk-green-bar bar-1"></div> -->
654            <!-- <div class="vk-green-bar bar-2"></div> -->
655
656            <div class="spin-circle">
657                <img src="/img/virtual-kitchen/spin/pot1.jpg" class="orbit-img fade-in-viewport" />
658                <img src="/img/virtual-kitchen/spin/pot2.jpg" class="orbit-img fade-in-viewport" />
659                <img src="/img/virtual-kitchen/spin/pot3.jpg" class="orbit-img fade-in-viewport" />
660            </div>
661
662        </div>
663    </div>
664</section>
665
666<script>
667const orbitImgs = document.querySelectorAll('.orbit-img');
668
669window.addEventListener('scroll', () => {
670  const scroll = window.scrollY;
671  const radius = 200; // smaller to match smaller images
672  const offsetAngle = scroll / 1000; // much slower
673
674  orbitImgs.forEach((img, i) => {
675    const angle = offsetAngle + (i * (Math.PI * 2 / orbitImgs.length));
676    const x = radius * Math.cos(angle);
677    const y = radius * Math.sin(angle);
678
679    img.style.transform = `translate(${x}px, ${y}px)`;
680  });
681});
682
683
684</script>
684     <section class="platters-banner">
685    <div class="platters-content">
686
687        <div class="platter-wrap platter-left-wrap fade-in-viewport">
688            <img src="/img/virtual-kitchen/platter1.jpg" alt="Fruit Platter" class="platter-img platter-left" />
689        </div>
690
691        <div class="platters-text fade-in-viewport">
692            <h2>Premium sharing<br>platters</h2>
693            <p>
694                Thoughtfully prepared for effortless hosting — ideal for boardrooms,<br>
695                brainstorms, and everything between.
696            </p>
697
698            <a href="/menu"
699                class="menu-link fade-in-viewport"
700                data-category="meeting-rooms">
701                View our menus
702                <span class="arrow">›</span>
703            </a>
704        </div>
705
706        <div class="platter-wrap platter-right-wrap fade-in-viewport">
707            <img src="/img/virtual-kitchen/platter2.jpg" alt="Sandwich Platter" class="platter-img platter-right" />
708        </div>
709
710    </div>
711</section>
712
713<script>
714    const platterLeft = document.querySelector('.platter-left');
715    const platterRight = document.querySelector('.platter-right');
716
717    window.addEventListener('scroll', () => {
718        const scroll = window.scrollY;
719
720        // Move left platter upwards slightly with scroll
721        platterLeft.style.transform = `translateY(${-scroll / 30}px)`;
722
723        // Move right platter downwards slightly with scroll
724        platterRight.style.transform = `translateY(${scroll / 30}px)`;
725    });
726</script>
726    <section class="sandwich-scroll">
727    <!-- Background + green bars behind text -->
728    <div class="sandwich-box-text-wrapper">
729        <!-- Green bars behind -->
730        <!-- Background block holds the text and sits above the bars -->
731        <div class="sandwich-box-background-block">
732            <div class="lunch-box-text fade-in-viewport">
733                <h2 class="wave-heading fade-in-viewport">
734                    <span>Perfectly</span>
735                    <span>crafted</span>
736                    <span>sandwiches,</span><br>
737                    <span>freshly</span>
738                    <span>made</span>
739                    <span>for</span>
740                    <span>your</span>
741                    <span>day.</span>
742                </h2>
743
744                <p>
745                    Thoughtfully stacked and ready to go — from creative combos to comforting classics, always balanced and fresh.
746                </p>
747                <a href="/menu"
748                    class="menu-link fade-in-viewport"
749                    data-category="sandwiches">
750                    View our menus
751                    <span class="arrow">›</span>
752                </a>
753
754            </div>
755        </div>
756    </div>
757
758    <!-- Scrollable row of images -->
759    <div class="sandwich-row-container">
760        <div class="lunch-box-row sandwich-row">
761            <img src="/img/virtual-kitchen/sandwich-scroll/sandwich1.webp" alt="Sandwich 1" loading="lazy" class="sandwich-box-img" />
762            <img src="/img/virtual-kitchen/sandwich-scroll/sandwich2.webp" alt="Sandwich 2" loading="lazy" class="sandwich-box-img" />
763            <img src="/img/virtual-kitchen/sandwich-scroll/sandwich3.webp" alt="Sandwich 3" loading="lazy" class="sandwich-box-img" />
764            <img src="/img/virtual-kitchen/sandwich-scroll/sandwich4.webp" alt="Sandwich 4" loading="lazy" class="sandwich-box-img" />
765            <img src="/img/virtual-kitchen/sandwich-scroll/sandwich5.webp" alt="Sandwich 5" loading="lazy" class="sandwich-box-img" />
766            <img src="/img/virtual-kitchen/sandwich-scroll/sandwich6.webp" alt="Sandwich 6" loading="lazy" class="sandwich-box-img" />
767       
768        </div>
769    </div>
770
771    <style>
772        .sandwich-row img {
773            margin-right: 15px;
774        }
775    </style>
776</section>
777<script>
778document.querySelectorAll('.sandwich-scroll').forEach(section => {
779    const sandwichRow = section.querySelector('.sandwich-row');
780    const waveHeading = section.querySelector('.wave-heading');
781    const waveSpans = waveHeading ? waveHeading.querySelectorAll('span') : [];
782
783    function getScrollMultiplier() {
784        const width = window.innerWidth;
785        if (width >= 1200) return 0.3;
786        if (width >= 768) return 0.15;
787        return 0.1;
788    }
789
790    function updateScroll() {
791        const scrollY = window.scrollY;
792        const offsetTop = section.getBoundingClientRect().top + window.scrollY;
793
794        const isMenuPage =
795            window.location.pathname === `${basePath}/menu` ||
796            window.location.pathname === `${basePath}/menu/`;
797
798        const startTrigger = isMenuPage ? offsetTop : offsetTop - 700;
799        const startScroll = scrollY - startTrigger;
800
801        if (startScroll > 0) {
802            const multiplier = getScrollMultiplier();
803            sandwichRow.style.transform = `translate3d(${-startScroll * multiplier}px, 0, 0)`;
804        } else {
805            sandwichRow.style.transform = 'translate3d(0px, 0, 0)';
806        }
807    }
808
809    // Smooth animation loop (per section)
810    let ticking = false;
811    function onScroll() {
812        if (!ticking) {
813            window.requestAnimationFrame(() => {
814                updateScroll();
815                ticking = false;
816            });
817            ticking = true;
818        }
819    }
820
821    window.addEventListener('scroll', onScroll);
822
823    // ✅ Independent wave animation for each section
824    let waveHasAnimated = false;
825
826    if (waveHeading) {
827        const observer = new IntersectionObserver(entries => {
828            entries.forEach(entry => {
829                if (entry.isIntersecting && entry.intersectionRatio > 0.6 && !waveHasAnimated) {
830                    waveHasAnimated = true;
831
832                    waveSpans.forEach((span, i) => {
833                        const offset = Math.floor(Math.random() * 30);
834                        setTimeout(() => {
835                            span.style.transform = 'scale(1.1) rotate(-1deg)';
836                        }, i * 60 + offset);
837                        setTimeout(() => {
838                            span.style.transform = 'scale(1)';
839                        }, i * 60 + offset + 300);
840                    });
841                }
842
843                if (!entry.isIntersecting) {
844                    waveHasAnimated = false;
845                }
846            });
847        }, { threshold: 0.6 });
848
849        observer.observe(waveHeading);
850    }
851});
852</script>
852
853    <section id="health-bowls-scroll" class="sandwich-scroll">
854    <!-- Background + green bars behind text -->
855    <div class="sandwich-box-text-wrapper">
856        <!-- Green bars behind -->
857        <!-- Background block holds the text and sits above the bars -->
858        <div class="sandwich-box-background-block">
859            <div class="lunch-box-text fade-in-viewport">
860                <h2 class="wave-heading fade-in-viewport">
861                    <span>Perfectly</span>
862                    <span>crafted</span>
863                    <span>health bowls,</span><br>
864                    <span>freshly</span>
865                    <span>made</span>
866                    <span>for</span>
867                    <span>your</span>
868                    <span>day.</span>
869                </h2>
870
871                <p>
872                    Thoughtfully stacked and ready to go — from creative combos to comforting classics, always balanced and fresh.
873                </p>
874                <a href="/menu"
875                    class="menu-link fade-in-viewport"
876                    data-category="sandwiches">
877                    View our menus
878                    <span class="arrow">›</span>
879                </a>
880
881            </div>
882        </div>
883    </div>
884
885    <!-- Scrollable row of images -->
886    <div class="sandwich-row-container">
887        <div class="lunch-box-row sandwich-row">
888            <img src="/img/virtual-kitchen/health-bowls/health-bowl1.jpg" alt="Sandwich 1" loading="lazy" class="sandwich-box-img" />
889            <img src="/img/virtual-kitchen/health-bowls/health-bowl2.jpg" alt="Sandwich 2" loading="lazy" class="sandwich-box-img" />
890            <img src="/img/virtual-kitchen/health-bowls/health-bowl3.jpg" alt="Sandwich 3" loading="lazy" class="sandwich-box-img" />
891            <img src="/img/virtual-kitchen/health-bowls/health-bowl4.jpg" alt="Sandwich 4" loading="lazy" class="sandwich-box-img" />
892            <img src="/img/virtual-kitchen/health-bowls/health-bowl5.jpg" alt="Sandwich 5" loading="lazy" class="sandwich-box-img" />
893            <img src="/img/virtual-kitchen/health-bowls/health-bowl6.jpg" alt="Sandwich 6" loading="lazy" class="sandwich-box-img" />
894            <img src="/img/virtual-kitchen/health-bowls/health-bowl1.jpg" alt="Sandwich 1" loading="lazy" class="sandwich-box-img" />
895            <img src="/img/virtual-kitchen/health-bowls/health-bowl2.jpg" alt="Sandwich 2" loading="lazy" class="sandwich-box-img" />
896            <img src="/img/virtual-kitchen/health-bowls/health-bowl3.jpg" alt="Sandwich 3" loading="lazy" class="sandwich-box-img" />
897            <img src="/img/virtual-kitchen/health-bowls/health-bowl4.jpg" alt="Sandwich 4" loading="lazy" class="sandwich-box-img" />
898            <img src="/img/virtual-kitchen/health-bowls/health-bowl5.jpg" alt="Sandwich 5" loading="lazy" class="sandwich-box-img" />
899            <img src="/img/virtual-kitchen/health-bowls/health-bowl6.jpg" alt="Sandwich 6" loading="lazy" class="sandwich-box-img" />
900        </div>
901    </div>
902
903    <style>
904        .sandwich-row img {
905            margin-right: 15px;
906        }
907    </style>
908</section>
909<script>
910document.querySelectorAll('#health-bowls-scroll').forEach(section => {
911    const sandwichRow = section.querySelector('.sandwich-row');
912    const waveHeading = section.querySelector('.wave-heading');
913    const waveSpans = waveHeading ? waveHeading.querySelectorAll('span') : [];
914
915    function getScrollMultiplier() {
916        const width = window.innerWidth;
917        if (width >= 1200) return 0.3;
918        if (width >= 768) return 0.15;
919        return 0.1;
920    }
921
922    function updateScroll() {
923        const scrollY = window.scrollY;
924        const offsetTop = section.getBoundingClientRect().top + window.scrollY;
925
926        const isMenuPage =
927            window.location.pathname === `${basePath}/menu` ||
928            window.location.pathname === `${basePath}/menu/`;
929
930        const startTrigger = isMenuPage ? offsetTop : offsetTop - 700;
931        const startScroll = scrollY - startTrigger;
932
933        if (startScroll > 0) {
934            const multiplier = getScrollMultiplier();
935            sandwichRow.style.transform = `translate3d(${-startScroll * multiplier}px, 0, 0)`;
936        } else {
937            sandwichRow.style.transform = 'translate3d(0px, 0, 0)';
938        }
939    }
940
941    // Smooth animation loop (per section)
942    let ticking = false;
943    function onScroll() {
944        if (!ticking) {
945            window.requestAnimationFrame(() => {
946                updateScroll();
947                ticking = false;
948            });
949            ticking = true;
950        }
951    }
952
953    window.addEventListener('scroll', onScroll);
954
955    // ✅ Independent wave animation for each section
956    let waveHasAnimated = false;
957
958    if (waveHeading) {
959        const observer = new IntersectionObserver(entries => {
960            entries.forEach(entry => {
961                if (entry.isIntersecting && entry.intersectionRatio > 0.6 && !waveHasAnimated) {
962                    waveHasAnimated = true;
963
964                    waveSpans.forEach((span, i) => {
965                        const offset = Math.floor(Math.random() * 30);
966                        setTimeout(() => {
967                            span.style.transform = 'scale(1.1) rotate(-1deg)';
968                        }, i * 60 + offset);
969                        setTimeout(() => {
970                            span.style.transform = 'scale(1)';
971                        }, i * 60 + offset + 300);
972                    });
973                }
974
975                if (!entry.isIntersecting) {
976                    waveHasAnimated = false;
977                }
978            });
979        }, { threshold: 0.6 });
980
981        observer.observe(waveHeading);
982    }
983});
984</script>
984
985    <section class="dessert-pots-spin">
986  <div class="vk-content-wrapper reverse">
987    <!-- Visual content -->
988    <div class="vk-image-container spin-wrapper reverse  ">
989      <div class="spin-circle reverse">
990        <img src="/img/virtual-kitchen/spin/dessert1.jpg" class="orbit-img dessert fade-in-viewport" />
991        <img src="/img/virtual-kitchen/spin/dessert2.jpg" class="orbit-img dessert fade-in-viewport" />
992        <img src="/img/virtual-kitchen/spin/dessert3.jpg" class="orbit-img dessert fade-in-viewport" />
993      </div>
994    </div>
995
996    <!-- Text content -->
997    <div class="vk-text">
998      <h2 class="fade-in-viewport">Hand-finished<br><strong>dessert pots</strong></h2>
999      <p class="fade-in-viewport">
1000        A perfect end to any lunch. Carefully crafted with bold flavours and beautiful presentation.
1001      </p>
1002    </div>
1003  </div>
1004</section>
1005<script>
1006  const dessertImgs = document.querySelectorAll('.orbit-img.dessert');
1007
1008  window.addEventListener('scroll', () => {
1009    const scroll = window.scrollY;
1010    const radius = 200;
1011    const offsetAngle = -scroll / 1000; // ← negative to reverse direction
1012
1013    dessertImgs.forEach((img, i) => {
1014      const angle = offsetAngle + (i * (Math.PI * 2 / dessertImgs.length));
1015      const x = radius * Math.cos(angle);
1016      const y = radius * Math.sin(angle);
1017
1018      img.style.transform = `translate(${x}px, ${y}px)`;
1019    });
1020  });
1021</script>
1021
1022    <section id="look-book" class="look-book fade-in-viewport">
1023  <div class="section-title">Daily Lunch Menus</div>
1024  <p class="section-para fade-in-viewport">
1025    Can’t decide what to have for lunch? We offer a different lunch every day of the week.
1026    Choose a daily lunch box across a range of Carne, Pesce, Verde, and Vegan mains. All mains come with two or three sides.
1027    Always different each day of the week.
1028  </p>
1029
1030  <div class="container">
1031    <img class="carousel-curve" src="/img/SVG/carousel-curve-right.svg" alt="">
1032    <img class="carousel-curve left" src="/img/SVG/carousel-curve-left.svg" alt="">
1033
1034    <div class="carousel-nav">
1035      <div class="carousel-nav-links">
1036        <a href="#daily" class="carousel-nav-link selected" data-category="daily">weekly</a><a href="#monday" class="carousel-nav-link selected" data-category="monday">monday</a><a href="#tuesday" class="carousel-nav-link" data-category="tuesday">tuesday</a><a href="#wednesday" class="carousel-nav-link" data-category="wednesday">wednesday</a><a href="#thursday" class="carousel-nav-link" data-category="thursday">thursday</a><a href="#friday" class="carousel-nav-link" data-category="friday">friday</a>      </div>
1037    </div>
1038
1039    <div id="carousel-container" class="fade-in-viewport">
1040      <div id="carousel2" class="carousel">
1041        <div class="card selected" data-category="daily">
1042  <picture>
1043    <source media="(max-width:1024px)" srcset="/img/daily/small/individually-boxed-lunch.jpg">
1044    <img class="card-image" src="/img/daily/individually-boxed-lunch.jpg" alt="">
1045  </picture>
1046  <div class="card-desc">
1047    <h3><strong></strong></h3>
1048    <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1049      <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/>
1050      <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/>
1051    </svg>
1052    <h3>Individually Boxed</h3>
1053    <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1054      <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/>
1055      <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/>
1056    </svg>
1057  </div>
1058</div><div class="card selected" data-category="monday">
1059  <picture>
1060    <source media="(max-width:1024px)" srcset="/img/daily/small/lunch-mon.jpg">
1061    <img class="card-image" src="/img/daily/lunch-mon.jpg" alt="">
1062  </picture>
1063  <div class="card-desc">
1064    <h3><strong></strong></h3>
1065    <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1066      <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/>
1067      <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/>
1068    </svg>
1069    <h3>monday</h3>
1070    <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1071      <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/>
1072      <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/>
1073    </svg>
1074  </div>
1075</div><div class="card" data-category="tuesday">
1076  <picture>
1077    <source media="(max-width:1024px)" srcset="/img/daily/small/lunch-tues.jpg">
1078    <img class="card-image" src="/img/daily/lunch-tues.jpg" alt="">
1079  </picture>
1080  <div class="card-desc">
1081    <h3><strong></strong></h3>
1082    <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1083      <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/>
1084      <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/>
1085    </svg>
1086    <h3>tuesday</h3>
1087    <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1088      <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/>
1089      <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/>
1090    </svg>
1091  </div>
1092</div><div class="card" data-category="wednesday">
1093  <picture>
1094    <source media="(max-width:1024px)" srcset="/img/daily/small/lunch-wed.jpg">
1095    <img class="card-image" src="/img/daily/lunch-wed.jpg" alt="">
1096  </picture>
1097  <div class="card-desc">
1098    <h3><strong></strong></h3>
1099    <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1100      <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/>
1101      <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/>
1102    </svg>
1103    <h3>wednesday</h3>
1104    <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1105      <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/>
1106      <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/>
1107    </svg>
1108  </div>
1109</div><div class="card" data-category="thursday">
1110  <picture>
1111    <source media="(max-width:1024px)" srcset="/img/daily/small/lunch-thurs.jpg">
1112    <img class="card-image" src="/img/daily/lunch-thurs.jpg" alt="">
1113  </picture>
1114  <div class="card-desc">
1115    <h3><strong></strong></h3>
1116    <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1117      <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/>
1118      <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/>
1119    </svg>
1120    <h3>thursday</h3>
1121    <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1122      <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/>
1123      <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/>
1124    </svg>
1125  </div>
1126</div><div class="card" data-category="friday">
1127  <picture>
1128    <source media="(max-width:1024px)" srcset="/img/daily/small/lunch-fri.jpg">
1129    <img class="card-image" src="/img/daily/lunch-fri.jpg" alt="">
1130  </picture>
1131  <div class="card-desc">
1132    <h3><strong></strong></h3>
1133    <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1134      <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/>
1135      <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/>
1136    </svg>
1137    <h3>friday</h3>
1138    <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1139      <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/>
1140      <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/>
1141    </svg>
1142  </div>
1143</div>      </div>
1144    </div>
1145  </div>
1146</section>
1147
1148<script src="/script/carousel.js"></script>
1148
1149    <section id="seasonal" class="look-book fade-in-viewport">
1150  <div class="section-title">We're Seasonal</div>
1151  <p class="section-para fade-in-viewport">
1152    Eat fresh across each season with locally sourced high-quality ingredients.
1153    At Wolf and Lamb, we follow the seasons.
1154  </p>
1155
1156  <div class="container">
1157    <img class="carousel-curve" src="/img/SVG/carousel-curve-right.svg" alt="">
1158    <img class="carousel-curve left" src="/img/SVG/carousel-curve-left.svg" alt="">
1159
1160    <div class="carousel-nav">
1161      <div class="carousel-nav-links">
1162        <a href="#summer" class="carousel-nav-link selected" data-category="summer">summer</a><a href="#autumn" class="carousel-nav-link" data-category="autumn">autumn</a><a href="#winter" class="carousel-nav-link" data-category="winter">winter</a><a href="#spring" class="carousel-nav-link" data-category="spring">spring</a>      </div>
1163    </div>
1164
1165    <div id="carousel-container" class="fade-in-viewport">
1166      <div id="carousel" class="carousel">
1167        <div class="card selected" data-category="summer">
1168  <picture>
1169    <source media="(max-width:1024px)" srcset="/img/seasonal/small/summer.jpg">
1170    <img class="card-image" src="/img/seasonal/summer.jpg" alt="summer 23">
1171  </picture>
1172  <div class="card-desc">
1173    <h3><strong></strong></h3>
1174    <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1175      <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/>
1176      <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/>
1177    </svg>
1178    <h3>summer 23</h3>
1179    <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1180      <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/>
1181      <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/>
1182    </svg>
1183  </div>
1184</div><div class="card" data-category="autumn">
1185  <picture>
1186    <source media="(max-width:1024px)" srcset="/img/seasonal/small/autumn.jpg">
1187    <img class="card-image" src="/img/seasonal/autumn.jpg" alt="autumn 23">
1188  </picture>
1189  <div class="card-desc">
1190    <h3><strong></strong></h3>
1191    <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1192      <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/>
1193      <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/>
1194    </svg>
1195    <h3>autumn 23</h3>
1196    <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1197      <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/>
1198      <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/>
1199    </svg>
1200  </div>
1201</div><div class="card" data-category="winter">
1202  <picture>
1203    <source media="(max-width:1024px)" srcset="/img/seasonal/small/winter.jpg">
1204    <img class="card-image" src="/img/seasonal/winter.jpg" alt="winter 24">
1205  </picture>
1206  <div class="card-desc">
1207    <h3><strong></strong></h3>
1208    <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1209      <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/>
1210      <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/>
1211    </svg>
1212    <h3>winter 24</h3>
1213    <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1214      <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/>
1215      <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/>
1216    </svg>
1217  </div>
1218</div><div class="card" data-category="spring">
1219  <picture>
1220    <source media="(max-width:1024px)" srcset="/img/seasonal/small/spring.jpg">
1221    <img class="card-image" src="/img/seasonal/spring.jpg" alt="spring 24">
1222  </picture>
1223  <div class="card-desc">
1224    <h3><strong></strong></h3>
1225    <svg class="arrow arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1226      <line class="cls-1" x1="47.83" y1="11.49" x2="3.03" y2="11.49"/>
1227      <polyline class="cls-1" points="10.49 21.99 1.33 11.49 10.49 1"/>
1228    </svg>
1229    <h3>spring 24</h3>
1230    <svg class="arrow arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.83 22.99">
1231      <line class="cls-1" x1="1" y1="11.49" x2="45.81" y2="11.49"/>
1232      <polyline class="cls-1" points="38.34 1 47.51 11.49 38.34 21.99"/>
1233    </svg>
1234  </div>
1235</div>      </div>
1236    </div>
1237  </div>
1238</section>
1239
1240<script src="/script/carousel.js"></script>
1240
1241
1242  </main>
1243
1244  <footer class="footer">
1245  <div class="container">
1246    <div class="footer-links">
1247      <!-- Optional CTA section -->
1248      <!--
1249      <div class="footer-section cta">
1250        <h3>Create An Account</h3>
1251        <p>Join today to access your membership discounts.</p>
1252        <a href="#signup" class="primary-button">Get Started</a>
1253      </div>
1254      -->
1255
1256      <div class="nav-links">
1257    
1258            <a class="scroll-link " href="/">bespoke</a>
1259    
1260            <a class="selected" href="/virtual-kitchen">virtual kitchen</a>
1261         
1262        <a class="" href="/menu">menu</a>
1263    
1264            <a class="" href="/on-location">on-location</a>
1265    
1266            <a class="" href="/inside">inside?</a>
1267    
1268            <a class="" href="/sustainability">sustainability</a>
1269    
1270            <a class="" href="/contact">contact</a>
1271    </div>
1272
1273      <div class="footer-section contact">
1274        <!--
1275        <a href="#whatsapp" class="whatsapp-link">
1276          <img src="/img/SVG/whatsapp.png" alt="WhatsApp">
1277        </a>
1278        -->
1279        <h3 class="tel">
1280          <a href="tel:020 8533 3341">020 8533 3341</a>
1281        </h3>
1282        <a href="mailto:[email protected]">[email protected]</a>
1283      </div>
1284    </div>
1285
1286    <div class="footer-logos">
1287      <img src="/img/SVG/wolf-lamb-logo-white.svg" alt="Wolf & Lamb Logo">
1288      <!--
1289      <img src="/img/SVG/WeWork-logo-white.svg" alt="WeWork Logo">
1290      -->
1291    </div>
1292  </div>
1293</footer>
1294
1295  
1295<script>
1296    window.basePath = "";
1297  </script>
1297
1298  
1298<script src="/script/script.js"></script>
1298
1299
1300  <!-- Intercom -->
1301  
1301<script>
1302    window.intercomSettings = {
1303      api_base: "https://api-iam.intercom.io",
1304      app_id: "ytl8k7ay",
1305    };
1306  </script>
1306
1307
1308  
1308<script>
1309    (function() {
1310      var w = window;
1311      var ic = w.Intercom;
1312      if (typeof ic === "function") {
1313        ic('reattach_activator');
1314        ic('update', w.intercomSettings);
1315      } else {
1316        var d = document;
1317        var i = function() {
1318          i.c(arguments);
1319        };
1320        i.q = [];
1321        i.c = function(args) {
1322          i.q.push(args);
1323        };
1324        w.Intercom = i;
1325        var l = function() {
1326          var s = d.createElement('script');
1327          s.type = 'text/javascript';
1328          s.async = true;
1329          s.src = 'https://widget.intercom.io/widget/ytl8k7ay';
1330          var x = d.getElementsByTagName('script')[0];
1331          x.parentNode.insertBefore(s, x);
1332        };
1333        if (document.readyState === 'complete') {
1334          l();
1335        } else if (w.attachEvent) {
1336          w.attachEvent('onload', l);
1337        } else {
1338          w.addEventListener('load', l, false);
1339        }
1340      }
1341    })();
1342  </script>
1342
1343
1344</body>
1345
1346</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.