<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
	    <meta name="theme-color" content="#FFFFFF">

        <!-- Favicons -->
        <link rel="icon" type="image/x-icon" href="favicon.ico">
        <link rel="icon" type="image/png" sizes="16x16" href="assets/favicons/favicon-16x16.png">
        <link rel="icon" type="image/png" sizes="32x32" href="assets/favicons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="48x48" href="assets/favicons/favicon-48x48.png">
        <link rel="icon" type="image/png" sizes="64x64" href="assets/favicons/favicon-64x64.png">
        <link rel="icon" type="image/png" sizes="128x128" href="assets/favicons/favicon-128x128.png">
        <link rel="apple-touch-icon" sizes="180x180" href="assets/favicons/apple-touch-icon.png">
        <link rel="manifest" href="assets/favicons/site.webmanifest">
		<meta name="msapplication-TileColor" content="#FFFFFF">
        <meta name="msapplication-config" content="assets/favicons/browserconfig.xml">
	
	<title>Cardboard Toast | Boutique Consultancy - Est. 2021</title>
	
	<meta name="description" content="Cardboard Toast is a boutique consultancy, architect of brands, and springboard for innovation. We invest in cutting-edge ideas and consumer brands, providing advisory services and seed capital.">
	<meta name="keywords" content="Cardboard Toast, boutique consultancy, brand architecture, innovation, ventures, consumer brands, advisory services">
	<meta name="author" content="Cardboard Toast">
	
	<!-- Open Graph Meta Tags -->
	<meta property="og:title" content="Cardboard Toast | Boutique Consultancy">
	<meta property="og:description" content="A boutique consultancy, architect of brands, and springboard for innovation.">
	<meta property="og:type" content="website">
	<meta property="og:url" content="https://cardboardtoast.io">
	<meta property="og:image" content="assets/images/hero/hero-background.jpg">
	
	<!-- Twitter Card Meta Tags -->
	<meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:title" content="Cardboard Toast | Boutique Consultancy">
	<meta name="twitter:description" content="A boutique consultancy, architect of brands, and springboard for innovation.">
	<meta name="twitter:image" content="assets/images/hero/hero-background.jpg">
	
	<!-- Structured Data -->
	<script type="application/ld+json">
	{
		"@context": "https://schema.org",
		"@type": "Organization",
		"name": "Cardboard Toast",
		"description": "Boutique consultancy specializing in brand architecture and innovation",
		"url": "https://cardboardtoast.io",
		"foundingDate": "2021",
		"email": "hello@cardboardtoast.io",
		"sameAs": [],
		"address": {
			"@type": "PostalAddress",
			"addressCountry": "US"
		}
	}
	</script>
	
	<!-- Preload Critical Resources -->
	<link rel="preload" href="assets/fonts/librecaslontext-regular.otf" as="font" type="font/otf" crossorigin>
	<link rel="preload" href="css/styles.css" as="style">
	
	<!-- Stylesheets -->
	<link rel="stylesheet" href="css/styles.css">
	
	<!-- External Libraries -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollToPlugin.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/Draggable.min.js"></script>
	<script src="https://soulwire.github.io/sketch.js/js/sketch.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js"></script>
	<script src="https://unpkg.com/swup@3"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/3.1.1/luxon.min.js"></script>
</head>

