Rebel
Solution Architects
Invention Lab
Locker Room
KREITIV
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Rebel Industries — We create opportunity." /> <title>Rebel Industries — We Create Opportunity</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Inter+Tight:wght@700;800;900&display=swap" rel="stylesheet"> <style> :root{ --b:#000; --w:#fff; --line:rgba(255,255,255,.16); --line-dark:rgba(0,0,0,.14); --muted:rgba(255,255,255,.62); --muted-dark:rgba(0,0,0,.6); --pad:18px; --track-display:-0.055em; --track-heading:-0.045em; --track-body:-0.012em; --track-label:.14em; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:#000; color:#fff; font-family:Inter,Arial,sans-serif; letter-spacing:var(--track-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } a{color:inherit;text-decoration:none} button{font:inherit} img{display:block;max-width:100%} .wrap{padding:0 var(--pad)} .tight{ font-family:"Inter Tight",Inter,sans-serif; font-weight:900; letter-spacing:var(--track-display); line-height:.88; text-transform:uppercase; margin:0; } .eyebrow{ font-size:10px; line-height:1; letter-spacing:var(--track-label); text-transform:uppercase; font-weight:700; opacity:.55; } /* HEADER */ .nav{ position:fixed; top:0;left:0;right:0; z-index:50; background:rgba(0,0,0,.86); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); } .nav-in{ min-height:66px; display:flex; align-items:center; justify-content:space-between; gap:14px; } .brand-lockup{ display:flex; align-items:center; gap:10px; min-width:0; } .brand-signature{ width:48px; height:auto; flex:0 0 auto; object-fit:contain; } .brand{ font-family:"Inter Tight"; font-weight:900; font-size:14px; letter-spacing:var(--track-heading); text-transform:uppercase; white-space:normal; } .menu{ width:40px;height:40px;border-radius:50%; border:1px solid var(--line); background:#000;color:#fff; display:grid;place-items:center; flex:0 0 auto; } .menu span,.menu span:before,.menu span:after{ content:"";display:block;width:15px;height:1.5px;background:#fff;position:relative;transition:.2s; } .menu span:before,.menu span:after{position:absolute;left:0} .menu span:before{top:-5px}.menu span:after{top:5px} .menu.on span{background:transparent} .menu.on span:before{top:0;transform:rotate(45deg)} .menu.on span:after{top:0;transform:rotate(-45deg)} .drawer{ position:fixed; z-index:40; inset:66px 0 0 0; background:#000; padding:22px var(--pad) 40px; transform:translateY(-110%); transition:.3s ease; } .drawer.open{transform:none} .drawer a{ display:flex;justify-content:space-between;align-items:center; padding:18px 0;border-bottom:1px solid var(--line); font-family:"Inter Tight"; font-size:29px; font-weight:900; letter-spacing:var(--track-heading); text-transform:uppercase; } .drawer small{ font:700 9px Inter; letter-spacing:var(--track-label); opacity:.4; } /* HERO */ .hero{ min-height:100svh; padding-top:66px; display:flex; align-items:flex-end; border-bottom:1px solid var(--line); position:relative; overflow:hidden; } .hero::after{ content:"REBEL"; position:absolute; right:-8px; top:18%; writing-mode:vertical-rl; transform:rotate(180deg); font-family:"Inter Tight"; font-size:11px; font-weight:900; letter-spacing:.4em; opacity:.16; } .hero-in{ padding-bottom:30px; width:100%; position:relative; z-index:2; } .hero-title{ font-size:clamp(50px,14.35vw,70px); max-width:100%; } .hero-title span{display:block;white-space:normal} .hero-title .opp{ font-size:.86em; letter-spacing:var(--track-display); } .hero-copy{ margin:20px 0 22px; max-width:92%; color:var(--muted); font-size:15px; line-height:1.46; letter-spacing:var(--track-body); } .cta{ width:100%; min-height:50px; border:1px solid #fff; display:flex; align-items:center; justify-content:space-between; padding:0 15px; text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:.04em; background:#fff; color:#000; } /* SECTIONS */ section{scroll-margin-top:66px} .dark{background:#000;color:#fff;border-bottom:1px solid var(--line)} .light{background:#fff;color:#000;border-bottom:1px solid var(--line-dark)} .pad{padding:74px 0} .big{ font-size:clamp(44px,12.7vw,68px); max-width:100%; } .dim{color:rgba(255,255,255,.2)} .light .dim{color:rgba(0,0,0,.17)} .copy{ margin-top:22px; font-size:16px; line-height:1.5; max-width:93%; color:var(--muted); letter-spacing:var(--track-body); } .light .copy{color:var(--muted-dark)} .slash{ margin-top:24px; display:inline-flex; align-items:center; gap:10px; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .slash::before{content:"//";font-family:"Inter Tight";font-weight:900} /* SCALE */ .scale{margin-top:28px;border-top:1px solid var(--line)} .scale-item{border-bottom:1px solid var(--line)} .scale-head{ display:grid; grid-template-columns:40px 1fr 22px; gap:12px; padding:18px 0; align-items:center; cursor:pointer; } .scale-letter{ font-family:"Inter Tight"; font-size:34px; font-weight:900; letter-spacing:var(--track-heading); } .scale-name{ font-family:"Inter Tight"; font-size:23px; font-weight:900; letter-spacing:var(--track-heading); text-transform:uppercase; } .plus{font-size:22px;transition:.2s} .scale-body{ max-height:0; overflow:hidden; opacity:0; color:var(--muted); font-size:14px; line-height:1.48; padding-left:52px; transition:.25s ease; } .scale-item.open .scale-body{ max-height:110px; opacity:1; padding-bottom:18px } .scale-item.open .plus{transform:rotate(45deg)} /* OPPORTUNITIES */ .opportunities{display:grid;gap:10px;margin-top:28px} .biz{ min-height:250px; border:1px solid var(--line-dark); background:#fff; color:#000; padding:20px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; } .biz::before{ content:""; position:absolute; width:110px; height:110px; border:1px solid rgba(0,0,0,.12); border-radius:50%; right:-32px; top:-32px; } .biz-domain{ font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:lowercase; opacity:.44; } .biz-name{ margin-top:18px; font-family:"Inter Tight"; font-weight:900; font-size:clamp(36px,10.8vw,52px); line-height:.92; letter-spacing:var(--track-display); text-transform:uppercase; max-width:90%; } .biz-copy{ font-size:13px; line-height:1.44; color:var(--muted-dark); max-width:88%; letter-spacing:var(--track-body); } .biz-bottom{ margin-top:32px; display:flex; justify-content:space-between; align-items:end; gap:14px; } .interasia{min-height:400px} .eco{margin-top:22px;border-top:1px solid #000} .eco-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px 0; border-bottom:1px solid #000; font-size:10px; } .eco-row strong{ text-transform:uppercase; letter-spacing:.02em; } .eco-row span{text-align:right;opacity:.5} /* MANIFESTO */ .manifesto{margin-top:30px;border-top:1px solid var(--line)} .manifesto div{ padding:16px 0; border-bottom:1px solid var(--line); font-family:"Inter Tight"; font-size:24px; font-weight:900; letter-spacing:var(--track-heading); line-height:1; text-transform:uppercase; } /* CONTACT */ .contact-block{ margin-top:30px; border-top:1px solid var(--line); } .contact-row{ padding:18px 0; border-bottom:1px solid var(--line); } .contact-label{ font-size:9px; text-transform:uppercase; letter-spacing:var(--track-label); opacity:.45; margin-bottom:8px; } .contact-email{ font-family:"Inter Tight"; font-size:clamp(24px,7vw,34px); font-weight:900; letter-spacing:var(--track-heading); word-break:break-word; } /* FOOTER */ footer{padding:58px 0 24px;background:#000} .foot-title{ font-family:"Inter Tight"; font-size:clamp(46px,14.5vw,70px); font-weight:900; line-height:.86; letter-spacing:var(--track-display); text-transform:uppercase; } .foot-links{display:grid;gap:10px;margin-top:30px} .foot-links a{font-size:13px;color:rgba(255,255,255,.6)} .foot-bottom{ margin-top:38px; padding-top:14px; border-top:1px solid var(--line); display:grid; gap:7px; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.42) } .reveal{ opacity:0; transform:translateY(16px); transition:.55s cubic-bezier(.2,.75,.2,1) } .reveal.show{opacity:1;transform:none} @media(max-width:390px){ :root{--pad:17px} .brand-signature{width:44px} .brand{font-size:13px} .hero-title{font-size:clamp(47px,13.9vw,58px)} .hero-title .opp{font-size:.84em} } @media(min-width:700px){ :root{--pad:34px} .brand-signature{width:58px} .brand{font-size:15px} .hero-title{font-size:clamp(76px,10vw,120px)} .cta{width:auto;min-width:230px} .opportunities{grid-template-columns:1fr 1fr} .interasia{grid-row:span 2} } </style> <style id="mobile-first-rebel-overrides"> :root{ --pad:16px !important; } html,body{ max-width:100%; overflow-x:hidden; } .wrap{ width:100%; max-width:100%; padding-left:var(--pad) !important; padding-right:var(--pad) !important; } .nav-in{ min-height:54px !important; gap:8px !important; } .brand-lockup{ min-width:0 !important; max-width:calc(100vw - 76px) !important; } .brand{ font-size:11px !important; letter-spacing:-0.03em !important; overflow:hidden; text-overflow:ellipsis; white-space:normal; } .brand-sub{ font-size:5.5px !important; letter-spacing:.10em !important; overflow:hidden; text-overflow:ellipsis; white-space:normal; } .menu{ width:32px !important; height:32px !important; flex:0 0 32px !important; } .drawer{ inset:54px 0 0 0 !important; } section{ scroll-margin-top:54px !important; } .hero{ padding-top:54px !important; min-height:auto !important; padding-bottom:26px; } .hero-in{ padding-top:28px !important; padding-bottom:8px !important; } .hero-title, .big, .foot-title, .tight{ max-width:100% !important; overflow-wrap:normal; word-break:normal; hyphens:none; } .hero-title{ font-size:clamp(42px, 12.6vw, 54px) !important; line-height:.90 !important; letter-spacing:-0.055em !important; } .hero-title span{ display:block; white-space:normal !important; } .big{ font-size:clamp(40px, 11.8vw, 52px) !important; line-height:.91 !important; } .foot-title{ font-size:clamp(42px, 12.5vw, 56px) !important; line-height:.89 !important; } .copy, .hero-copy{ max-width:100% !important; font-size:14px !important; line-height:1.5 !important; } .eyebrow{ font-size:9px !important; letter-spacing:.12em !important; line-height:1.25 !important; } .cta{ width:100% !important; min-height:48px !important; } .opportunity-card, .card, .feature, .step-card{ min-width:0 !important; } @media (max-width:360px){ :root{ --pad:14px !important; } .hero-title{ font-size:clamp(38px, 12.4vw, 47px) !important; } .big{ font-size:clamp(37px, 11.6vw, 46px) !important; } .foot-title{ font-size:clamp(39px, 12vw, 49px) !important; } .brand{ font-size:10.5px !important; } } @media (min-width:700px){ :root{ --pad:28px !important; } .hero-title{ font-size:clamp(64px, 9vw, 96px) !important; } .big{ font-size:clamp(58px, 7vw, 80px) !important; } .foot-title{ font-size:clamp(62px, 8vw, 88px) !important; } } .brand-signature{filter:drop-shadow(0.3px 0 0 #fff) drop-shadow(-0.3px 0 0 #fff) drop-shadow(0 0.3px 0 #fff) drop-shadow(0 -0.3px 0 #fff) !important} @media (max-width:699px){ html{-webkit-text-size-adjust:100%} .nav{padding-top:env(safe-area-inset-top)} .brand{font-size:12px !important;line-height:1.05} .brand-sub{font-size:7px !important;opacity:.6} .menu{width:40px !important;height:40px !important;flex:0 0 40px !important} .hero-in{padding-top:40px !important;padding-bottom:20px !important} .hero-copy{margin:18px 0 22px !important} .pad{padding:56px 0 !important} .scale-head{grid-template-columns:34px minmax(0,1fr) 22px !important;padding:16px 0 !important;min-height:48px} .scale-letter{font-size:28px !important} .scale-name{font-size:19px !important;line-height:1.05;min-width:0;overflow-wrap:anywhere} .scale-body{padding-left:46px !important;font-size:14px !important} .scale-item.open .scale-body{max-height:260px !important} .opportunities{gap:12px !important} .biz{min-height:0 !important;padding:22px 18px !important} .biz-name{max-width:100% !important;overflow-wrap:anywhere} .biz-copy{max-width:100% !important;font-size:14px !important} .biz-bottom{margin-top:26px !important;flex-wrap:wrap} .manifesto div{font-size:20px !important;padding:14px 0 !important} .contact-email{font-size:clamp(20px,6.6vw,28px) !important;overflow-wrap:anywhere} .foot-links a{display:block;padding:6px 0;font-size:14px !important} footer{padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important} .drawer a{font-size:24px !important;padding:16px 0 !important} } </style> </head> <body> <header class="nav"> <div class="wrap nav-in"> <a class="brand-lockup" href="#top" aria-label="Rebel Industries home"> <img class="brand-signature" src="https://res.cloudinary.com/dcyztqho1/image/upload/v1787435002/rebel_logo_white_transparent_nbub31.png" alt="Rebel signature" /> <span class="brand">REBEL INDUSTRIES</span> </a> <button class="menu" aria-label="Menu" aria-expanded="false"> <span></span> </button> </div> </header> <nav class="drawer" aria-hidden="true"> <a href="#method"><span>SCALE</span><small>01</small></a> <a href="#opportunities"><span>Opportunities</span><small>02</small></a> <a href="#about"><span>About</span><small>03</small></a> <a href="#contact"><span>Contact</span><small>04</small></a> </nav> <main id="top"> <section class="hero"> <div class="wrap hero-in"> <div class="eyebrow reveal"> Spot The Gap / Build The Solution / Create The Opportunity </div> <h1 class="tight hero-title reveal" style="margin-top:15px"> <span>Opportunity Doesn't</span> <span class="opp">Arrive.</span> <span>We Build It.</span> </h1> <p class="hero-copy reveal"> We spot what's missing and question what's accepted. Then we develop the opportunity, system or idea that should exist. </p> <a class="cta reveal" href="#opportunities"> <span>Enter Rebel</span> <span>↘</span> </a> </div> </section> <section class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">Why Rebel exists</div> <h2 class="tight big reveal" style="margin-top:14px"> We were built to close the gap </h2> <h2 class="tight big reveal" style="margin-top:8px"> <span class="dim">between what exists and what should exist.</span> </h2> <p class="copy reveal"> Where others see uncertainty, we look for ways forward. Where the market leaves a gap, we ask if there's an opportunity to meet a need. Then we build it. </p> <div class="slash reveal">Act before the answer is obvious.</div> </div> </section> <section id="method" class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">The Rebel Method</div> <h2 class="tight big reveal" style="margin-top:14px"> S.C.A.L.E. </h2> <p class="copy reveal"> How something we notice becomes a working business idea. </p> <div class="scale reveal"> <div class="scale-item open"> <div class="scale-head"> <div class="scale-letter">S</div> <div class="scale-name">See</div> <div class="plus">+</div> </div> <div class="scale-body"> Find the unmet need before a market forms around it. </div> </div> <div class="scale-item"> <div class="scale-head"> <div class="scale-letter">C</div> <div class="scale-name">Challenge</div> <div class="plus">+</div> </div> <div class="scale-body"> Challenge the belief that keeps the problem unsolved. </div> </div> <div class="scale-item"> <div class="scale-head"> <div class="scale-letter">A</div> <div class="scale-name">Architect</div> <div class="plus">+</div> </div> <div class="scale-body"> Turn what you've learned into an opportunity, a system and a plan to reach customers. </div> </div> <div class="scale-item"> <div class="scale-head"> <div class="scale-letter">L</div> <div class="scale-name">Launch</div> <div class="plus">+</div> </div> <div class="scale-body"> Stop talking about it. Put it to work. </div> </div> <div class="scale-item"> <div class="scale-head"> <div class="scale-letter">E</div> <div class="scale-name">Expand</div> <div class="plus">+</div> </div> <div class="scale-body"> Prove it works. Make it stronger. Make it hard to ignore. </div> </div> </div> </div> </section> <section id="opportunities" class="light"> <div class="wrap pad"> <div class="eyebrow reveal">Built By Rebel</div> <h2 class="tight big reveal" style="margin-top:14px"> Ideas are everywhere.<br/><span class="dim">We make them real.</span> </h2> <div class="opportunities"> <a class="biz reveal" href="javascript:parent.RebelRouter.open('solution')"> <div> <div class="biz-domain">solutionarchitects.global</div> <div class="biz-name">Solution<br>Architects</div> </div> <div class="biz-bottom"> <div class="biz-copy"> When the answer isn't clear, we build a plan to move forward. </div> <div>↗</div> </div> </a> <a class="biz reveal" href="javascript:parent.RebelRouter.open('invention')"> <div> <div class="biz-domain">inventionlab.global</div> <div class="biz-name">Invention<br>Lab</div> </div> <div class="biz-bottom"> <div class="biz-copy"> Turn everyday problems into useful products, systems and opportunities. </div> <div>↗</div> </div> </a> <a class="biz reveal" href="javascript:parent.RebelRouter.open('locker')"> <div> <div class="biz-domain">lockerroom.global</div> <div class="biz-name">Locker<br>Room</div> </div> <div class="biz-bottom"> <div class="biz-copy"> The stories behind sport — not just the score. </div> <div>↗</div> </div> </a> <a class="biz reveal" href="javascript:parent.RebelRouter.open('kreitiv')"> <div> <div class="biz-domain">kreitiv.global</div> <div class="biz-name">KREITIV</div> </div> <div class="biz-bottom"> <div class="biz-copy"> Creative work that changes minds, drives action or builds momentum. </div> <div>↗</div> </div> </a> </div> </div> </section> <section id="about" class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">The Rebel Position</div> <h2 class="tight big reveal" style="margin-top:14px"> No playbook?<br><span class="dim">Good.</span> </h2> <p class="copy reveal"> We're at our best when the path is unclear and no one has taken the opportunity. Someone has to act first. </p> <div class="manifesto reveal"> <div>Notice what others overlook.</div> <div>Question the answer everyone stopped questioning.</div> <div>An idea means nothing until it works in the real world.</div> <div>Once everyone sees the opportunity, your head start is already shrinking.</div> </div> </div> </section> <section id="contact" class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">Bring Us The Hard Problem</div> <h2 class="tight big reveal" style="margin-top:14px"> No easy answer?<br/><span class="dim">Now we're interested.</span> </h2> <div class="contact-block reveal"> <div class="contact-row"> <div class="contact-label">Email</div> <a class="contact-email" href="mailto:hello@rebelindustries.global"> hello@rebelindustries.global </a> </div> </div> </div> </section> </main> <footer> <div class="wrap"> <div class="eyebrow">Rebel Industries</div> <div class="foot-title" style="margin-top:10px"> Create.<br>Control.<br>Move. </div> <div class="foot-links"> <a href="javascript:parent.RebelRouter.open('solution')">Solution Architects</a> <a href="javascript:parent.RebelRouter.open('invention')">Invention Lab</a> <a href="javascript:parent.RebelRouter.open('locker')">Locker Room</a> <a href="javascript:parent.RebelRouter.open('kreitiv')">KREITIV</a> <a href="mailto:hello@rebelindustries.global">hello@rebelindustries.global</a> </div> <div class="foot-bottom"> <span>© 2026 Rebel Industries</span> <span>Black. White. Nothing extra.</span> </div> </div> </footer> <script> const btn = document.querySelector('.menu'); const drawer = document.querySelector('.drawer'); btn.addEventListener('click',()=>{ const open = drawer.classList.toggle('open'); btn.classList.toggle('on',open); btn.setAttribute('aria-expanded',open); drawer.setAttribute('aria-hidden',!open); document.body.style.overflow = open ? 'hidden' : ''; }); drawer.querySelectorAll('a').forEach(a=>{ a.addEventListener('click',()=>{ drawer.classList.remove('open'); btn.classList.remove('on'); btn.setAttribute('aria-expanded','false'); drawer.setAttribute('aria-hidden','true'); document.body.style.overflow=''; }); }); document.querySelectorAll('.scale-item').forEach(item=>{ item.querySelector('.scale-head').addEventListener('click',()=>{ document.querySelectorAll('.scale-item').forEach(i=>{ if(i!==item) i.classList.remove('open'); }); item.classList.toggle('open'); }); }); const obs = new IntersectionObserver((entries)=>{ entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('show'); obs.unobserve(e.target); } }); },{threshold:.08}); document.querySelectorAll('.reveal').forEach(el=>obs.observe(el)); </script> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Solution Architects — Complex problems need better architecture." /> <title>Solution Architects — Complex Problems. Designed Solutions.</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Inter+Tight:wght@700;800;900&display=swap" rel="stylesheet"> <style> :root{ --b:#000; --w:#fff; --line:rgba(255,255,255,.16); --line-dark:rgba(0,0,0,.14); --muted:rgba(255,255,255,.62); --muted-dark:rgba(0,0,0,.6); --pad:18px; --track-display:-0.055em; --track-heading:-0.045em; --track-body:-0.012em; --track-label:.14em; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:#000; color:#fff; font-family:Inter,Arial,sans-serif; letter-spacing:var(--track-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit;text-decoration:none} button{font:inherit} .wrap{padding:0 var(--pad)} .tight{ font-family:"Inter Tight",Inter,sans-serif; font-weight:900; letter-spacing:var(--track-display); line-height:.88; text-transform:uppercase; margin:0; } .eyebrow{ font-size:10px; line-height:1; letter-spacing:var(--track-label); text-transform:uppercase; font-weight:700; opacity:.55; } /* HEADER */ .nav{ position:fixed; top:0;left:0;right:0; z-index:50; background:rgba(0,0,0,.88); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); } .nav-in{ min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:10px; } .brand-lockup{ display:flex; flex-direction:column; gap:1px; min-width:0; max-width:calc(100vw - 86px); } .brand{ font-family:"Inter Tight"; font-weight:900; font-size:12px; letter-spacing:-0.035em; text-transform:uppercase; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .brand-sub{ font-size:6px; letter-spacing:.12em; text-transform:uppercase; opacity:.42; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .menu{ width:34px;height:34px;border-radius:50%; border:1px solid var(--line); background:#000;color:#fff; display:grid;place-items:center; } .menu span,.menu span:before,.menu span:after{ content:"";display:block;width:15px;height:1.5px;background:#fff;position:relative;transition:.2s; } .menu span:before,.menu span:after{position:absolute;left:0} .menu span:before{top:-5px}.menu span:after{top:5px} .menu.on span{background:transparent} .menu.on span:before{top:0;transform:rotate(45deg)} .menu.on span:after{top:0;transform:rotate(-45deg)} .drawer{ position:fixed; z-index:40; inset:56px 0 0 0; background:#000; padding:22px var(--pad) 40px; transform:translateY(-110%); transition:.3s ease; } .drawer.open{transform:none} .drawer a{ display:flex;justify-content:space-between;align-items:center; padding:18px 0;border-bottom:1px solid var(--line); font-family:"Inter Tight"; font-size:28px; font-weight:900; letter-spacing:var(--track-heading); text-transform:uppercase; } .drawer small{ font:700 9px Inter; letter-spacing:var(--track-label); opacity:.4; } /* HERO */ .hero{ min-height:100svh; padding-top:56px; display:flex; align-items:flex-end; border-bottom:1px solid var(--line); position:relative; overflow:hidden; } .hero::before{ content:""; position:absolute; width:92vw;height:92vw; max-width:460px;max-height:460px; right:-42vw;top:16%; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow: 0 0 0 46px rgba(255,255,255,.02), 0 0 0 92px rgba(255,255,255,.012); } .hero-in{ padding-bottom:30px; width:100%; position:relative; z-index:2; } .hero-title{ font-size:clamp(48px,13.8vw,68px); max-width:100%; } .hero-title span{display:block;white-space:nowrap} .hero-copy{ margin:20px 0 22px; max-width:92%; color:var(--muted); font-size:15px; line-height:1.46; } .cta{ width:100%; min-height:50px; border:1px solid #fff; display:flex;align-items:center;justify-content:space-between; padding:0 15px; text-transform:uppercase; font-size:12px;font-weight:800; letter-spacing:.04em; background:#fff;color:#000; } /* SECTIONS */ section{scroll-margin-top:56px} .dark{background:#000;color:#fff;border-bottom:1px solid var(--line)} .light{background:#fff;color:#000;border-bottom:1px solid var(--line-dark)} .pad{padding:74px 0} .big{ font-size:clamp(44px,12.7vw,68px); max-width:100%; } .dim{color:rgba(255,255,255,.2)} .light .dim{color:rgba(0,0,0,.17)} .copy{ margin-top:22px; font-size:16px; line-height:1.5; max-width:93%; color:var(--muted); letter-spacing:var(--track-body); } .light .copy{color:var(--muted-dark)} /* CAPABILITIES */ .caps{ margin-top:28px; border-top:1px solid var(--line); } .cap{ padding:18px 0; border-bottom:1px solid var(--line); } .cap-head{ display:flex; align-items:center; justify-content:space-between; gap:18px; } .cap-title{ font-family:"Inter Tight"; font-size:24px; font-weight:900; letter-spacing:var(--track-heading); text-transform:uppercase; line-height:1; } .cap-copy{ margin-top:9px; color:var(--muted); font-size:14px; line-height:1.45; max-width:92%; } /* HOW WE WORK */ .steps{ margin-top:28px; display:grid; gap:10px; } .step{ border:1px solid var(--line-dark); background:#fff; color:#000; padding:20px; min-height:250px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; } .step::before{ content:""; position:absolute; width:110px;height:110px; border:1px solid rgba(0,0,0,.12); border-radius:50%; right:-32px;top:-32px; } .step-no{ font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.44; } .step h3{ margin:18px 0 0; font-family:"Inter Tight"; font-size:clamp(36px,10.8vw,52px); line-height:.92; letter-spacing:var(--track-display); text-transform:uppercase; max-width:90%; } .step p{ margin:20px 0 0; font-size:13px; line-height:1.44; color:var(--muted-dark); max-width:88%; letter-spacing:var(--track-body); } /* PRINCIPLES */ .principles{ margin-top:30px; border-top:1px solid var(--line); } .principles div{ padding:16px 0; border-bottom:1px solid var(--line); font-family:"Inter Tight"; font-size:24px; font-weight:900; letter-spacing:var(--track-heading); line-height:1; text-transform:uppercase; } /* CONTACT */ .contact-block{ margin-top:30px; border-top:1px solid var(--line); } .contact-row{ padding:18px 0; border-bottom:1px solid var(--line); } .contact-label{ font-size:9px; text-transform:uppercase; letter-spacing:var(--track-label); opacity:.45; margin-bottom:8px; } .contact-email{ font-family:"Inter Tight"; font-size:clamp(24px,7vw,34px); font-weight:900; letter-spacing:var(--track-heading); word-break:break-word; } /* FOOTER */ footer{padding:58px 0 24px;background:#000} .foot-title{ font-family:"Inter Tight"; font-size:clamp(44px,13vw,64px); font-weight:900; line-height:.86; letter-spacing:var(--track-display); text-transform:uppercase; } .foot-links{display:grid;gap:10px;margin-top:30px} .foot-links a{font-size:13px;color:rgba(255,255,255,.6)} .foot-bottom{ margin-top:38px; padding-top:14px; border-top:1px solid var(--line); display:grid; gap:7px; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.42) } .reveal{opacity:0;transform:translateY(16px);transition:.55s cubic-bezier(.2,.75,.2,1)} .reveal.show{opacity:1;transform:none} @media(max-width:390px){ :root{--pad:16px} .nav-in{min-height:54px} .brand-lockup{max-width:calc(100vw - 78px)} .brand{font-size:11px;letter-spacing:-0.03em} .brand-sub{font-size:5.5px;letter-spacing:.1em} .menu{width:32px;height:32px} .drawer{inset:54px 0 0 0} .hero{padding-top:54px} section{scroll-margin-top:54px} .hero-title{font-size:clamp(44px,13vw,54px)} } @media(min-width:700px){ :root{--pad:34px} .hero-title{font-size:clamp(74px,9.5vw,116px)} .cta{width:auto;min-width:230px} .steps{grid-template-columns:1fr 1fr} } </style> </head> <body> <header class="nav"> <div class="wrap nav-in"> <a class="brand-lockup" href="#top"> <span class="brand">SOLUTION ARCHITECTS</span> <span class="brand-sub">A Rebel Industries Opportunity</span> </a> <button class="menu" aria-label="Menu" aria-expanded="false"> <span></span> </button> </div> </header> <nav class="drawer" aria-hidden="true"> <a href="#what"><span>What We Solve</span><small>01</small></a> <a href="#how"><span>How We Work</span><small>02</small></a> <a href="#about"><span>Principles</span><small>03</small></a> <a href="#contact"><span>Contact</span><small>04</small></a> <a href="javascript:parent.RebelRouter.open('rebel')"><span>Rebel Industries</span><small>↖</small></a> </nav> <main id="top"> <section class="hero"> <div class="wrap hero-in"> <div class="eyebrow reveal">Complex Problems / Personal Pressure / Clear Plans</div> <h1 class="tight hero-title reveal" style="margin-top:15px"> <span>Complex Problems.</span> <span>Clear</span> <span>Answers.</span> </h1> <p class="hero-copy reveal"> We help when easy answers no longer work — when people face pressure, opportunities are at risk or situations get difficult. </p> <a class="cta reveal" href="#what"> <span>See What We Solve</span> <span>↘</span> </a> </div> </section> <section class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">The point</div> <h2 class="tight big reveal" style="margin-top:14px"> We don't spin it.<br/><span class="dim">We solve it.</span> </h2> <p class="copy reveal"> We make them easier to understand, manage and resolve. </p> </div> </section> <section id="what" class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">What We Solve</div> <h2 class="tight big reveal" style="margin-top:14px"> Pressure?<br/><span class="dim">We get clearer.</span> </h2> <div class="caps reveal"> <div class="cap"> <div class="cap-head"><div class="cap-title">Crisis</div><div>01</div></div> <div class="cap-copy">When things are moving too fast for you to manage.</div> </div> <div class="cap"> <div class="cap-head"><div class="cap-title">Reputation</div><div>02</div></div> <div class="cap-copy">When how others see you starts affecting your life, work, relationships or business.</div> </div> <div class="cap"> <div class="cap-head"><div class="cap-title">Risk</div><div>03</div></div> <div class="cap-copy">When you need to understand, reduce or limit the risks you face.</div> </div> <div class="cap"> <div class="cap-head"><div class="cap-title">Negotiation</div><div>04</div></div> <div class="cap-copy">When success depends on using your strengths, choosing the right time and having a clear plan.</div> </div> <div class="cap"> <div class="cap-head"><div class="cap-title">Strategic Resolution</div><div>05</div></div> <div class="cap-copy">When there's no clear way out and you need a plan.</div> </div> </div> </div> </section> <section class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">Who We Help</div> <h2 class="tight big reveal" style="margin-top:14px"> People first.<br><span class="dim">Problems second.</span> </h2> <p class="copy reveal"> Individuals. Founders. Executives. Families. Public figures. Boards. Teams. And the opportunities they face. </p> <p class="copy reveal"> It's not about who you are. It's about facing a complicated situation that matters — and needing a better way to deal with it. </p> </div> </section> <section id="how" class="light"> <div class="wrap pad"> <div class="eyebrow reveal">How We Work</div> <h2 class="tight big reveal" style="margin-top:14px"> No theatre.<br><span class="dim">Just architecture.</span> </h2> <div class="steps"> <div class="step reveal"> <div> <div class="step-no">01 / Diagnose</div> <h3>Find the real problem.</h3> </div> <p>Find the real problem. Cut through the distractions.</p> </div> <div class="step reveal"> <div> <div class="step-no">02 / Structure</div> <h3>Plan the response.</h3> </div> <p>Set the steps. Use your strengths. Stay in control.</p> </div> <div class="step reveal"> <div> <div class="step-no">03 / Execute</div> <h3>Act decisively.</h3> </div> <p>Act. Good thinking means nothing unless you follow through.</p> </div> <div class="step reveal"> <div> <div class="step-no">04 / Resolve</div> <h3>See it through.</h3> </div> <p>See it through. Being busy isn't the same as getting results.</p> </div> </div> </div> </section> <section id="about" class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">Principles</div> <h2 class="tight big reveal" style="margin-top:14px"> Calm when it <span class="dim">counts.</span> </h2> <div class="principles reveal"> <div>Control the sequence.</div> <div>Understand the leverage.</div> <div>Say less. Mean more.</div> <div>Being busy isn't the same as making progress.</div> </div> </div> </section> <section id="contact" class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">Contact</div> <h2 class="tight big reveal" style="margin-top:14px"> Got a problem?<br/><span class="dim">Bring it.</span> </h2> <div class="contact-block reveal"> <div class="contact-row"> <div class="contact-label">Email</div> <a class="contact-email" href="mailto:hello@solutionarchitects.global"> hello@solutionarchitects.global </a> </div> </div> </div> </section> </main> <footer> <div class="wrap"> <div class="eyebrow">Solution Architects</div> <div class="foot-title" style="margin-top:10px"> Clear.<br/>Calm.<br/>Resolved. </div> <div class="foot-links"> <a href="javascript:parent.RebelRouter.open('solution')">solutionarchitects.global</a> <a href="javascript:parent.RebelRouter.open('rebel')">Rebel Industries</a> </div> <div class="foot-bottom"> <span>© 2026 Solution Architects</span> <span>A Rebel Industries Opportunity</span> </div> </div> </footer> <script> const btn = document.querySelector('.menu'); const drawer = document.querySelector('.drawer'); btn.addEventListener('click',()=>{ const open = drawer.classList.toggle('open'); btn.classList.toggle('on',open); btn.setAttribute('aria-expanded',open); drawer.setAttribute('aria-hidden',!open); document.body.style.overflow = open ? 'hidden' : ''; }); drawer.querySelectorAll('a').forEach(a=>{ a.addEventListener('click',()=>{ drawer.classList.remove('open'); btn.classList.remove('on'); btn.setAttribute('aria-expanded','false'); drawer.setAttribute('aria-hidden','true'); document.body.style.overflow=''; }); }); const obs = new IntersectionObserver((entries)=>{ entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('show'); obs.unobserve(e.target); } }); },{threshold:.08}); document.querySelectorAll('.reveal').forEach(el=>obs.observe(el)); </script> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Invention Lab — We turn ideas into working systems." /> <title>Invention Lab — Build What Should Exist</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Inter+Tight:wght@700;800;900&display=swap" rel="stylesheet"> <style> :root{ --b:#000; --w:#fff; --line:rgba(255,255,255,.16); --line-dark:rgba(0,0,0,.14); --muted:rgba(255,255,255,.62); --muted-dark:rgba(0,0,0,.6); --pad:18px; --track-display:-0.055em; --track-heading:-0.045em; --track-body:-0.012em; --track-label:.14em; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:#000; color:#fff; font-family:Inter,Arial,sans-serif; letter-spacing:var(--track-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } a{color:inherit;text-decoration:none} button{font:inherit} .wrap{padding:0 var(--pad)} .tight{ font-family:"Inter Tight",Inter,sans-serif; font-weight:900; letter-spacing:var(--track-display); line-height:.88; text-transform:uppercase; margin:0; } .eyebrow{ font-size:10px; line-height:1; letter-spacing:var(--track-label); text-transform:uppercase; font-weight:700; opacity:.55; } /* HEADER */ .nav{ position:fixed; top:0;left:0;right:0; z-index:50; background:rgba(0,0,0,.88); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); } .nav-in{ min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:10px; } .brand-lockup{ display:flex; flex-direction:column; gap:1px; min-width:0; max-width:calc(100vw - 86px); } .brand{ font-family:"Inter Tight"; font-weight:900; font-size:13px; letter-spacing:var(--track-heading); text-transform:uppercase; line-height:1; white-space:nowrap; } .brand-sub{ font-size:6px; letter-spacing:.12em; text-transform:uppercase; opacity:.42; white-space:nowrap; } .menu{ width:34px;height:34px;border-radius:50%; border:1px solid var(--line); background:#000;color:#fff; display:grid;place-items:center; flex:0 0 auto; } .menu span,.menu span:before,.menu span:after{ content:"";display:block;width:14px;height:1.5px;background:#fff;position:relative;transition:.2s; } .menu span:before,.menu span:after{position:absolute;left:0} .menu span:before{top:-5px}.menu span:after{top:5px} .menu.on span{background:transparent} .menu.on span:before{top:0;transform:rotate(45deg)} .menu.on span:after{top:0;transform:rotate(-45deg)} .drawer{ position:fixed; z-index:40; inset:56px 0 0 0; background:#000; padding:22px var(--pad) 40px; transform:translateY(-110%); transition:.3s ease; } .drawer.open{transform:none} .drawer a{ display:flex;justify-content:space-between;align-items:center; padding:18px 0;border-bottom:1px solid var(--line); font-family:"Inter Tight"; font-size:28px; font-weight:900; letter-spacing:var(--track-heading); text-transform:uppercase; } .drawer small{ font:700 9px Inter; letter-spacing:var(--track-label); opacity:.4; } /* HERO */ .hero{ min-height:100svh; padding-top:56px; display:flex; align-items:flex-end; border-bottom:1px solid var(--line); position:relative; overflow:hidden; } .hero-grid{ position:absolute; inset:56px 0 0; opacity:.12; background: linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 75%); pointer-events:none; } .hero-circle{ position:absolute; width:220px;height:220px; border:1px solid rgba(255,255,255,.16); border-radius:50%; top:17%; right:-95px; } .hero-circle::before, .hero-circle::after{ content:""; position:absolute; border:1px solid rgba(255,255,255,.12); border-radius:50%; inset:26px; } .hero-circle::after{inset:58px} .hero-in{ padding-bottom:30px; width:100%; position:relative; z-index:2; } .hero-title{ font-size:clamp(47px,13.4vw,66px); max-width:100%; } .hero-title span{display:block;white-space:nowrap} .hero-copy{ margin:20px 0 22px; max-width:92%; color:var(--muted); font-size:15px; line-height:1.46; } .cta{ width:100%; min-height:50px; border:1px solid #fff; display:flex; align-items:center; justify-content:space-between; padding:0 15px; text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:.04em; background:#fff; color:#000; } /* SECTIONS */ section{scroll-margin-top:56px} .dark{background:#000;color:#fff;border-bottom:1px solid var(--line)} .light{background:#fff;color:#000;border-bottom:1px solid var(--line-dark)} .pad{padding:74px 0} .big{ font-size:clamp(44px,12.7vw,68px); max-width:100%; } .dim{color:rgba(255,255,255,.2)} .light .dim{color:rgba(0,0,0,.17)} .copy{ margin-top:22px; font-size:16px; line-height:1.5; max-width:93%; color:var(--muted); } .light .copy{color:var(--muted-dark)} /* BUILD LIST */ .build-list{ margin-top:28px; border-top:1px solid var(--line); } .build-row{ padding:18px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:36px 1fr; gap:14px; align-items:start; } .build-no{ font-size:9px; letter-spacing:.12em; opacity:.42; padding-top:4px; } .build-title{ font-family:"Inter Tight"; font-size:24px; font-weight:900; letter-spacing:var(--track-heading); text-transform:uppercase; line-height:1; } .build-copy{ margin-top:7px; color:var(--muted); font-size:14px; line-height:1.45; max-width:94%; } /* PROCESS CARDS */ .process{ display:grid; gap:10px; margin-top:28px; } .process-card{ min-height:250px; border:1px solid var(--line-dark); background:#fff; color:#000; padding:20px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; } .process-card::before{ content:""; position:absolute; width:110px;height:110px; border:1px solid rgba(0,0,0,.12); border-radius:50%; right:-32px;top:-32px; } .process-kicker{ font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.44; } .process-card h3{ margin:18px 0 0; font-family:"Inter Tight"; font-size:clamp(36px,10.8vw,52px); line-height:.92; letter-spacing:var(--track-display); text-transform:uppercase; max-width:90%; } .process-card p{ margin:20px 0 0; font-size:13px; line-height:1.44; color:var(--muted-dark); max-width:88%; } /* PROTOTYPE STRIP */ .prototype{ margin-top:30px; border-top:1px solid var(--line); } .prototype-row{ padding:14px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; } .prototype-name{ font-family:"Inter Tight"; font-size:19px; font-weight:900; letter-spacing:var(--track-heading); text-transform:uppercase; } .prototype-type{ font-size:9px; letter-spacing:.1em; text-transform:uppercase; opacity:.4; text-align:right; } /* MANIFESTO */ .manifesto{ margin-top:30px; border-top:1px solid var(--line); } .manifesto div{ padding:16px 0; border-bottom:1px solid var(--line); font-family:"Inter Tight"; font-size:24px; font-weight:900; letter-spacing:var(--track-heading); line-height:1; text-transform:uppercase; } /* CONTACT */ .contact-block{ margin-top:30px; border-top:1px solid var(--line); } .contact-row{ padding:18px 0; border-bottom:1px solid var(--line); } .contact-label{ font-size:9px; text-transform:uppercase; letter-spacing:var(--track-label); opacity:.45; margin-bottom:8px; } .contact-email{ font-family:"Inter Tight"; font-size:clamp(24px,7vw,34px); font-weight:900; letter-spacing:var(--track-heading); word-break:break-word; } footer{ padding:58px 0 24px; background:#000; } .foot-title{ font-family:"Inter Tight"; font-size:clamp(46px,14vw,68px); font-weight:900; line-height:.86; letter-spacing:var(--track-display); text-transform:uppercase; } .foot-links{ display:grid; gap:10px; margin-top:30px; } .foot-links a{ font-size:13px; color:rgba(255,255,255,.6); } .foot-bottom{ margin-top:38px; padding-top:14px; border-top:1px solid var(--line); display:grid; gap:7px; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.42); } .reveal{ opacity:0; transform:translateY(16px); transition:.55s cubic-bezier(.2,.75,.2,1); } .reveal.show{opacity:1;transform:none} @media(max-width:390px){ :root{--pad:16px} .nav-in{min-height:54px} .brand{font-size:12px} .brand-sub{font-size:5.5px} .menu{width:32px;height:32px} .drawer{inset:54px 0 0 0} .hero{padding-top:54px} section{scroll-margin-top:54px} .hero-title{font-size:clamp(44px,12.9vw,54px)} } @media(min-width:700px){ :root{--pad:34px} .hero-title{font-size:clamp(74px,9.5vw,116px)} .cta{width:auto;min-width:230px} .process{grid-template-columns:1fr 1fr} } </style> </head> <body> <header class="nav"> <div class="wrap nav-in"> <a class="brand-lockup" href="#top"> <span class="brand">INVENTION LAB</span> <span class="brand-sub">A Rebel Industries Opportunity</span> </a> <button class="menu" aria-label="Menu" aria-expanded="false"> <span></span> </button> </div> </header> <nav class="drawer" aria-hidden="true"> <a href="#build"><span>What We Build</span><small>01</small></a> <a href="#process"><span>How We Build</span><small>02</small></a> <a href="#about"><span>About</span><small>03</small></a> <a href="#contact"><span>Contact</span><small>04</small></a> <a href="javascript:parent.RebelRouter.open('rebel')"><span>Rebel Industries</span><small>↖</small></a> </nav> <main id="top"> <section class="hero"> <div class="hero-grid"></div> <div class="hero-circle"></div> <div class="wrap hero-in"> <div class="eyebrow reveal">Products / Platforms / Systems / New Business Models</div> <h1 class="tight hero-title reveal" style="margin-top:15px"> <span>Build What</span> <span>Should Exist.</span> </h1> <p class="hero-copy reveal"> We turn problems, unmet needs and early ideas into products, platforms and systems that work for business. </p> <a class="cta reveal" href="#build"> <span>See What We Build</span> <span>↘</span> </a> </div> </section> <section class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">The point</div> <h2 class="tight big reveal" style="margin-top:14px"> Ideas are cheap.<br/><span class="dim">Working ones aren't.</span> </h2> <p class="copy reveal"> Invention Lab exists to make them work. </p> </div> </section> <section id="build" class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">What We Build</div> <h2 class="tight big reveal" style="margin-top:14px"> From problem<br><span class="dim">to product.</span> </h2> <div class="build-list reveal"> <div class="build-row"> <div class="build-no">01</div> <div> <div class="build-title">Digital Products</div> <div class="build-copy">Useful tools with a clear purpose.</div> </div> </div> <div class="build-row"> <div class="build-no">02</div> <div> <div class="build-title">Platforms</div> <div class="build-copy">Connected systems that coordinate people, services and opportunities.</div> </div> </div> <div class="build-row"> <div class="build-no">03</div> <div> <div class="build-title">Service Systems</div> <div class="build-copy">Better ways to manage tasks, customer relationships and delivery.</div> </div> </div> <div class="build-row"> <div class="build-no">04</div> <div> <div class="build-title">Automation</div> <div class="build-copy">Remove obstacles. Cut repetitive tasks. Keep people involved where it matters.</div> </div> </div> <div class="build-row"> <div class="build-no">05</div> <div> <div class="build-title">Opportunity Models</div> <div class="build-copy">Sometimes the product isn't software. It's a better way to turn an opportunity into a working business.</div> </div> </div> </div> </div> </section> <section id="process" class="light"> <div class="wrap pad"> <div class="eyebrow reveal">How We Build</div> <h2 class="tight big reveal" style="margin-top:14px"> Less theatre.<br><span class="dim">More prototype.</span> </h2> <div class="process"> <div class="process-card reveal"> <div> <div class="process-kicker">01 / Find</div> <h3>Find the obstacles.</h3> </div> <p>Start with what's broken, slow, costly or harder than it needs to be.</p> </div> <div class="process-card reveal"> <div> <div class="process-kicker">02 / Design</div> <h3>Design the solution.</h3> </div> <p>One system for the product, how work gets done, how people use it and how it makes money.</p> </div> <div class="process-card reveal"> <div> <div class="process-kicker">03 / Prototype</div> <h3>Build a test version early.</h3> </div> <p>Build enough to test the idea. Don't waste time perfecting the wrong thing.</p> </div> <div class="process-card reveal"> <div> <div class="process-kicker">04 / Launch</div> <h3>Put it to work.</h3> </div> <p>Let people use it. Learn fast. Improve what matters.</p> </div> </div> </div> </section> <section class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">Built Inside The Lab</div> <h2 class="tight big reveal" style="margin-top:14px"> Real ideas.<br><span class="dim">Real use.</span> </h2> <div class="prototype reveal"> <div class="prototype-row"> <div class="prototype-name">E.C.H.O.</div> <div class="prototype-type">Estate Services Platform</div> </div> <div class="prototype-row"> <div class="prototype-name">ADVOCATE</div> <div class="prototype-type">Legal Technology</div> </div> <div class="prototype-row"> <div class="prototype-name">Digital Service Systems</div> <div class="prototype-type">Operations / CX</div> </div> </div> </div> </section> <section id="about" class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">About Invention Lab</div> <h2 class="tight big reveal" style="margin-top:14px"> We don't workshop it.<br/><span class="dim">We build it.</span> </h2> <div class="manifesto reveal"> <div>If it's useful, build it.</div> <div>Test ideas before taking sides.</div> <div>Making things simple takes technical skill.</div> <div>The real test is whether people use it.</div> </div> </div> </section> <section id="contact" class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">Contact</div> <h2 class="tight big reveal" style="margin-top:14px"> Got an idea?<br/><span class="dim">Let's build it.</span> </h2> <div class="contact-block reveal"> <div class="contact-row"> <div class="contact-label">Email</div> <a class="contact-email" href="mailto:hello@inventionlab.global"> hello@inventionlab.global </a> </div> </div> </div> </section> </main> <footer> <div class="wrap"> <div class="eyebrow">Invention Lab</div> <div class="foot-title" style="margin-top:10px"> Think.<br>Build.<br>Use. </div> <div class="foot-links"> <a href="javascript:parent.RebelRouter.open('invention')">inventionlab.global</a> <a href="javascript:parent.RebelRouter.open('rebel')">Rebel Industries</a> <a href="mailto:hello@inventionlab.global">hello@inventionlab.global</a> </div> <div class="foot-bottom"> <span>© 2026 Invention Lab</span> <span>A Rebel Industries Opportunity</span> </div> </div> </footer> <script> const btn = document.querySelector('.menu'); const drawer = document.querySelector('.drawer'); btn.addEventListener('click',()=>{ const open = drawer.classList.toggle('open'); btn.classList.toggle('on',open); btn.setAttribute('aria-expanded',open); drawer.setAttribute('aria-hidden',!open); document.body.style.overflow = open ? 'hidden' : ''; }); drawer.querySelectorAll('a').forEach(a=>{ a.addEventListener('click',()=>{ drawer.classList.remove('open'); btn.classList.remove('on'); btn.setAttribute('aria-expanded','false'); drawer.setAttribute('aria-hidden','true'); document.body.style.overflow=''; }); }); const obs = new IntersectionObserver((entries)=>{ entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('show'); obs.unobserve(e.target); } }); },{threshold:.08}); document.querySelectorAll('.reveal').forEach(el=>obs.observe(el)); </script> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Locker Room — Sport. People. Culture. Stories." /> <title>Locker Room — The Stories Behind Sport</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Inter+Tight:wght@700;800;900&display=swap" rel="stylesheet"> <style> :root{ --b:#000; --w:#fff; --line:rgba(255,255,255,.16); --line-dark:rgba(0,0,0,.14); --muted:rgba(255,255,255,.62); --muted-dark:rgba(0,0,0,.6); --pad:18px; --track-display:-0.055em; --track-heading:-0.045em; --track-body:-0.012em; --track-label:.14em; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:#000; color:#fff; font-family:Inter,Arial,sans-serif; letter-spacing:var(--track-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit;text-decoration:none} button{font:inherit} .wrap{padding:0 var(--pad)} .tight{ font-family:"Inter Tight",Inter,sans-serif; font-weight:900; letter-spacing:var(--track-display); line-height:.88; text-transform:uppercase; margin:0; } .eyebrow{ font-size:10px; line-height:1; letter-spacing:var(--track-label); text-transform:uppercase; font-weight:700; opacity:.55; } /* HEADER */ .nav{ position:fixed; top:0;left:0;right:0; z-index:50; background:rgba(0,0,0,.88); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); } .nav-in{ min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:10px; } .brand-lockup{ display:flex; flex-direction:column; gap:1px; min-width:0; max-width:calc(100vw - 86px); } .brand{ font-family:"Inter Tight"; font-weight:900; font-size:13px; letter-spacing:var(--track-heading); text-transform:uppercase; line-height:1; white-space:nowrap; } .brand-sub{ font-size:6px; letter-spacing:.12em; text-transform:uppercase; opacity:.42; white-space:nowrap; } .menu{ width:34px;height:34px;border-radius:50%; border:1px solid var(--line); background:#000;color:#fff; display:grid;place-items:center; flex:0 0 auto; } .menu span,.menu span:before,.menu span:after{ content:"";display:block;width:14px;height:1.5px;background:#fff;position:relative;transition:.2s; } .menu span:before,.menu span:after{position:absolute;left:0} .menu span:before{top:-5px}.menu span:after{top:5px} .menu.on span{background:transparent} .menu.on span:before{top:0;transform:rotate(45deg)} .menu.on span:after{top:0;transform:rotate(-45deg)} .drawer{ position:fixed; z-index:40; inset:56px 0 0 0; background:#000; padding:22px var(--pad) 40px; transform:translateY(-110%); transition:.3s ease; } .drawer.open{transform:none} .drawer a{ display:flex;justify-content:space-between;align-items:center; padding:18px 0;border-bottom:1px solid var(--line); font-family:"Inter Tight"; font-size:28px; font-weight:900; letter-spacing:var(--track-heading); text-transform:uppercase; } .drawer small{ font:700 9px Inter; letter-spacing:var(--track-label); opacity:.4; } /* HERO */ .hero{ min-height:100svh; padding-top:56px; display:flex; align-items:flex-end; border-bottom:1px solid var(--line); position:relative; overflow:hidden; } .hero::before{ content:""; position:absolute; left:-35vw; top:15%; width:95vw;height:95vw; max-width:440px;max-height:440px; border:1px solid rgba(255,255,255,.11); border-radius:50%; box-shadow: 0 0 0 46px rgba(255,255,255,.02), 0 0 0 92px rgba(255,255,255,.012); } .hero::after{ content:"LOCKER ROOM"; position:absolute; right:-10px; top:20%; writing-mode:vertical-rl; transform:rotate(180deg); font-family:"Inter Tight"; font-size:10px; font-weight:900; letter-spacing:.35em; opacity:.14; } .hero-in{ padding-bottom:30px; width:100%; position:relative; z-index:2; } .hero-title{ font-size:clamp(47px,13.4vw,66px); max-width:100%; } .hero-title span{display:block;white-space:nowrap} .hero-copy{ margin:20px 0 22px; max-width:92%; color:var(--muted); font-size:15px; line-height:1.46; } .cta{ width:100%; min-height:50px; border:1px solid #fff; display:flex; align-items:center; justify-content:space-between; padding:0 15px; text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:.04em; background:#fff; color:#000; } /* SECTIONS */ section{scroll-margin-top:56px} .dark{background:#000;color:#fff;border-bottom:1px solid var(--line)} .light{background:#fff;color:#000;border-bottom:1px solid var(--line-dark)} .pad{padding:74px 0} .big{ font-size:clamp(44px,12.7vw,68px); max-width:100%; } .dim{color:rgba(255,255,255,.2)} .light .dim{color:rgba(0,0,0,.17)} .copy{ margin-top:22px; font-size:16px; line-height:1.5; max-width:93%; color:var(--muted); } .light .copy{color:var(--muted-dark)} /* STORY CATEGORIES */ .story-list{ margin-top:28px; border-top:1px solid var(--line); } .story-row{ padding:18px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:36px 1fr; gap:14px; align-items:start; } .story-no{ font-size:9px; letter-spacing:.12em; opacity:.42; padding-top:4px; } .story-title{ font-family:"Inter Tight"; font-size:24px; font-weight:900; letter-spacing:var(--track-heading); text-transform:uppercase; line-height:1; } .story-copy{ margin-top:7px; color:var(--muted); font-size:14px; line-height:1.45; max-width:94%; } /* FEATURE CARDS */ .features{ display:grid; gap:10px; margin-top:28px; } .feature{ min-height:270px; border:1px solid var(--line-dark); background:#fff; color:#000; padding:20px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; } .feature::before{ content:""; position:absolute; width:110px;height:110px; border:1px solid rgba(0,0,0,.12); border-radius:50%; right:-32px;top:-32px; } .feature-kicker{ font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.44; } .feature h3{ margin:18px 0 0; font-family:"Inter Tight"; font-size:clamp(36px,10.8vw,52px); line-height:.92; letter-spacing:var(--track-display); text-transform:uppercase; max-width:90%; } .feature p{ margin:20px 0 0; font-size:13px; line-height:1.44; color:var(--muted-dark); max-width:88%; } /* MANIFESTO */ .manifesto{ margin-top:30px; border-top:1px solid var(--line); } .manifesto div{ padding:16px 0; border-bottom:1px solid var(--line); font-family:"Inter Tight"; font-size:24px; font-weight:900; letter-spacing:var(--track-heading); line-height:1; text-transform:uppercase; } /* CONTACT */ .contact-block{ margin-top:30px; border-top:1px solid var(--line); } .contact-row{ padding:18px 0; border-bottom:1px solid var(--line); } .contact-label{ font-size:9px; text-transform:uppercase; letter-spacing:var(--track-label); opacity:.45; margin-bottom:8px; } .contact-email{ font-family:"Inter Tight"; font-size:clamp(24px,7vw,34px); font-weight:900; letter-spacing:var(--track-heading); word-break:break-word; } footer{ padding:58px 0 24px; background:#000; } .foot-title{ font-family:"Inter Tight"; font-size:clamp(46px,14vw,68px); font-weight:900; line-height:.86; letter-spacing:var(--track-display); text-transform:uppercase; } .foot-links{ display:grid; gap:10px; margin-top:30px; } .foot-links a{ font-size:13px; color:rgba(255,255,255,.6); } .foot-bottom{ margin-top:38px; padding-top:14px; border-top:1px solid var(--line); display:grid; gap:7px; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.42); } .reveal{ opacity:0; transform:translateY(16px); transition:.55s cubic-bezier(.2,.75,.2,1); } .reveal.show{opacity:1;transform:none} @media(max-width:390px){ :root{--pad:16px} .nav-in{min-height:54px} .brand{font-size:12px} .brand-sub{font-size:5.5px} .menu{width:32px;height:32px} .drawer{inset:54px 0 0 0} .hero{padding-top:54px} section{scroll-margin-top:54px} .hero-title{font-size:clamp(44px,12.9vw,54px)} } @media(min-width:700px){ :root{--pad:34px} .hero-title{font-size:clamp(74px,9.5vw,116px)} .cta{width:auto;min-width:230px} .features{grid-template-columns:1fr 1fr} } </style> </head> <body> <header class="nav"> <div class="wrap nav-in"> <a class="brand-lockup" href="#top"> <span class="brand">LOCKER ROOM</span> <span class="brand-sub">A Rebel Industries Opportunity</span> </a> <button class="menu" aria-label="Menu" aria-expanded="false"> <span></span> </button> </div> </header> <nav class="drawer" aria-hidden="true"> <a href="#stories"><span>Stories</span><small>01</small></a> <a href="#originals"><span>Originals</span><small>02</small></a> <a href="#about"><span>About</span><small>03</small></a> <a href="#contact"><span>Contact</span><small>04</small></a> <a href="javascript:parent.RebelRouter.open('rebel')"><span>Rebel Industries</span><small>↖</small></a> </nav> <main id="top"> <section class="hero"> <div class="wrap hero-in"> <div class="eyebrow reveal">Sport / People / Culture / Stories</div> <h1 class="tight hero-title reveal" style="margin-top:15px"> <span>The Score Is</span> <span>Only The Start.</span> </h1> <p class="hero-copy reveal"> Sport is more than the result. We tell stories about its people, pressures, traditions and defining moments. </p> <a class="cta reveal" href="#stories"> <span>Enter Locker Room</span> <span>↘</span> </a> </div> </section> <section class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">Why Locker Room exists</div> <h2 class="tight big reveal" style="margin-top:14px"> The score says what.<br/><span class="dim">We tell you why.</span> </h2> <p class="copy reveal"> We tell you why it mattered. </p> </div> </section> <section id="stories" class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">What We Cover</div> <h2 class="tight big reveal" style="margin-top:14px"> Not news.<br><span class="dim">Not noise.</span> </h2> <div class="story-list reveal"> <div class="story-row"> <div class="story-no">01</div> <div> <div class="story-title">Profiles</div> <div class="story-copy">The person behind the performance.</div> </div> </div> <div class="story-row"> <div class="story-no">02</div> <div> <div class="story-title">Culture</div> <div class="story-copy">The traditions, language and sense of belonging sport creates.</div> </div> </div> <div class="story-row"> <div class="story-no">03</div> <div> <div class="story-title">Legacy</div> <div class="story-copy">The people and moments that changed the game.</div> </div> </div> <div class="story-row"> <div class="story-no">04</div> <div> <div class="story-title">Inside Sport</div> <div class="story-copy">Pressure, politics, preparation — and what TV doesn't show.</div> </div> </div> </div> </div> </section> <section id="originals" class="light"> <div class="wrap pad"> <div class="eyebrow reveal">Locker Room Originals</div> <h2 class="tight big reveal" style="margin-top:14px"> Stories worth<br><span class="dim">staying for.</span> </h2> <div class="features"> <div class="feature reveal"> <div> <div class="feature-kicker">Long Read</div> <h3>The Person Behind The Performance.</h3> </div> <p>Not the statistics. The life, pressure, choices and moments that shaped the athlete.</p> </div> <div class="feature reveal"> <div> <div class="feature-kicker">Culture</div> <h3>When The Crowd Goes Home.</h3> </div> <p>The world around sport that broadcasts rarely show.</p> </div> <div class="feature reveal"> <div> <div class="feature-kicker">Legacy</div> <h3>The People Who Changed The Game.</h3> </div> <p>History told through the people who made a lasting impact on their sport.</p> </div> <div class="feature reveal"> <div> <div class="feature-kicker">Human Story</div> <h3>Winning Isn't Always The Best Story.</h3> </div> <p>Sometimes a loss, a comeback or the struggle to return matters more than the trophy.</p> </div> </div> </div> </section> <section id="about" class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">About Locker Room</div> <h2 class="tight big reveal" style="margin-top:14px"> Sport is <span class="dim">human first.</span> </h2> <div class="manifesto reveal"> <div>The score is the least interesting part.</div> <div>People remember stories, not statistics.</div> <div>Great sport always has a lasting impact.</div> <div>Reports tell what happened. Stories reveal why.</div> </div> </div> </section> <section id="contact" class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">Contact</div> <h2 class="tight big reveal" style="margin-top:14px"> Got a story?<br/><span class="dim">Let's tell it.</span> </h2> <div class="contact-block reveal"> <div class="contact-row"> <div class="contact-label">Email</div> <a class="contact-email" href="mailto:hello@lockerroom.global"> hello@lockerroom.global </a> </div> </div> </div> </section> </main> <footer> <div class="wrap"> <div class="eyebrow">Locker Room</div> <div class="foot-title" style="margin-top:10px"> Sport.<br>People.<br>Stories. </div> <div class="foot-links"> <a href="javascript:parent.RebelRouter.open('locker')">lockerroom.global</a> <a href="javascript:parent.RebelRouter.open('rebel')">Rebel Industries</a> <a href="mailto:hello@lockerroom.global">hello@lockerroom.global</a> </div> <div class="foot-bottom"> <span>© 2026 Locker Room</span> <span>A Rebel Industries Opportunity</span> </div> </div> </footer> <script> const btn = document.querySelector('.menu'); const drawer = document.querySelector('.drawer'); btn.addEventListener('click',()=>{ const open = drawer.classList.toggle('open'); btn.classList.toggle('on',open); btn.setAttribute('aria-expanded',open); drawer.setAttribute('aria-hidden',!open); document.body.style.overflow = open ? 'hidden' : ''; }); drawer.querySelectorAll('a').forEach(a=>{ a.addEventListener('click',()=>{ drawer.classList.remove('open'); btn.classList.remove('on'); btn.setAttribute('aria-expanded','false'); drawer.setAttribute('aria-hidden','true'); document.body.style.overflow=''; }); }); const obs = new IntersectionObserver((entries)=>{ entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('show'); obs.unobserve(e.target); } }); },{threshold:.08}); document.querySelectorAll('.reveal').forEach(el=>obs.observe(el)); </script> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="KREITIV — Creative work that moves something." /> <title>KREITIV — Mobile First</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Inter+Tight:wght@700;800;900&display=swap" rel="stylesheet"> <style> :root{ --b:#000; --w:#fff; --line:rgba(255,255,255,.16); --line-dark:rgba(0,0,0,.14); --muted:rgba(255,255,255,.62); --muted-dark:rgba(0,0,0,.6); --pad:18px; --track-display:-0.055em; --track-heading:-0.045em; --track-body:-0.012em; --track-label:.14em; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:#000; color:#fff; font-family:Inter,Arial,sans-serif; letter-spacing:var(--track-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } a{color:inherit;text-decoration:none} button{font:inherit} img{display:block;max-width:100%} .wrap{padding:0 var(--pad)} .tight{ font-family:"Inter Tight",Inter,sans-serif; font-weight:900; letter-spacing:var(--track-display); line-height:.88; text-transform:uppercase; margin:0; } .eyebrow{ font-size:10px; line-height:1; letter-spacing:var(--track-label); text-transform:uppercase; font-weight:700; opacity:.55; } /* HEADER */ .nav{ position:fixed; top:0;left:0;right:0; z-index:50; background:rgba(0,0,0,.88); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); } .nav-in{ min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:10px; } .brand-lockup{ display:flex; flex-direction:column; gap:1px; min-width:0; max-width:calc(100vw - 86px); } .brand{ font-family:"Inter Tight"; font-weight:900; font-size:13px; letter-spacing:var(--track-heading); text-transform:uppercase; line-height:1; white-space:nowrap; } .brand-sub{ font-size:6px; letter-spacing:.12em; text-transform:uppercase; opacity:.42; white-space:nowrap; } .menu{ width:34px;height:34px;border-radius:50%; border:1px solid var(--line); background:#000;color:#fff; display:grid;place-items:center; flex:0 0 auto; } .menu span,.menu span:before,.menu span:after{ content:"";display:block;width:14px;height:1.5px;background:#fff;position:relative;transition:.2s; } .menu span:before,.menu span:after{position:absolute;left:0} .menu span:before{top:-5px}.menu span:after{top:5px} .menu.on span{background:transparent} .menu.on span:before{top:0;transform:rotate(45deg)} .menu.on span:after{top:0;transform:rotate(-45deg)} .drawer{ position:fixed; z-index:40; inset:56px 0 0 0; background:#000; padding:22px var(--pad) 40px; transform:translateY(-110%); transition:.3s ease; } .drawer.open{transform:none} .drawer a{ display:flex;justify-content:space-between;align-items:center; padding:18px 0;border-bottom:1px solid var(--line); font-family:"Inter Tight"; font-size:28px; font-weight:900; letter-spacing:var(--track-heading); text-transform:uppercase; } .drawer small{ font:700 9px Inter; letter-spacing:var(--track-label); opacity:.4; } /* HERO */ .hero{ min-height:100svh; padding-top:56px; display:flex; align-items:flex-end; border-bottom:1px solid var(--line); position:relative; overflow:hidden; } .hero::after{ content:"KREITIV"; position:absolute; right:-10px; top:20%; writing-mode:vertical-rl; transform:rotate(180deg); font-family:"Inter Tight"; font-size:10px; font-weight:900; letter-spacing:.35em; opacity:.14; } .hero-in{ padding:18px 0 28px; width:100%; position:relative; z-index:2; } .hero-art{ position:relative; margin-bottom:18px; border:1px solid var(--line); overflow:hidden; background:#111; aspect-ratio:4/5; } .hero-art img{ width:100%; height:100%; object-fit:cover; filter:grayscale(100%); } .hero-title{ font-size:clamp(47px,13.4vw,66px); max-width:100%; } .hero-title span{display:block;white-space:nowrap} .hero-copy{ margin:20px 0 22px; max-width:92%; color:var(--muted); font-size:15px; line-height:1.46; } .cta{ width:100%; min-height:50px; border:1px solid #fff; display:flex; align-items:center; justify-content:space-between; padding:0 15px; text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:.04em; background:#fff; color:#000; } /* SECTIONS */ section{scroll-margin-top:56px} .dark{background:#000;color:#fff;border-bottom:1px solid var(--line)} .light{background:#fff;color:#000;border-bottom:1px solid var(--line-dark)} .pad{padding:74px 0} .big{ font-size:clamp(44px,12.7vw,68px); max-width:100%; } .dim{color:rgba(255,255,255,.2)} .light .dim{color:rgba(0,0,0,.17)} .copy{ margin-top:22px; font-size:16px; line-height:1.5; max-width:93%; color:var(--muted); } .light .copy{color:var(--muted-dark)} /* SERVICES */ .service-list{ margin-top:28px; border-top:1px solid var(--line); } .service-row{ padding:18px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:36px 1fr; gap:14px; align-items:start; } .service-no{ font-size:9px; letter-spacing:.12em; opacity:.42; padding-top:4px; } .service-title{ font-family:"Inter Tight"; font-size:24px; font-weight:900; letter-spacing:var(--track-heading); text-transform:uppercase; line-height:1; } .service-copy{ margin-top:7px; color:var(--muted); font-size:14px; line-height:1.45; max-width:94%; } /* FEATURE CARDS */ .features{ display:grid; gap:10px; margin-top:28px; } .feature{ min-height:250px; border:1px solid var(--line-dark); background:#fff; color:#000; padding:20px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; } .feature::before{ content:""; position:absolute; width:110px;height:110px; border:1px solid rgba(0,0,0,.12); border-radius:50%; right:-32px;top:-32px; } .feature-kicker{ font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.44; } .feature h3{ margin:18px 0 0; font-family:"Inter Tight"; font-size:clamp(36px,10.8vw,52px); line-height:.92; letter-spacing:var(--track-display); text-transform:uppercase; max-width:90%; } .feature p{ margin:20px 0 0; font-size:13px; line-height:1.44; color:var(--muted-dark); max-width:88%; } /* MANIFESTO */ .manifesto{ margin-top:30px; border-top:1px solid var(--line); } .manifesto div{ padding:16px 0; border-bottom:1px solid var(--line); font-family:"Inter Tight"; font-size:24px; font-weight:900; letter-spacing:var(--track-heading); line-height:1; text-transform:uppercase; } /* CONTACT */ .contact-block{ margin-top:30px; border-top:1px solid var(--line); } .contact-row{ padding:18px 0; border-bottom:1px solid var(--line); } .contact-label{ font-size:9px; text-transform:uppercase; letter-spacing:var(--track-label); opacity:.45; margin-bottom:8px; } .contact-email{ font-family:"Inter Tight"; font-size:clamp(24px,7vw,34px); font-weight:900; letter-spacing:var(--track-heading); word-break:break-word; } /* FOOTER */ footer{ padding:58px 0 24px; background:#000; } .foot-title{ font-family:"Inter Tight"; font-size:clamp(46px,14vw,68px); font-weight:900; line-height:.86; letter-spacing:var(--track-display); text-transform:uppercase; } .foot-links{ display:grid; gap:10px; margin-top:30px; } .foot-links a{ font-size:13px; color:rgba(255,255,255,.6); } .foot-bottom{ margin-top:38px; padding-top:14px; border-top:1px solid var(--line); display:grid; gap:7px; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.42); } .reveal{ opacity:0; transform:translateY(16px); transition:.55s cubic-bezier(.2,.75,.2,1); } .reveal.show{opacity:1;transform:none} @media(max-width:390px){ :root{--pad:16px} .nav-in{min-height:54px} .brand{font-size:12px} .brand-sub{font-size:5.5px} .menu{width:32px;height:32px} .drawer{inset:54px 0 0 0} .hero{padding-top:54px} section{scroll-margin-top:54px} .hero-title{font-size:clamp(44px,12.9vw,54px)} } @media(min-width:700px){ :root{--pad:34px} .hero-in{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:end; padding:28px 0 34px; } .hero-art{ margin-bottom:0; aspect-ratio:4/4.8; } .hero-copy-wrap{ align-self:end; } .hero-title{font-size:clamp(74px,9.5vw,116px)} .cta{width:auto;min-width:230px} .features{grid-template-columns:1fr 1fr} } </style> </head> <body> <header class="nav"> <div class="wrap nav-in"> <a class="brand-lockup" href="#top"> <span class="brand">KREITIV</span> <span class="brand-sub">A Rebel Industries Opportunity</span> </a> <button class="menu" aria-label="Menu" aria-expanded="false"> <span></span> </button> </div> </header> <nav class="drawer" aria-hidden="true"> <a href="#services"><span>Services</span><small>01</small></a> <a href="#work"><span>Work</span><small>02</small></a> <a href="#about"><span>About</span><small>03</small></a> <a href="#contact"><span>Contact</span><small>04</small></a> <a href="javascript:parent.RebelRouter.open('rebel')"><span>Rebel Industries</span><small>↖</small></a> </nav> <main id="top"> <section class="hero"> <div class="wrap hero-in"> <div class="hero-art reveal"> <img src="https://res.cloudinary.com/dcyztqho1/image/upload/v1787437467/KRIETIV_IMAGE_yse01a.png" alt="KREITIV hero artwork" /> </div> <div class="hero-copy-wrap"> <div class="eyebrow reveal">Creative Agency / Branding / Campaigns / Digital</div> <h1 class="tight hero-title reveal" style="margin-top:15px"> <span>Creative That</span> <span>Moves</span> <span>People.</span> </h1> <p class="hero-copy reveal"> Looking good isn't a plan. We create work that changes how people think, drives action or builds momentum. </p> <a class="cta reveal" href="#services"> <span>See What We Do</span> <span>↘</span> </a> </div> </div> </section> <section class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">Why KREITIV exists</div> <h2 class="tight big reveal" style="margin-top:14px"> Pretty isn't enough.<br/><span class="dim">Make it work.</span> </h2> <p class="copy reveal"> It should change what people think, feel, remember or do. </p> </div> </section> <section id="services" class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">What We Do</div> <h2 class="tight big reveal" style="margin-top:14px"> Not decoration.<br><span class="dim">Direction.</span> </h2> <div class="service-list reveal"> <div class="service-row"> <div class="service-no">01</div> <div> <div class="service-title">Brand</div> <div class="service-copy">A clear look, voice and set of brand rules that help define the opportunity.</div> </div> </div> <div class="service-row"> <div class="service-no">02</div> <div> <div class="service-title">Campaigns</div> <div class="service-copy">Creative ideas that grab attention and make the message memorable.</div> </div> </div> <div class="service-row"> <div class="service-no">03</div> <div> <div class="service-title">Content</div> <div class="service-copy">Images, designs and words that adapt as the brand develops.</div> </div> </div> <div class="service-row"> <div class="service-no">04</div> <div> <div class="service-title">Digital</div> <div class="service-copy">Websites, interfaces and design systems that work in everyday use.</div> </div> </div> </div> </div> </section> <section id="work" class="light"> <div class="wrap pad"> <div class="eyebrow reveal">How We Think</div> <h2 class="tight big reveal" style="margin-top:14px"> Creative with<br><span class="dim">a point.</span> </h2> <div class="features"> <div class="feature reveal"> <div> <div class="feature-kicker">Positioning</div> <h3>Say it clearly.</h3> </div> <p>Find the clearest way to say it. Make sure people get the message.</p> </div> <div class="feature reveal"> <div> <div class="feature-kicker">Design</div> <h3>Make people feel it.</h3> </div> <p>Design isn't there to look expensive. It's there to show what you mean.</p> </div> <div class="feature reveal"> <div> <div class="feature-kicker">Creative Direction</div> <h3>Define the look and voice.</h3> </div> <p>Every brand needs a look and a way of speaking that people recognise.</p> </div> <div class="feature reveal"> <div> <div class="feature-kicker">Execution</div> <h3>Finish it properly.</h3> </div> <p>Ideas are easy to talk about and hard to deliver. We focus on delivering.</p> </div> </div> </div> </section> <section id="about" class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">About KREITIV</div> <h2 class="tight big reveal" style="margin-top:14px"> Make a mark.<br/><span class="dim">Or don't bother.</span> </h2> <div class="manifesto reveal"> <div>Pretty is not the brief.</div> <div>Clarity beats clutter.</div> <div>Creative work should drive change.</div> <div>No meaning. No impact.</div> </div> </div> </section> <section id="contact" class="dark"> <div class="wrap pad"> <div class="eyebrow reveal">Contact</div> <h2 class="tight big reveal" style="margin-top:14px"> Need work<br/><span class="dim">that hits?</span> </h2> <div class="contact-block reveal"> <div class="contact-row"> <div class="contact-label">Email</div> <a class="contact-email" href="mailto:hello@kreitiv.global"> hello@kreitiv.global </a> </div> </div> </div> </section> </main> <footer> <div class="wrap"> <div class="eyebrow">KREITIV</div> <div class="foot-title" style="margin-top:10px"> Creative.<br>With.<br>Intent. </div> <div class="foot-links"> <a href="javascript:parent.RebelRouter.open('kreitiv')">kreitiv.global</a> <a href="javascript:parent.RebelRouter.open('rebel')">Rebel Industries</a> <a href="mailto:hello@kreitiv.global">hello@kreitiv.global</a> </div> <div class="foot-bottom"> <span>© 2026 KREITIV</span> <span>A Rebel Industries Opportunity</span> </div> </div> </footer> <script> const btn = document.querySelector('.menu'); const drawer = document.querySelector('.drawer'); btn.addEventListener('click',()=>{ const open = drawer.classList.toggle('open'); btn.classList.toggle('on',open); btn.setAttribute('aria-expanded',open); drawer.setAttribute('aria-hidden',!open); document.body.style.overflow = open ? 'hidden' : ''; }); drawer.querySelectorAll('a').forEach(a=>{ a.addEventListener('click',()=>{ drawer.classList.remove('open'); btn.classList.remove('on'); btn.setAttribute('aria-expanded','false'); drawer.setAttribute('aria-hidden','true'); document.body.style.overflow=''; }); }); const obs = new IntersectionObserver((entries)=>{ entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('show'); obs.unobserve(e.target); } }); },{threshold:.08}); document.querySelectorAll('.reveal').forEach(el=>obs.observe(el)); </script> </body> </html>