<body>
	<!-- Skip link for accessibility -->
	<a href="#main-content" class="skip-link">Skip to main content</a>
	
	<!-- Fixed Header -->
	<div style="margin:1vw; position:fixed; top:0; left:0; z-index:2000 !important; width:80vw;">  
		<div style="display:flex; width:100%; left:0; z-index:1000 !important; background:none;">
			<h3>
				<span class="intro1" style="position:absolute;">cardboard toast</span><br>  
				<span class="intro1">est.</span> <span class="margin counter intro1" data-number="2021"></span><br>
			</h3>
		</div>
	</div>

	<!-- Swup Container -->
	<div id="swup" class="transition-fade">
		<main id="main-content">
			<!-- Main Frame Container -->
			<div class="mainframe is-hidden">
				<div class="mainContent">
					
					<!-- Footer Section (Fixed at Bottom) -->
					<div style="height:70vh; position:fixed; bottom:0; width:100vw; left:0; background:#111; z-index:0;">
						<div style="position:absolute; left:0; bottom:0; padding:1vh;">
                            <h3 style="color:#FFFFFF;">
								thank you! <a href="#" data-target="#top" class="getthere">top</a>
							</h3> 	
						</div>		

						<div style="position:absolute; right:0; bottom:0; padding:1vh;">
                            <h3 style="color:#FFFFFF;">
								&copy; 2025 cardboard toast
							</h3> 	
						</div>	
					</div>

					<!-- Logo Holder -->
					<div class="holdHolder">
						<span class="logoHolder"></span>	
					</div>

					<!-- Navigation Container -->
					<div class="navContainer">
						<div class="btn">
							<h3 href="#" data-place="#slide-0" class="getthere2 faderz2 is-on">welcome</h3>
                            <a href="#" data-target="#slide-0" class="getthere selector is-active">
                                <img src="assets/images/icons/navigation-element.png" 
                                     style="height:100%; width:100%; object-fit:cover; padding:none; margin:0; border:none;" 
                                     alt="navigation marker"/>
                            </a>
						</div> 	

						<div class="btn">
							<h3 href="#" data-place="#slide-1" class="getthere2 faderz2">what we do</h3>
                            <a href="#" data-target="#slide-1" class="getthere selector">
                                <img src="assets/images/icons/navigation-element.png" 
                                     style="height:100%; width:100%; object-fit:cover; padding:none; margin:0; border:none;" 
                                     alt="navigation marker"/>
                            </a>
						</div>  

						<div class="btn">
							<h3 href="#" data-place="#slide-2" class="getthere2 faderz2">how we do it</h3>
                            <a href="#" data-target="#slide-2" class="getthere selector">
                                <img src="assets/images/icons/navigation-element.png" 
                                     style="height:100%; width:100%; object-fit:cover; padding:none; margin:0; border:none;" 
                                     alt="navigation marker"/>
                            </a>
						</div> 

						<div class="btn">
							<h3 href="#" data-place="#slide-3" class="getthere2 faderz2">why we do it</h3> 	
                            <a href="#" data-target="#slide-3" class="getthere selector">
                                <img src="assets/images/icons/navigation-element.png" 
                                     style="height:100%; width:100%; object-fit:cover; padding:none; margin:0; border:none;" 
                                     alt="navigation marker"/>
                            </a>
						</div> 

						<div class="btn">
							<h3 href="#" data-place="#slide-4" class="getthere2 faderz2">select engagements</h3>
                            <a href="#" data-target="#slide-4" class="getthere selector">
                                <img src="assets/images/icons/navigation-element.png" 
                                     style="height:100%; width:100%; object-fit:cover; padding:none; margin:0; border:none;" 
                                     alt="navigation marker"/>
                            </a>
						</div> 

						<div class="btn">
							<h3 href="#" data-place="#slide-5" class="getthere2 faderz2">thank you</h3>
                            <a href="#" data-target="#slide-5" class="getthere selector">
                                <img src="assets/images/icons/navigation-element.png" 
                                     style="height:100%; width:100%; object-fit:cover; padding:none; margin:0; border:none;" 
                                     alt="navigation marker"/>
                            </a>
						</div> 
					</div>

					<!-- SLIDE 0: Welcome/Hero Section -->
					<section class="section pSection2 holderSection" id="slide-0" aria-label="Welcome">
						<div class="caption3"><h3></h3></div>   	
						
						<div class="txtHolder pContent2">
							<div class="txtsizer0">
								<div class="txter0" style="display:flex;">
									<h1>cardboard toast</h1>	
								</div>  
							</div>  
							
							<div class="txtsizer1">
								<div class="txter">
									<h1 class="scramtime">a boutique consultancy.</h1>	
								</div>   
								
								<div class="txter">
									<h1 class="scramtime">an architect of brands.</h1>	
								</div>   
								
								<div class="txter">
									<h1 class="scramtime">a springboard for innovation.</h1>	
								</div>   
							</div> 
						</div>  
					</section>	

					<!-- Background Image Section -->
					<div class="section2">
						<picture>
                    <source srcset="assets/images/hero/hero-background.webp" type="image/webp">
                    <img src="assets/images/hero/hero-background.jpg" 
                             style="position:relative; height:120vw; object-fit:contain; opacity:0;" 
                             class="card2" alt="Cardboard Toast branding">
                    </picture>
					</div>				

					<!-- SLIDE 1: What We Do Section -->
					<section class="section" id="slide-1" style="padding-top:10vh; z-index:20 !important; background: #FFFFFF;" aria-label="What We Do">
						<div class="caption3"><h3>what we do</h3></div>   

						<div class="doTop">
							<h3 class="largeType card" style="text-align:center;">
								What we do
							</h3>	
						</div>		

						<div class="doCell">
							<img class="card" 
								 src="assets/images/icons/service-icon.png" 
								 style="height:15vw; width:15vw; object-fit:contain; mix-blend-mode:multiply; z-index:100 !important;"
								 alt="Ventures icon">
							
							<div class="doCard">
								<h2 class="card doHead">Ventures</h2>
								<h3 class="card" style="margin-top:1.5vh;"> 
									We invest in cutting-edge ideas and consumer brands, providing advisory services and seed capital.
								</h3>		
							</div>		
						</div>	

						<div class="doCell">
							<img class="card" 
								 src="assets/images/icons/service-icon.png" 
								 style="height:15vw; width:15vw; object-fit:contain; mix-blend-mode:multiply; z-index:100 !important;"
								 alt="Consultancy icon">
							
							<div class="doCard">
								<h2 class="card doHead">Consultancy</h2>	
								<h3 class="card" style="margin-top:1.5vh;"> 
									We launch and scale new innovation as early-stage brand partners from conceptualization through hyper-growth.
								</h3>		
							</div>		
						</div>	

						<div class="doCell">
							<img class="card" 
								 src="assets/images/icons/service-icon.png" 
								 style="height:15vw; width:15vw; object-fit:contain; mix-blend-mode:multiply; z-index:100 !important;"
								 alt="Studio icon">
							
							<div class="doCard">
								<h2 class="card doHead">Studio</h2>	
								<h3 class="card" style="margin-top:1.5vh;"> 
									We pilot and manage our own portfolio of consumer products in the CPG and software spaces. 
								</h3>		
							</div>		
						</div>		
					</section> 		

					<!-- SLIDE 2: How We Do It Section -->
					<section class="section pSection" id="slide-2" aria-label="How We Do It">
						<div class="caption3"><h3>how we do it</h3></div>   
						
						<div class="containtick2">
							<div class="ticker2">
								<div class="js-ticker">
									<div class="wrapper">
										<li><h1>Innovation Roadmap & Planning</h1></li> 
										<li><h1><picture><source srcset="assets/images/separators/list-separator.webp" type="image/webp"><img src="assets/images/separators/list-separator.png" style="width:50px; mix-blend-mode:multiply; object-fit:contain;" alt="Separator"></picture></h1></li>
										<li><h1>Naming & Brand Architecture</h1></li>  
										<li><h1><picture><source srcset="assets/images/separators/list-separator.webp" type="image/webp"><img src="assets/images/separators/list-separator.png" style="width:50px; mix-blend-mode:multiply; object-fit:contain;" alt="Separator"></picture></h1></li>	
										<li><h1>Product & Brand Research</h1></li>    
										<li><h1><picture><source srcset="assets/images/separators/list-separator.webp" type="image/webp"><img src="assets/images/separators/list-separator.png" style="width:50px; mix-blend-mode:multiply; object-fit:contain;" alt="Separator"></picture></h1></li>	
										<li><h1>Go-to-Market Strategy</h1></li> 
										<li><h1><picture><source srcset="assets/images/separators/list-separator.webp" type="image/webp"><img src="assets/images/separators/list-separator.png" style="width:50px; mix-blend-mode:multiply; object-fit:contain;" alt="Separator"></picture></h1></li>	
										<li><h1>Brand Voice & Visual Identity</h1></li> 
										<li><h1><picture><source srcset="assets/images/separators/list-separator.webp" type="image/webp"><img src="assets/images/separators/list-separator.png" style="width:50px; mix-blend-mode:multiply; object-fit:contain;" alt="Separator"></picture></h1></li>	
										<li><h1>Digital Design & Implementation</h1></li> 	
										<li><h1>Activation & Channel Management</h1></li> 		
										<li><h1><picture><source srcset="assets/images/separators/list-separator.webp" type="image/webp"><img src="assets/images/separators/list-separator.png" style="width:50px; mix-blend-mode:multiply; object-fit:contain;" alt="Separator"></picture></h1></li>	
									</div>
								</div> 
							</div> 
						</div>
						
						<div class="conCard">
							<div style="padding:5%;">
								<h2 class="card">Vision</h2>
								<h3 class="card" style="margin-top:4vh;"> 
									We start by defining the consumer: who they are, what they want, why they purchase. From this profile, we develop branding and marketing strategies that convert your vision into value.
								</h3>	
							</div>		
						</div>	
					</section>   

					<!-- Interactive Drawing Canvas Section -->
					<div style="position:relative; height:auto; overflow:visible; z-index:20 !important; background: #FFFFFF;">
						<div class="card" id="sketcher" aria-label="Interactive drawing canvas"></div>
					</div>

					<!-- SLIDE 3: Why We Do It Section -->
					<section class="section" id="slide-3" style="padding-top:25vh; padding-bottom:5vh;" aria-label="Why We Do It">
						<div class="caption3"><h3>why we do it</h3></div>   
						
						<div style="width:90vw; margin-left:5vw;">
							<h2 class="largeType card" style="text-align:center;">
								We are galvanized by growth.<br><br>
							</h2>	
							<h2 class="largeType card" style="text-align:center;">	
								From initial ideation through rapid experimentation or large-scale change management, Cardboard Toast rises to every challenge with you. Together, we turn your ambitious objectives and goals into tangible wins.
							</h2>	
						</div>		
					</section> 

					<!-- Background Image Section -->
					<div class="section2">
						<picture>
                    <source srcset="assets/images/hero/content-image.webp" type="image/webp">
                    <img src="assets/images/hero/content-image.png" 
                             style="position:relative; width:80vw; object-fit:contain; opacity:0;" 
                             class="card2" alt="Growth visualization">
                    </picture>
					</div>				

					<!-- SLIDE 4: Select Engagements Section -->
					<section class="section" id="slide-4" aria-label="Select Engagements">
						<div class="caption3"><h3>select engagements</h3></div>   

						<div class="conCard">
							<div style="padding:5%;">
								<h2 class="card">
									Our world-class partners share our passion for iterative problem-solving - no matter how big or small.
								</h2>
							</div>		
						</div>	

						<div style="width:80vw; margin-left:10vw; display:flex; flex-wrap:wrap; justify-content:space-evenly; position:relative; mix-blend-mode:multiply;">
							
							<div class="logo card">
								<picture>
					<source srcset="assets/images/clients/moet.webp" type="image/webp">
					<img src="assets/images/clients/moet.jpg" style="width:100%; height:100%; object-fit:contain;" alt="Moet logo">
				</picture>
							</div>
							
							<div class="logo card">	
								<picture>
									<source srcset="assets/images/clients/Almave.webp" type="image/webp">
									<img src="assets/images/clients/Almave.jpg" style="width:100%; height:100%; object-fit:contain;" alt="Almave client logo">
								</picture>
							</div>
							
							<div class="logo card">
								<picture>
					<source srcset="assets/images/clients/abinbev.webp" type="image/webp">
					<img src="assets/images/clients/abinbev.jpg" style="width:100%; height:100%; object-fit:contain;" alt="ABInBev logo">
				</picture>
							</div>
							
							<div class="logo card">	
								<picture>
									<source srcset="assets/images/clients/the-drinkery.webp" type="image/webp">
									<img src="assets/images/clients/the-drinkery.png" style="width:100%; height:100%; object-fit:contain;" alt="The Drinkery logo">
								</picture>
							</div>

							<div class="logo card">	
								<picture>
                        <source srcset="assets/images/clients/dunkinspiked.webp" type="image/webp">
                        <img src="assets/images/clients/dunkinspiked.png" style="width:100%; height:100%; object-fit:contain;" alt="Dunkin' Spiked logo">
                    </picture>
							</div>	
							
							<div class="logo card">
								<picture>
					<source srcset="assets/images/clients/mcacao.webp" type="image/webp">
					<img src="assets/images/clients/mcacao.jpg" style="width:100%; height:100%; object-fit:contain;" alt="mcacao logo">
				</picture>
							</div>

							<div class="logo card">	
								<picture>
					<source srcset="assets/images/clients/harpoon-logo.webp" type="image/webp">
					<img src="assets/images/clients/harpoon-logo.png" style="width:100%; height:100%; object-fit:contain;" alt="Harpoon logo">
				</picture>
							</div>	
							
							<div class="logo card">
								<picture>
					<source srcset="assets/images/clients/une-femme.webp" type="image/webp">
					<img src="assets/images/clients/une-femme.jpg" style="width:100%; height:100%; object-fit:contain;" alt="Une Femme logo">
				</picture>
							</div>	
							
							<div class="logo card">	
								<picture>
					<source srcset="assets/images/clients/perfectdraft-logo.webp" type="image/webp">
					<img src="assets/images/clients/perfectdraft-logo.png" style="width:100%; height:100%; object-fit:contain;" alt="PerfectDraft logo">
				</picture>
							</div>	
							
							<div class="logo card">
								<picture>
                        <source srcset="assets/images/clients/fable.webp" type="image/webp">
                        <img src="assets/images/clients/fable.jpg" style="width:100%; height:100%; object-fit:contain;" alt="Fable logo">
                    </picture>
							</div>	

							<div class="logo card">
								<picture>
					<source srcset="assets/images/clients/haven.webp" type="image/webp">
					<img src="assets/images/clients/haven.jpg" style="width:100%; height:100%; object-fit:contain;" alt="Haven logo">
				</picture>
							</div>	
							
							<div class="logo card">
								<picture>
					<source srcset="assets/images/clients/well-principled.webp" type="image/webp">
					<img src="assets/images/clients/well-principled.jpg" style="width:100%; height:100%; object-fit:contain;" alt="Well Principled logo">
				</picture>
							</div>		

							<div class="logo card">
								<picture>
					<source srcset="assets/images/clients/good-pharma.webp" type="image/webp">
					<img src="assets/images/clients/good-pharma.jpg" style="width:100%; height:100%; object-fit:contain;" alt="Good Pharma logo">
				</picture>
							</div>		
							
							<div class="logo card">
								<picture>
					<source srcset="assets/images/clients/bodysim.webp" type="image/webp">
					<img src="assets/images/clients/bodysim.png" style="width:100%; height:100%; object-fit:contain;" alt="BODYSIM logo">
				</picture>
							</div>		
							
							<div class="logo card">
								<picture>
					<source srcset="assets/images/clients/casa-rica.webp" type="image/webp">
					<img src="assets/images/clients/casa-rica.jpg" style="width:100%; height:100%; object-fit:contain;" alt="Casa Rica logo">
				</picture>
							</div>		

							<div class="logo card">
								<picture>
					<source srcset="assets/images/clients/our-cellar.webp" type="image/webp">
					<img src="assets/images/clients/our-cellar.jpg" style="width:100%; height:100%; object-fit:contain;" alt="Our Cellar logo">
				</picture>
							</div>		

							<div class="logo card">
								<picture>
					<source srcset="assets/images/clients/viva.webp" type="image/webp">
					<img src="assets/images/clients/viva.jpg" style="width:100%; height:100%; object-fit:contain;" alt="Viva logo">
				</picture>
							</div>		

							<div class="logo card">	
								<picture>
					<source srcset="assets/images/clients/awsm.webp" type="image/webp">
					<img src="assets/images/clients/awsm.jpg" style="width:100%; height:100%; object-fit:contain;" alt="Awsm logo">
				</picture>
							</div>		
							
						</div>	
					</section> 

					<!-- SLIDE 5: Contact Section -->
					<section class="section" style="display:flex; align-items:center; justify-content:center; width:100vw !important; height:70vh; background:none !important; pointer-events:none !important;" id="slide-5" aria-label="Contact">
						<div class="caption3"><h2></h2></div>   	
						
						<a href="mailto:hello@cardboardtoast.io" style="z-index:100 !important; pointer-events:auto !important;" aria-label="Contact Cardboard Toast via email">
							<h1 class="card" style="color: #FFFFFF;">get in touch!</h1>	
						</a>	  
					</section>	
					
				</div>	<!-- M A I N C O N T E N T -->
			</div>  <!-- M A I N F R A M E -->
		</main>  
	</div>   <!-- S W U P -->

	<!-- Local JavaScript Files -->
	<script src="js/SwupFormsPlugin.js"></script>
	<script src="js/SwupPreloadPlugin.js"></script>
	<script src="js/SplitText.min.js"></script>
	<script src="js/DrawSVGPlugin.min.js"></script>
	<script src="js/ScrambleTextPlugin.min.js"></script>
	<script src="js/ScrollSmoother.min.js"></script>
	<script src="js/InertiaPlugin.min.js"></script>
	<script src="js/header.js"></script>
	<script src="js/script.js"></script>

	<!-- Footer JavaScript (from footer.php) -->
	<script>
		window.addEventListener('load', function () {
			function mainframe() {	     
				if($('.mainframe').hasClass('is-hidden')){
					$('.mainframe').removeClass('is-hidden');
				}else{
					$('.mainframe').removeClass('is-hidden');
				}	
			}	
			mainframe();
			document.addEventListener('swup:contentReplaced', mainframe);		
		});		
	</script>

	<script>
		function lazy(){	
			var lazyLoadInstance = new LazyLoad({});
		}
		lazy();	
		document.addEventListener('swup:contentReplaced', lazy);		
	</script>
		
	<script>	
		const options = {
			cache:true,	
			plugins: [
				new SwupPreloadPlugin(), 
				new SwupFormsPlugin({
					formSelector: 'form'
				}),
			]
		};
		const swup = new Swup(options);
	</script>

	<script>
		document.addEventListener('swup:willReplaceContent', function () {	
			window.scrollTo({
				top: 0
			});
		});
	</script>

	<script>
		function sketcher() {	
			Sketch.create({
				container: document.getElementById( 'sketcher' ),
				autoclear: false,
				retina: 'auto',

				setup: function() {
					console.log( 'setup' );
				},

				update: function() {
					radius = 2 * 40;
				},

				keydown: function() {
					if ( this.keys.C ) this.clear();
				},

				touchmove: function() {
					var COLOURS = [ '#111' ];
					var radius = 3;

					for ( var i = this.touches.length - 1, touch; i >= 0; i-- ) {
						touch = this.touches[i];

						this.lineCap = 'round';
						this.lineJoin = 'round';
						this.fillStyle = this.strokeStyle = COLOURS[ i % COLOURS.length ];
						this.lineWidth = radius;

						this.beginPath();
						this.moveTo( touch.ox, touch.oy );
						this.lineTo( touch.x, touch.y );
						this.stroke();
					}
				}
			});
		}	
		sketcher();		
		document.addEventListener('swup:contentReplaced', sketcher);
	</script>
</body>
</html>