Run details
- Model
- claude-opus-5-5
- Route
- Claude Code CLI
- Reasoning
- provider default
- Limits
- 60 min · 128,000 output tokens
- Date
- 21 Oct 2026
- Time
- 4 min 8 s
- Size
- 59 kB
- Tokens
- 4 in, 29,519 out
- List price
- $0.59 ($4 in / $20 out per M)
- Paid
- Not billed per run (CLI plan)
Exact prompt
Build the landing page for Lumen Cycles, a Copenhagen workshop that builds custom cargo bikes to order. Make it look like a real brand you would trust with 4,000 euros. It must be one complete, self-contained HTML file: inline all CSS and JavaScript, and make no network requests of any kind (no CDNs, web fonts or remote images). Save it as index.html in the current directory, then stop. Do not ask questions.
Source
59 kB 894 lines Raw
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lumen Cycles — Custom cargo bikes, built by hand in Copenhagen</title>
<meta name="description" content="Lumen Cycles builds custom cargo bikes to order in our Nørrebro workshop. Steel frames, welded and fitted by hand, delivered in 10–12 weeks.">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%231f2a24'/%3E%3Ccircle cx='16' cy='16' r='7' fill='none' stroke='%23e2a640' stroke-width='3'/%3E%3C/svg%3E">
<style>
:root{
--paper:#f4f0e8;
--paper-2:#ebe5d8;
--ink:#1c2420;
--ink-2:#3c4740;
--muted:#6b736c;
--line:#d6cfbf;
--forest:#1f2a24;
--brass:#e2a640;
--brass-d:#b9801f;
--birch:#d9b98a;
--birch-d:#b8925e;
--red:#b6462f;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Charter,Georgia,serif;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
--r:14px;
--wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.1;margin:0}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:1.4rem}
p{margin:0 0 1em}
.eyebrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-d);margin-bottom:18px;display:inline-flex;gap:10px;align-items:center}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor}
.lede{font-size:1.15rem;color:var(--ink-2);max-width:56ch}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:600;font-size:.95rem;text-decoration:none;border:1.5px solid var(--ink);cursor:pointer;transition:transform .15s ease,background .2s,color .2s;font-family:var(--sans)}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:#000}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-brass{background:var(--brass);border-color:var(--brass);color:var(--forest)}
.btn-brass:hover{background:#ebb455}
:focus-visible{outline:2px solid var(--brass-d);outline-offset:3px}
/* Nav */
.topbar{background:var(--forest);color:#cfd6cf;font-size:.82rem;text-align:center;padding:9px 16px}
.topbar strong{color:var(--brass);font-weight:600}
header.nav{position:sticky;top:0;z-index:50;background:rgba(244,240,232,.9);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
header.nav.scrolled{border-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--serif);font-size:1.35rem;letter-spacing:.01em}
.logo small{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-top:-3px}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{text-decoration:none;font-size:.93rem;color:var(--ink-2)}
.nav-links a:hover{color:var(--ink)}
.nav-links .btn{padding:10px 18px;color:var(--paper)}
.menu-btn{display:none;background:none;border:0;padding:8px;cursor:pointer}
@media (max-width:900px){
.nav-links{display:none;position:absolute;top:72px;left:0;right:0;background:var(--paper);flex-direction:column;align-items:flex-start;padding:20px 28px 28px;border-bottom:1px solid var(--line);gap:18px}
.nav-links.open{display:flex}
.menu-btn{display:block}
}
/* Hero */
.hero{padding:72px 0 40px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.7rem,6vw,4.9rem)}
.hero h1 em{font-style:italic;color:var(--brass-d)}
.hero .lede{margin:26px 0 34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-meta{display:flex;gap:28px;margin-top:40px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap}
.hero-meta div{font-size:.86rem;color:var(--muted);line-height:1.4}
.hero-meta b{display:block;font-family:var(--serif);font-weight:500;font-size:1.5rem;color:var(--ink)}
.hero-art{position:relative;background:var(--paper-2);border-radius:28px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-art::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(226,166,64,.35),rgba(226,166,64,0) 68%);top:6%;right:-8%}
.hero-art svg{position:relative;width:96%}
.tag{position:absolute;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-size:.78rem;line-height:1.35;box-shadow:0 8px 24px -12px rgba(28,36,32,.25)}
.tag b{display:block;font-size:.85rem}
.tag.t1{top:9%;left:7%}
.tag.t2{bottom:9%;right:7%}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero{padding-top:44px}}
/* Press strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin-top:56px}
.strip-in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;color:var(--muted)}
.strip-in span:first-child{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.strip-in .pub{font-family:var(--serif);font-size:1.15rem;color:var(--ink-2);opacity:.75}
.strip-in .pub.it{font-style:italic}
.strip-in .pub.caps{font-family:var(--sans);font-weight:800;letter-spacing:.08em;font-size:.95rem}
section{padding:110px 0}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.sec-head p{color:var(--ink-2);margin:0}
@media (max-width:800px){.sec-head{grid-template-columns:1fr;gap:18px}section{padding:80px 0}}
/* Models */
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.model{background:#fbf9f4;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s}
.model:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(28,36,32,.45)}
.model-art{background:var(--paper-2);padding:26px 18px 14px;position:relative}
.model-art .badge{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;background:var(--forest);color:var(--brass);padding:5px 9px;border-radius:6px}
.model-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.model-body .kicker{font-size:.82rem;color:var(--muted);margin-bottom:6px}
.model-body p{font-size:.95rem;color:var(--ink-2);margin:12px 0 18px}
.specs{list-style:none;padding:0;margin:0 0 22px;font-size:.86rem;border-top:1px solid var(--line)}
.specs li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line)}
.specs li span:first-child{color:var(--muted)}
.price-row{margin-top:auto;display:flex;justify-content:space-between;align-items:center}
.price{font-family:var(--serif);font-size:1.55rem}
.price small{font-family:var(--sans);font-size:.75rem;color:var(--muted);display:block;line-height:1}
.link-arrow{font-weight:600;font-size:.9rem;text-decoration:none;border-bottom:1.5px solid var(--brass);padding-bottom:2px}
@media (max-width:960px){.models{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
/* Workshop */
.dark{background:var(--forest);color:#e6e4dc}
.dark .eyebrow{color:var(--brass)}
.dark .lede,.dark p{color:#b9c1ba}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.work-art{border-radius:20px;overflow:hidden;background:#27342d}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:30px 34px;margin-top:40px}
.pillar h3{font-size:1.15rem;color:#f4f0e8;margin-bottom:8px;display:flex;gap:10px;align-items:center}
.pillar h3 i{font-style:normal;font-family:var(--mono);font-size:.7rem;color:var(--brass);border:1px solid rgba(226,166,64,.45);border-radius:5px;padding:2px 6px}
.pillar p{font-size:.93rem;margin:0}
@media (max-width:900px){.work-grid{grid-template-columns:1fr;gap:44px}.pillars{grid-template-columns:1fr}}
/* Process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;border-top:1px solid var(--ink)}
.step{padding:28px 26px 10px 0;position:relative}
.step + .step{padding-left:26px;border-left:1px solid var(--line)}
.step .n{font-family:var(--mono);font-size:.74rem;color:var(--brass-d);letter-spacing:.1em}
.step h3{margin:14px 0 10px;font-size:1.3rem}
.step p{font-size:.93rem;color:var(--ink-2)}
.step .when{display:inline-block;font-size:.76rem;background:var(--paper-2);border-radius:999px;padding:4px 11px;color:var(--ink-2);margin-top:4px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}.step:nth-child(3){padding-left:0;border-left:0}.step{border-bottom:1px solid var(--line);padding-bottom:26px}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.step,.step+.step{padding-left:0;border-left:0}}
/* Configurator */
.config{background:var(--paper-2)}
.cfg{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:start}
.cfg-panel{background:#fbf9f4;border:1px solid var(--line);border-radius:20px;padding:30px}
.cfg-preview{position:sticky;top:96px}
.cfg-preview .stage{background:#fbf9f4;border:1px solid var(--line);border-radius:20px;padding:22px}
fieldset{border:0;padding:0;margin:0 0 28px}
fieldset:last-child{margin-bottom:0}
legend{font-weight:600;font-size:.95rem;margin-bottom:12px;display:flex;justify-content:space-between;width:100%}
legend span{font-weight:400;color:var(--muted);font-size:.85rem}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt label{display:block;border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;cursor:pointer;transition:border-color .15s,background .15s;height:100%}
.opt label b{display:block;font-size:.93rem}
.opt label span{font-size:.8rem;color:var(--muted)}
.opt input:checked + label{border-color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.opt input:focus-visible + label{outline:2px solid var(--brass-d);outline-offset:2px}
.swatches{display:flex;gap:12px;flex-wrap:wrap}
.sw input{position:absolute;opacity:0}
.sw{position:relative}
.sw label{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font-size:.74rem;color:var(--muted);width:68px;text-align:center}
.sw label i{width:40px;height:40px;border-radius:50%;border:3px solid #fbf9f4;box-shadow:0 0 0 1.5px var(--line);transition:box-shadow .15s}
.sw input:checked + label i{box-shadow:0 0 0 2px var(--ink)}
.sw input:checked + label{color:var(--ink)}
.sw input:focus-visible + label i{outline:2px solid var(--brass-d);outline-offset:4px}
.summary{margin-top:18px;background:var(--forest);color:#e6e4dc;border-radius:20px;padding:26px}
.summary .row{display:flex;justify-content:space-between;font-size:.88rem;padding:6px 0;color:#b9c1ba}
.summary .total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(255,255,255,.14);margin-top:12px;padding-top:16px}
.summary .total b{font-family:var(--serif);font-weight:500;font-size:2.1rem;color:#fff}
.summary .fine{font-size:.78rem;color:#8f9a92;margin:14px 0 18px}
.summary .btn{width:100%;justify-content:center}
@media (max-width:900px){.cfg{grid-template-columns:1fr}.cfg-preview{position:static;order:-1}}
/* Testimonials */
.quotes{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:22px}
.quote{border:1px solid var(--line);border-radius:var(--r);padding:30px;background:#fbf9f4;display:flex;flex-direction:column}
.quote.big{background:var(--brass);border-color:var(--brass)}
.quote blockquote{margin:0 0 24px;font-family:var(--serif);font-size:1.18rem;line-height:1.45}
.quote.big blockquote{font-size:1.55rem}
.who{margin-top:auto;display:flex;gap:12px;align-items:center;font-size:.86rem}
.who .av{width:42px;height:42px;border-radius:50%;background:var(--forest);color:var(--brass);display:grid;place-items:center;font-family:var(--serif);font-size:1rem;flex:none}
.who span{color:var(--muted);display:block;font-size:.8rem}
.quote.big .who span{color:var(--forest);opacity:.75}
.stars{color:var(--brass-d);letter-spacing:2px;font-size:.9rem;margin-bottom:12px}
.quote.big .stars{color:var(--forest)}
.rating{display:flex;gap:16px;align-items:center;margin-top:30px;font-size:.9rem;color:var(--ink-2)}
.rating b{font-family:var(--serif);font-size:1.6rem;font-weight:500;color:var(--ink)}
@media (max-width:960px){.quotes{grid-template-columns:1fr}}
/* Promise */
.promise{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pr{padding:26px;border-radius:var(--r);background:var(--paper-2)}
.pr svg{width:34px;height:34px;margin-bottom:18px}
.pr h3{font-size:1.15rem;margin-bottom:8px}
.pr p{font-size:.9rem;color:var(--ink-2);margin:0}
@media (max-width:960px){.promise{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.promise{grid-template-columns:1fr}}
/* FAQ */
.faq-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:64px}
details{border-bottom:1px solid var(--line);padding:4px 0}
details:first-of-type{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-family:var(--serif);font-size:1.2rem;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details p{color:var(--ink-2);padding-right:40px;font-size:.97rem}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr;gap:30px}}
/* Visit / form */
.visit-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.info{margin-top:34px;display:grid;gap:22px}
.info div{display:grid;grid-template-columns:120px 1fr;gap:16px;font-size:.95rem;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.12)}
.info dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);padding-top:3px}
.info dd{margin:0;color:#e6e4dc}
form.book{background:var(--paper);color:var(--ink);border-radius:22px;padding:34px}
form.book h3{margin-bottom:6px}
form.book > p{color:var(--muted);font-size:.9rem}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.f{display:flex;flex-direction:column;gap:6px}
.f.full{grid-column:1/-1}
.f label{font-size:.82rem;font-weight:600}
.f input,.f select,.f textarea{font:inherit;font-size:.95rem;padding:12px 14px;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--ink);width:100%}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--ink)}
.f textarea{min-height:96px;resize:vertical}
.f .err{font-size:.76rem;color:var(--red);display:none}
.f.invalid input,.f.invalid select{border-color:var(--red)}
.f.invalid .err{display:block}
form.book .btn{margin-top:20px;width:100%;justify-content:center}
.formnote{font-size:.78rem;color:var(--muted);margin-top:12px;text-align:center}
.thanks{display:none;text-align:center;padding:30px 10px}
.thanks svg{width:56px;height:56px;margin:0 auto 18px}
.thanks h3{margin-bottom:10px}
.thanks p{color:var(--ink-2)}
@media (max-width:900px){.visit-grid{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}}
footer{background:#161d19;color:#9aa49c;padding:70px 0 34px;font-size:.9rem}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
footer h4{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#e6e4dc;margin:0 0 16px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
footer a{text-decoration:none}
footer a:hover{color:#fff}
.foot .logo{color:#f4f0e8;margin-bottom:16px}
.legal{border-top:1px solid #2a332e;margin-top:54px;padding-top:24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.8rem}
@media (max-width:800px){.foot{grid-template-columns:1fr 1fr}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.wheel-spin{animation:none!important}}
.wheel-spin{transform-box:fill-box;transform-origin:center;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
</style>
</head>
<body>
<!-- Reusable bike drawing -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<defs>
<g id="wheel-big">
<circle r="74" fill="none" stroke="#1c2420" stroke-width="9"/>
<circle r="66" fill="none" stroke="#3c4740" stroke-width="2"/>
<g class="wheel-spin" stroke="#6b736c" stroke-width="1.1">
<circle r="66" fill="none" stroke="none"/>
<line x1="0" y1="-66" x2="0" y2="66"/><line x1="-66" y1="0" x2="66" y2="0"/>
<line x1="-46.7" y1="-46.7" x2="46.7" y2="46.7"/><line x1="46.7" y1="-46.7" x2="-46.7" y2="46.7"/>
<line x1="-25" y1="-61" x2="25" y2="61"/><line x1="25" y1="-61" x2="-25" y2="61"/>
<line x1="-61" y1="-25" x2="61" y2="25"/><line x1="61" y1="-25" x2="-61" y2="25"/>
</g>
<circle r="9" fill="#3c4740"/><circle r="3.5" fill="#d6cfbf"/>
</g>
<g id="wheel-small">
<circle r="56" fill="none" stroke="#1c2420" stroke-width="9"/>
<circle r="49" fill="none" stroke="#3c4740" stroke-width="2"/>
<g class="wheel-spin" stroke="#6b736c" stroke-width="1.1">
<circle r="49" fill="none" stroke="none"/>
<line x1="0" y1="-49" x2="0" y2="49"/><line x1="-49" y1="0" x2="49" y2="0"/>
<line x1="-34.6" y1="-34.6" x2="34.6" y2="34.6"/><line x1="34.6" y1="-34.6" x2="-34.6" y2="34.6"/>
<line x1="-19" y1="-45" x2="19" y2="45"/><line x1="19" y1="-45" x2="-19" y2="45"/>
</g>
<circle r="8" fill="#3c4740"/><circle r="3" fill="#d6cfbf"/>
</g>
</defs>
</svg>
<div class="topbar">Spring 2027 build slots are open — <strong>14 of 40 remaining</strong>. Deposits fully refundable until frame cutting.</div>
<header class="nav" id="nav">
<div class="wrap nav-in">
<a href="#top" class="logo" aria-label="Lumen Cycles home">
<svg width="34" height="34" viewBox="0 0 34 34" aria-hidden="true"><rect width="34" height="34" rx="8" fill="#1f2a24"/><circle cx="17" cy="17" r="7.5" fill="none" stroke="#e2a640" stroke-width="3"/><circle cx="17" cy="17" r="2" fill="#e2a640"/></svg>
<span>Lumen Cycles<small>København · est. 2014</small></span>
</a>
<button class="menu-btn" id="menuBtn" aria-label="Open menu" aria-expanded="false">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1c2420" stroke-width="2" stroke-linecap="round"><path d="M3 7h18M3 12h18M3 17h18"/></svg>
</button>
<nav class="nav-links" id="navLinks">
<a href="#models">Models</a>
<a href="#workshop">Workshop</a>
<a href="#process">How it works</a>
<a href="#configure">Configure</a>
<a href="#faq">FAQ</a>
<a href="#visit" class="btn btn-primary">Book a test ride</a>
</nav>
</div>
</header>
<main id="top">
<!-- HERO -->
<section class="hero" style="padding-bottom:0">
<div class="wrap">
<div class="hero-grid">
<div>
<div class="eyebrow">Hand-built in Nørrebro, Copenhagen</div>
<h1>The cargo bike you'll <em>keep</em> for twenty years.</h1>
<p class="lede">Every Lumen is welded, painted and fitted to its rider in our workshop on Mimersgade. We build forty bikes a season — each one made for the family, the trade or the dog that will ride in it.</p>
<div class="hero-cta">
<a href="#configure" class="btn btn-primary">Configure your bike
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M3 8h10M9 4l4 4-4 4"/></svg></a>
<a href="#visit" class="btn btn-ghost">Book a free test ride</a>
</div>
<div class="hero-meta">
<div><b>612</b>bikes delivered<br>since 2014</div>
<div><b>10–12 wks</b>from fitting<br>to handover</div>
<div><b>Lifetime</b>frame warranty,<br>transferable</div>
</div>
</div>
<div class="hero-art" aria-label="Illustration of a Lumen Havn long-john cargo bike">
<svg viewBox="0 0 720 460" role="img" aria-hidden="true">
<ellipse cx="360" cy="408" rx="320" ry="10" fill="#1c2420" opacity=".08"/>
<use href="#wheel-small" x="130" y="342"/>
<use href="#wheel-big" x="570" y="324"/>
<!-- cargo box -->
<g>
<path d="M200 208 L392 208 L384 290 L208 290 Z" fill="#d9b98a" stroke="#b8925e" stroke-width="2"/>
<path d="M200 208 L392 208" stroke="#b8925e" stroke-width="6" stroke-linecap="round"/>
<path d="M210 236 H384 M212 262 H382" stroke="#b8925e" stroke-width="1.2" opacity=".6"/>
<rect x="268" y="222" width="56" height="10" rx="5" fill="#b8925e"/>
</g>
<!-- frame -->
<g fill="none" stroke="#1f2a24" stroke-width="11" stroke-linecap="round" stroke-linejoin="round" class="frame">
<path d="M178 222 L192 300 L452 304" />
<path d="M452 304 L570 324" />
<path d="M452 304 L432 170" />
<path d="M440 214 L570 324" />
<path d="M432 176 L398 300" stroke-width="9"/>
</g>
<!-- head tube & fork -->
<g stroke-linecap="round" fill="none">
<path d="M172 186 L184 252" stroke="#1f2a24" stroke-width="15"/>
<path d="M182 246 L130 342" stroke="#1f2a24" stroke-width="8"/>
<path d="M172 186 L166 150" stroke="#3c4740" stroke-width="7"/>
<path d="M166 150 C190 146 214 146 238 158" stroke="#3c4740" stroke-width="7"/>
<path d="M226 154 L250 162" stroke="#1c2420" stroke-width="11"/>
<path d="M186 240 L380 236" stroke="#6b736c" stroke-width="3"/>
</g>
<!-- lamp -->
<rect x="150" y="192" width="22" height="14" rx="4" fill="#1c2420"/>
<circle cx="152" cy="199" r="5" fill="#e2a640"/>
<path d="M146 199 L96 186 L96 212 Z" fill="#e2a640" opacity=".18"/>
<!-- seat -->
<path d="M432 170 L426 138" stroke="#3c4740" stroke-width="7" stroke-linecap="round"/>
<path d="M398 132 C414 124 446 126 458 134 L452 142 C440 140 416 140 404 140 Z" fill="#5a3b26"/>
<!-- rear rack -->
<path d="M470 222 H574 L578 262" stroke="#3c4740" stroke-width="5" fill="none" stroke-linecap="round"/>
<!-- drivetrain -->
<circle cx="452" cy="304" r="22" fill="none" stroke="#3c4740" stroke-width="4"/>
<circle cx="452" cy="304" r="7" fill="#1c2420"/>
<path d="M452 304 L470 340" stroke="#1c2420" stroke-width="7" stroke-linecap="round"/>
<rect x="462" y="338" width="24" height="7" rx="3" fill="#1c2420"/>
<path d="M452 282 L570 314 M452 326 L570 334" stroke="#6b736c" stroke-width="2"/>
<!-- mudguard -->
<path d="M498 300 A78 78 0 0 1 640 290" stroke="#1f2a24" stroke-width="5" fill="none" opacity=".9" transform="translate(0,-8)"/>
<!-- kickstand -->
<path d="M300 300 L290 400 M330 300 L340 400" stroke="#3c4740" stroke-width="5" stroke-linecap="round"/>
</svg>
<div class="tag t1"><b>Havn · 4130 CrMo steel</b>TIG-welded in-house</div>
<div class="tag t2"><b>Payload 100 kg box</b>Birch ply, marine lacquer</div>
</div>
</div>
</div>
<div class="strip">
<div class="wrap strip-in">
<span>As featured in</span>
<span class="pub it">Politiken</span>
<span class="pub caps">MONOCLE</span>
<span class="pub">Bicycling Europe</span>
<span class="pub it">Kinfolk</span>
<span class="pub caps">CYKLISTEN</span>
</div>
</div>
</section>
<!-- MODELS -->
<section id="models">
<div class="wrap">
<div class="sec-head reveal">
<div>
<div class="eyebrow">Three platforms, endless builds</div>
<h2>Start with a frame.<br>We'll make it yours.</h2>
</div>
<p>Each model is a proven geometry we've refined over a decade of Copenhagen winters. From there, every detail — box, drivetrain, assist, colour, fit — is specified with you at your fitting.</p>
</div>
<div class="models">
<article class="model reveal">
<div class="model-art">
<span class="badge">Most popular</span>
<svg viewBox="0 0 720 420" aria-hidden="true">
<use href="#wheel-small" x="130" y="320"/><use href="#wheel-big" x="570" y="302"/>
<path d="M200 186 L392 186 L384 268 L208 268 Z" fill="#d9b98a" stroke="#b8925e" stroke-width="2"/>
<g fill="none" stroke="#1f2a24" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"><path d="M178 200 L192 278 L452 282 L570 302"/><path d="M452 282 L432 148"/><path d="M440 192 L570 302"/></g>
<path d="M182 224 L130 320 M172 164 L184 230" stroke="#1f2a24" stroke-width="10" stroke-linecap="round"/>
<path d="M172 164 L166 128 C190 124 214 124 238 136" stroke="#3c4740" stroke-width="7" fill="none" stroke-linecap="round"/>
<path d="M432 148 L426 116" stroke="#3c4740" stroke-width="7"/><path d="M398 110 C414 102 446 104 458 112 L452 120 L404 118Z" fill="#5a3b26"/>
<circle cx="452" cy="282" r="20" fill="none" stroke="#3c4740" stroke-width="4"/>
</svg>
</div>
<div class="model-body">
<div class="kicker">Long-john · two kids or the weekly shop</div>
<h3>Havn</h3>
<p>Our original. A low, stable box up front that you can see into while you ride. Seats two children with belts and a rain canopy.</p>
<ul class="specs">
<li><span>Length</span><span>244 cm</span></li>
<li><span>Box payload</span><span>100 kg</span></li>
<li><span>Bike weight</span><span>from 31 kg</span></li>
</ul>
<div class="price-row">
<div class="price"><small>from</small>€4,250</div>
<a href="#configure" class="link-arrow" data-model="havn">Configure →</a>
</div>
</div>
</article>
<article class="model reveal">
<div class="model-art">
<svg viewBox="0 0 720 420" aria-hidden="true">
<use href="#wheel-big" x="170" y="302"/><use href="#wheel-big" x="560" y="302"/>
<g fill="none" stroke="#1f2a24" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"><path d="M200 180 L170 302"/><path d="M206 190 L310 290 L560 302"/><path d="M310 290 L292 150"/><path d="M296 176 L470 190 L560 302"/><path d="M206 190 L296 176"/></g>
<path d="M206 186 L198 130 C220 124 240 128 254 140" stroke="#3c4740" stroke-width="7" fill="none" stroke-linecap="round"/>
<path d="M292 150 L286 118" stroke="#3c4740" stroke-width="7"/><path d="M258 112 C274 104 306 106 318 114 L312 122 L264 120Z" fill="#5a3b26"/>
<rect x="412" y="150" width="190" height="16" rx="5" fill="#d9b98a" stroke="#b8925e" stroke-width="2"/>
<path d="M440 166 L440 236 M580 166 L580 236" stroke="#3c4740" stroke-width="5"/>
<rect x="430" y="196" width="34" height="58" rx="5" fill="#2f5d4a"/><rect x="556" y="196" width="34" height="58" rx="5" fill="#2f5d4a"/>
<circle cx="310" cy="290" r="20" fill="none" stroke="#3c4740" stroke-width="4"/>
</svg>
</div>
<div class="model-body">
<div class="kicker">Longtail · rides like a normal bike</div>
<h3>Fjord</h3>
<p>Compact enough for a stairwell, strong enough for two passengers on the deck. The easiest step up from an ordinary city bike.</p>
<ul class="specs">
<li><span>Length</span><span>196 cm</span></li>
<li><span>Deck payload</span><span>80 kg</span></li>
<li><span>Bike weight</span><span>from 24 kg</span></li>
</ul>
<div class="price-row">
<div class="price"><small>from</small>€3,950</div>
<a href="#configure" class="link-arrow" data-model="fjord">Configure →</a>
</div>
</div>
</article>
<article class="model reveal">
<div class="model-art">
<span class="badge">For trade</span>
<svg viewBox="0 0 720 420" aria-hidden="true">
<use href="#wheel-small" x="110" y="320"/><use href="#wheel-big" x="590" y="302"/>
<path d="M150 150 L400 150 L396 270 L156 270 Z" fill="#d9b98a" stroke="#b8925e" stroke-width="2"/>
<path d="M160 180 H396 M160 210 H396 M160 240 H396" stroke="#b8925e" stroke-width="1.2" opacity=".6"/>
<g fill="none" stroke="#1f2a24" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"><path d="M140 210 L150 280 L470 282 L590 302"/><path d="M470 282 L452 148"/><path d="M458 192 L590 302"/></g>
<path d="M120 140 L132 220 M130 214 L110 320" stroke="#1f2a24" stroke-width="10" stroke-linecap="round"/>
<path d="M120 140 L114 108 C140 104 160 104 184 116" stroke="#3c4740" stroke-width="7" fill="none" stroke-linecap="round"/>
<path d="M452 148 L446 116" stroke="#3c4740" stroke-width="7"/><path d="M418 110 C434 102 466 104 478 112 L472 120 L424 118Z" fill="#5a3b26"/>
<circle cx="470" cy="282" r="20" fill="none" stroke="#3c4740" stroke-width="4"/>
</svg>
</div>
<div class="model-body">
<div class="kicker">Heavy long-john · bakeries, florists, builders</div>
<h3>Værk</h3>
<p>A reinforced frame, dual-piston hydraulic brakes and a lockable box built to your dimensions. Registered for commercial use.</p>
<ul class="specs">
<li><span>Length</span><span>262 cm</span></li>
<li><span>Box payload</span><span>150 kg</span></li>
<li><span>Bike weight</span><span>from 38 kg</span></li>
</ul>
<div class="price-row">
<div class="price"><small>from</small>€5,400</div>
<a href="#configure" class="link-arrow" data-model="vaerk">Configure →</a>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- WORKSHOP -->
<section id="workshop" class="dark">
<div class="wrap work-grid">
<div class="work-art reveal">
<svg viewBox="0 0 560 520" aria-label="Illustration of the Lumen workshop bench" role="img">
<rect width="560" height="520" fill="#27342d"/>
<rect x="0" y="0" width="560" height="320" fill="#2d3b33"/>
<!-- window -->
<rect x="320" y="40" width="190" height="200" rx="4" fill="#e2a640" opacity=".9"/>
<path d="M415 40 V240 M320 140 H510" stroke="#2d3b33" stroke-width="8"/>
<path d="M320 240 L180 520 L560 520 L560 380 Z" fill="#e2a640" opacity=".07"/>
<!-- tools pegboard -->
<rect x="40" y="50" width="240" height="190" rx="4" fill="#33433a"/>
<g fill="#4a5a50">
<circle cx="60" cy="70" r="2"/><circle cx="100" cy="70" r="2"/><circle cx="140" cy="70" r="2"/><circle cx="180" cy="70" r="2"/><circle cx="220" cy="70" r="2"/><circle cx="260" cy="70" r="2"/>
<circle cx="60" cy="220" r="2"/><circle cx="100" cy="220" r="2"/><circle cx="140" cy="220" r="2"/><circle cx="180" cy="220" r="2"/><circle cx="220" cy="220" r="2"/><circle cx="260" cy="220" r="2"/>
</g>
<g stroke="#b9c1ba" stroke-width="7" stroke-linecap="round" fill="none">
<path d="M70 90 V180"/><path d="M60 90 H80"/>
<path d="M110 90 V190" stroke="#e2a640"/>
<path d="M150 90 L150 170 M140 170 H160"/>
<circle cx="210" cy="120" r="24" stroke-width="5"/>
<path d="M250 90 V200" stroke="#b6462f"/>
</g>
<!-- bench -->
<rect x="20" y="330" width="520" height="22" fill="#b8925e"/>
<rect x="20" y="352" width="520" height="8" fill="#8e6c40"/>
<rect x="50" y="360" width="16" height="160" fill="#1c2420"/><rect x="494" y="360" width="16" height="160" fill="#1c2420"/>
<!-- frame in jig -->
<g fill="none" stroke="#f4f0e8" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
<path d="M120 300 L230 220 L360 220 L400 300 Z"/>
<path d="M230 220 L120 300"/>
</g>
<path d="M110 330 V300 M410 330 V300 M230 330 V222" stroke="#6b736c" stroke-width="6"/>
<!-- spark -->
<g stroke="#e2a640" stroke-width="2.5" stroke-linecap="round">
<path d="M360 220 l14 -16 M360 220 l20 -4 M360 220 l6 -22 M360 220 l18 10"/>
</g>
<circle cx="360" cy="220" r="7" fill="#fff6dc"/>
<circle cx="360" cy="220" r="26" fill="#e2a640" opacity=".25"/>
<!-- label -->
<text x="40" y="470" fill="#b9c1ba" font-family="ui-monospace,Menlo,monospace" font-size="13" letter-spacing="2">MIMERSGADE 47 · 2200 KØBENHAVN N</text>
</svg>
</div>
<div>
<div class="eyebrow reveal">The workshop</div>
<h2 class="reveal" style="color:#f4f0e8">Five people, one bench,<br>no shortcuts.</h2>
<p class="lede reveal" style="margin-top:22px">Lumen began in 2014 when frame builder Mette Lund welded a long-john for her neighbour's twins. Today five of us cut, weld, paint and assemble every bike under one roof — and the person who welds your frame is the person who hands you the keys.</p>
<div class="pillars">
<div class="pillar reveal"><h3><i>01</i>Steel, not shortcuts</h3><p>Reynolds and Columbus 4130 chromoly tubing, TIG-welded and inspected joint by joint. Steel flexes, absorbs cobbles and can be repaired anywhere.</p></div>
<div class="pillar reveal"><h3><i>02</i>Fitted to your body</h3><p>A 45-minute fit session sets bar reach, saddle height and box position for the main rider — and a second rider if you share.</p></div>
<div class="pillar reveal"><h3><i>03</i>Parts we can stand behind</h3><p>Shimano, Enviolo, Bosch and Magura. Standard components, so any good bike shop in Europe can service your Lumen.</p></div>
<div class="pillar reveal"><h3><i>04</i>Powder-coated in Valby</h3><p>Two-layer coat with zinc primer, applied by a family-run finisher ten minutes away. Any RAL colour, no surcharge.</p></div>
</div>
</div>
</div>
</section>
<!-- PROCESS -->
<section id="process">
<div class="wrap">
<div class="sec-head reveal">
<div>
<div class="eyebrow">How a Lumen is made</div>
<h2>Four steps from first ride to first school run.</h2>
</div>
<p>You'll know exactly where your bike is at every stage. We send photos from the bench, and you pay the balance only when you've ridden the finished bike and are happy with it.</p>
</div>
<div class="steps">
<div class="step reveal"><div class="n">STEP 01</div><h3>Test ride</h3><p>Ride all three models around Nørrebro with your kids, dog or cargo. Free, about an hour, no obligation.</p><span class="when">Week 0</span></div>
<div class="step reveal"><div class="n">STEP 02</div><h3>Fit & specify</h3><p>We measure, agree every component and colour, and confirm a fixed price in writing. 20% deposit reserves your slot.</p><span class="when">Week 1</span></div>
<div class="step reveal"><div class="n">STEP 03</div><h3>Build</h3><p>Frame cutting, welding, alignment, paint and assembly — with progress photos at each stage.</p><span class="when">Weeks 2–10</span></div>
<div class="step reveal"><div class="n">STEP 04</div><h3>Handover</h3><p>A final fit, a riding lesson and a first service at 300 km — included. Delivery anywhere in Denmark is free.</p><span class="when">Weeks 10–12</span></div>
</div>
</div>
</section>
<!-- CONFIGURATOR -->
<section id="configure" class="config">
<div class="wrap">
<div class="sec-head reveal">
<div>
<div class="eyebrow">Price your build</div>
<h2>Sketch your Lumen.</h2>
</div>
<p>A quick estimate to plan with. Your final, fixed quote comes after the fitting — and it won't change once you've signed it.</p>
</div>
<div class="cfg">
<form class="cfg-panel" id="cfgForm" onsubmit="return false">
<fieldset>
<legend>Model <span>Frame & geometry</span></legend>
<div class="opts">
<div class="opt"><input type="radio" name="model" id="m-havn" value="havn" checked><label for="m-havn"><b>Havn</b><span>Long-john · €4,250</span></label></div>
<div class="opt"><input type="radio" name="model" id="m-fjord" value="fjord"><label for="m-fjord"><b>Fjord</b><span>Longtail · €3,950</span></label></div>
<div class="opt"><input type="radio" name="model" id="m-vaerk" value="vaerk"><label for="m-vaerk"><b>Værk</b><span>Heavy trade · €5,400</span></label></div>
</div>
</fieldset>
<fieldset>
<legend>Electric assist <span>Optional</span></legend>
<div class="opts">
<div class="opt"><input type="radio" name="assist" id="a-none" value="none"><label for="a-none"><b>Pedal only</b><span>Included</span></label></div>
<div class="opt"><input type="radio" name="assist" id="a-bosch" value="bosch" checked><label for="a-bosch"><b>Bosch Cargo Line</b><span>545 Wh · +€1,650</span></label></div>
<div class="opt"><input type="radio" name="assist" id="a-dual" value="dual"><label for="a-dual"><b>Dual battery</b><span>1,045 Wh · +€2,350</span></label></div>
</div>
</fieldset>
<fieldset>
<legend>Drivetrain</legend>
<div class="opts">
<div class="opt"><input type="radio" name="drive" id="d-nexus" value="nexus" checked><label for="d-nexus"><b>Shimano Nexus 8</b><span>Hub gears · included</span></label></div>
<div class="opt"><input type="radio" name="drive" id="d-enviolo" value="enviolo"><label for="d-enviolo"><b>Enviolo + Gates belt</b><span>Stepless, no oil · +€690</span></label></div>
</div>
</fieldset>
<fieldset>
<legend>Box & cover</legend>
<div class="opts">
<div class="opt"><input type="radio" name="box" id="b-open" value="open" checked><label for="b-open"><b>Open box</b><span>Bench & 2 belts · included</span></label></div>
<div class="opt"><input type="radio" name="box" id="b-canopy" value="canopy"><label for="b-canopy"><b>Rain canopy</b><span>Clear-view hood · +€420</span></label></div>
<div class="opt"><input type="radio" name="box" id="b-lock" value="lock"><label for="b-lock"><b>Lockable lid</b><span>Aluminium hinged · +€560</span></label></div>
</div>
</fieldset>
<fieldset>
<legend>Colour <span id="colourName">Nørrebro Green</span></legend>
<div class="swatches">
<div class="sw"><input type="radio" name="colour" id="c-green" value="#1f2a24" data-name="Nørrebro Green" checked><label for="c-green"><i style="background:#1f2a24"></i>Green</label></div>
<div class="sw"><input type="radio" name="colour" id="c-red" value="#9b3a27" data-name="Harbour Red"><label for="c-red"><i style="background:#9b3a27"></i>Red</label></div>
<div class="sw"><input type="radio" name="colour" id="c-blue" value="#2b4a6b" data-name="Øresund Blue"><label for="c-blue"><i style="background:#2b4a6b"></i>Blue</label></div>
<div class="sw"><input type="radio" name="colour" id="c-sand" value="#c9b48e" data-name="Dune Sand"><label for="c-sand"><i style="background:#c9b48e"></i>Sand</label></div>
<div class="sw"><input type="radio" name="colour" id="c-ink" value="#16181a" data-name="Night Black"><label for="c-ink"><i style="background:#16181a"></i>Black</label></div>
<div class="sw"><input type="radio" name="colour" id="c-brass" value="#c99232" data-name="Lumen Brass"><label for="c-brass"><i style="background:#c99232"></i>Brass</label></div>
</div>
</fieldset>
</form>
<aside class="cfg-preview">
<div class="stage">
<svg viewBox="0 0 720 440" id="previewBike" aria-label="Preview of your configured bike" role="img">
<ellipse cx="360" cy="400" rx="300" ry="9" fill="#1c2420" opacity=".08"/>
<use href="#wheel-small" x="130" y="332"/><use href="#wheel-big" x="570" y="314"/>
<g id="pvCanopy" style="display:none"><path d="M204 198 C210 110 300 96 386 120 L392 198 Z" fill="#cfe1e6" opacity=".55" stroke="#8aa3aa" stroke-width="3"/></g>
<path id="pvBox" d="M200 198 L392 198 L384 280 L208 280 Z" fill="#d9b98a" stroke="#b8925e" stroke-width="2"/>
<rect id="pvLid" x="196" y="188" width="200" height="14" rx="4" fill="#9aa3a6" style="display:none"/>
<g fill="none" stroke="#1f2a24" stroke-width="11" stroke-linecap="round" stroke-linejoin="round" class="pv-frame">
<path d="M178 212 L192 290 L452 294 L570 314"/><path d="M452 294 L432 160"/><path d="M440 204 L570 314"/>
<path d="M172 176 L184 242" stroke-width="15"/><path d="M182 236 L130 332" stroke-width="8"/>
</g>
<path d="M172 176 L166 140 C190 136 214 136 238 148" stroke="#3c4740" stroke-width="7" fill="none" stroke-linecap="round"/>
<path d="M432 160 L426 128" stroke="#3c4740" stroke-width="7"/><path d="M398 122 C414 114 446 116 458 124 L452 132 L404 130Z" fill="#5a3b26"/>
<g id="pvMotor"><rect x="430" y="276" width="44" height="34" rx="8" fill="#2b2f2d"/><rect x="438" y="198" width="14" height="60" rx="5" fill="#2b2f2d" transform="rotate(-8 445 228)"/></g>
<g id="pvBelt"><circle cx="452" cy="294" r="20" fill="none" stroke="#3c4740" stroke-width="4"/><path d="M452 274 L570 304 M452 314 L570 324" stroke="#6b736c" stroke-width="2" id="pvChain"/></g>
</svg>
</div>
<div class="summary" aria-live="polite">
<div class="row"><span id="sModel">Havn frame & build</span><span id="sModelP">€4,250</span></div>
<div class="row"><span id="sAssist">Bosch Cargo Line</span><span id="sAssistP">+€1,650</span></div>
<div class="row"><span id="sDrive">Shimano Nexus 8</span><span id="sDriveP">Included</span></div>
<div class="row"><span id="sBox">Open box</span><span id="sBoxP">Included</span></div>
<div class="row"><span>Fitting, delivery in DK, 300 km service</span><span>Included</span></div>
<div class="total"><span>Estimated total<br><small style="color:#8f9a92">incl. 25% Danish VAT</small></span><b id="total">€5,900</b></div>
<p class="fine">Deposit to reserve a slot: <strong id="deposit" style="color:#fff">€1,180</strong> (20%), fully refundable until frame cutting. Balance due at handover. Interest-free payment over 12 months available.</p>
<a href="#visit" class="btn btn-brass" id="cfgCta">Book a fitting for this build</a>
</div>
</aside>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section id="riders">
<div class="wrap">
<div class="sec-head reveal">
<div>
<div class="eyebrow">Owners</div>
<h2>Ridden daily, through every Danish season.</h2>
</div>
<p>We don't pay for reviews and we don't edit them. These are owners who agreed to let us share what they wrote after their one-year service.</p>
</div>
<div class="quotes">
<figure class="quote big reveal" style="margin:0">
<div class="stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>“We sold our car four months after picking up the Havn. Three years, two kids and one very large Christmas tree later, it still feels like the best money we've spent.”</blockquote>
<figcaption class="who"><div class="av">SK</div><div><b>Sofie & Kasper Holm</b><span>Havn, e-assist · Vesterbro, since 2023</span></div></figcaption>
</figure>
<figure class="quote reveal" style="margin:0">
<div class="stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>“Mette answered my emails on a Sunday. When a spoke went, they fixed it the same afternoon.”</blockquote>
<figcaption class="who"><div class="av">JB</div><div><b>Jonas Brandt</b><span>Fjord · Frederiksberg</span></div></figcaption>
</figure>
<figure class="quote reveal" style="margin:0">
<div class="stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>“Our bakery does 40 deliveries a morning on the Værk. It's paid for itself twice over.”</blockquote>
<figcaption class="who"><div class="av">AR</div><div><b>Amira Rahimi</b><span>Værk · Bageri Rahimi, Amager</span></div></figcaption>
</figure>
</div>
<div class="rating reveal"><b>4.9</b><span>average from 318 verified owner reviews<br>collected after each bike's one-year service</span></div>
</div>
</section>
<!-- PROMISE -->
<section style="padding-top:0">
<div class="wrap">
<div class="promise">
<div class="pr reveal">
<svg viewBox="0 0 34 34" fill="none" stroke="#1c2420" stroke-width="1.8" stroke-linejoin="round"><path d="M17 3 L29 8 V17 C29 24 23.5 29 17 31 C10.5 29 5 24 5 17 V8 Z"/><path d="M11.5 17 L15.5 21 L23 13" stroke="#b9801f"/></svg>
<h3>Lifetime frame warranty</h3><p>Every weld, for as long as the bike exists — transferable to the next owner.</p>
</div>
<div class="pr reveal">
<svg viewBox="0 0 34 34" fill="none" stroke="#1c2420" stroke-width="1.8"><rect x="4" y="9" width="26" height="18" rx="3"/><path d="M4 15 H30" stroke="#b9801f"/><path d="M9 22 H15"/></svg>
<h3>Fixed, written quote</h3><p>The price you sign at your fitting is the price you pay. No surprises at handover.</p>
</div>
<div class="pr reveal">
<svg viewBox="0 0 34 34" fill="none" stroke="#1c2420" stroke-width="1.8" stroke-linecap="round"><path d="M6 17 A11 11 0 1 1 9.2 24.8"/><path d="M6 25 V17 H14" stroke="#b9801f"/></svg>
<h3>Refundable deposit</h3><p>Change your mind before we cut your tubes and you get every krone back.</p>
</div>
<div class="pr reveal">
<svg viewBox="0 0 34 34" fill="none" stroke="#1c2420" stroke-width="1.8" stroke-linecap="round"><circle cx="17" cy="17" r="12"/><path d="M17 10 V17 L22 20" stroke="#b9801f"/></svg>
<h3>2 years of service</h3><p>Two free annual services and priority repairs, usually same day in Copenhagen.</p>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" style="padding-top:20px">
<div class="wrap faq-grid">
<div class="reveal">
<div class="eyebrow">Questions</div>
<h2>Before you spend four thousand euros.</h2>
<p class="lede" style="margin-top:20px">It's a serious purchase and you should ask us anything. If it isn't answered here, call the workshop on <a href="tel:+4532194707">+45 32 19 47 07</a> — one of the builders will pick up.</p>
</div>
<div class="reveal">
<details open><summary>Why does a custom cargo bike cost more than a mass-produced one?</summary><p>Because roughly 60 hours of skilled work go into every Lumen, in Denmark, by people paid Danish wages. In return you get a frame fitted to you, components chosen for your use rather than a price point, and a bike designed to be repaired rather than replaced. Most of our owners replace a second car — or the first one.</p></details>
<details><summary>Can I ride before I commit?</summary><p>Yes, and we'd rather you did. Test rides are free and last about an hour. Bring your children, your dog, or whatever you plan to carry. We have child seats, helmets and a 20 kg sack of flour for anyone who wants to feel a loaded box.</p></details>
<details><summary>What if I live outside Copenhagen?</summary><p>Delivery is free anywhere in Denmark. For Sweden, Germany, the Netherlands and Norway we deliver by van for a flat €290 and do the handover and fit at your door. Remote fittings by video are possible with a few measurements you take at home.</p></details>
<details><summary>How does payment work?</summary><p>A 20% deposit reserves your build slot and is fully refundable until we cut your frame tubes — we'll tell you the date in advance. The balance is due only at handover, once you've ridden the finished bike. We accept bank transfer, MobilePay and card, and offer 0% financing over 12 months.</p></details>
<details><summary>Is it safe for children?</summary><p>Every Havn and Værk box is load-tested to twice its rated payload and meets DIN 79010, the European standard for cargo bikes. Child benches include three-point harnesses, and the low centre of gravity means the bike stands securely on its centre stand while you load.</p></details>
<details><summary>What happens if something breaks?</summary><p>The frame is covered for life, components for two years, and the Bosch system per Bosch's own warranty. We use standard parts, so any competent bike shop can service it — but if you're in Copenhagen, bring it in and we'll usually fix it the same day.</p></details>
</div>
</div>
</section>
<!-- VISIT -->
<section id="visit" class="dark">
<div class="wrap visit-grid">
<div>
<div class="eyebrow reveal">Visit the workshop</div>
<h2 class="reveal" style="color:#f4f0e8">Come ride one.<br>The coffee's on us.</h2>
<p class="lede reveal" style="margin-top:22px">Test rides happen from the workshop door, straight onto the cycle lanes of Nørrebro. Book a slot and we'll have the right model, size and child seat ready for you.</p>
<dl class="info reveal">
<div><dt>Address</dt><dd>Mimersgade 47, Baghuset<br>2200 København N, Denmark</dd></div>
<div><dt>Hours</dt><dd>Tue–Fri 10:00–18:00<br>Saturday 10:00–15:00 · Sun–Mon closed</dd></div>
<div><dt>Phone</dt><dd><a href="tel:+4532194707">+45 32 19 47 07</a></dd></div>
<div><dt>Email</dt><dd><a href="mailto:hej@lumencycles.dk">hej@lumencycles.dk</a></dd></div>
<div style="border:0"><dt>Getting here</dt><dd>5 min walk from Nørrebro St. (M3, S-tog). Bike parking in the courtyard, obviously.</dd></div>
</dl>
</div>
<form class="book reveal" id="bookForm" novalidate>
<div id="formBody">
<h3>Book a free test ride</h3>
<p>We'll confirm by email within one working day.</p>
<div class="fgrid">
<div class="f"><label for="fname">Name</label><input id="fname" name="name" autocomplete="name" required><span class="err">Please tell us your name.</span></div>
<div class="f"><label for="femail">Email</label><input id="femail" name="email" type="email" autocomplete="email" required><span class="err">We need a valid email to confirm.</span></div>
<div class="f"><label for="fmodel">Model to try</label>
<select id="fmodel" name="model"><option value="havn">Havn — long-john</option><option value="fjord">Fjord — longtail</option><option value="vaerk">Værk — heavy trade</option><option value="unsure">Not sure yet — try them all</option></select></div>
<div class="f"><label for="fdate">Preferred day</label><input id="fdate" name="date" type="date" required><span class="err">Choose a Tuesday–Saturday.</span></div>
<div class="f full"><label for="fnote">What will you carry? <span style="font-weight:400;color:var(--muted)">(optional)</span></label><textarea id="fnote" name="note" placeholder="Two kids aged 2 and 5, the weekly shop, a 30 kg Labrador…"></textarea></div>
</div>
<button type="submit" class="btn btn-primary">Request my test ride</button>
<p class="formnote">No payment, no obligation. We never share your details.</p>
</div>
<div class="thanks" id="thanks" role="status">
<svg viewBox="0 0 56 56" fill="none"><circle cx="28" cy="28" r="26" stroke="#e2a640" stroke-width="2.5"/><path d="M17 29 L25 37 L40 20" stroke="#1c2420" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
<h3>Tak! You're on the list.</h3>
<p id="thanksMsg">We'll email you within one working day to confirm a time.</p>
</div>
</form>
</div>
</section>
</main>
<footer>
<div class="wrap">
<div class="foot">
<div>
<a href="#top" class="logo">
<svg width="34" height="34" viewBox="0 0 34 34" aria-hidden="true"><rect width="34" height="34" rx="8" fill="#2a332e"/><circle cx="17" cy="17" r="7.5" fill="none" stroke="#e2a640" stroke-width="3"/><circle cx="17" cy="17" r="2" fill="#e2a640"/></svg>
<span>Lumen Cycles</span>
</a>
<p style="max-width:34ch">Custom cargo bikes, built by hand in Copenhagen since 2014. Forty bikes a season, each one made to order.</p>
</div>
<div><h4>Bikes</h4><ul><li><a href="#models">Havn long-john</a></li><li><a href="#models">Fjord longtail</a></li><li><a href="#models">Værk trade</a></li><li><a href="#configure">Configure & price</a></li></ul></div>
<div><h4>Owners</h4><ul><li><a href="#faq">Warranty</a></li><li><a href="#faq">Service & repairs</a></li><li><a href="#faq">Financing</a></li><li><a href="#riders">Reviews</a></li></ul></div>
<div><h4>Workshop</h4><ul><li><a href="#workshop">Our story</a></li><li><a href="#process">How we build</a></li><li><a href="#visit">Visit & test ride</a></li><li><a href="mailto:hej@lumencycles.dk">hej@lumencycles.dk</a></li></ul></div>
</div>
<div class="legal">
<span>© <span id="yr">2026</span> Lumen Cycles ApS · CVR 35 81 42 09 · Mimersgade 47, 2200 København N</span>
<span>Member of Dansk Cyklist Forbund · Prices include 25% VAT</span>
</div>
</div>
</footer>
<script>
(function(){
// Nav
var nav=document.getElementById('nav');
var onScroll=function(){nav.classList.toggle('scrolled',window.scrollY>8)};
window.addEventListener('scroll',onScroll,{passive:true});onScroll();
var menuBtn=document.getElementById('menuBtn'),links=document.getElementById('navLinks');
menuBtn.addEventListener('click',function(){var o=links.classList.toggle('open');menuBtn.setAttribute('aria-expanded',o)});
links.addEventListener('click',function(e){if(e.target.tagName==='A'){links.classList.remove('open');menuBtn.setAttribute('aria-expanded','false')}});
document.getElementById('yr').textContent=new Date().getFullYear();
// Reveal
var els=document.querySelectorAll('.reveal');
if('IntersectionObserver' in window){
var io=new IntersectionObserver(function(es){es.forEach(function(en){if(en.isIntersecting){en.target.classList.add('in');io.unobserve(en.target)}})},{threshold:.12,rootMargin:'0px 0px -40px 0px'});
els.forEach(function(el){io.observe(el)});
} else els.forEach(function(el){el.classList.add('in')});
// Configurator
var P={
model:{havn:['Havn frame & build',4250],fjord:['Fjord frame & build',3950],vaerk:['Værk frame & build',5400]},
assist:{none:['Pedal only',0],bosch:['Bosch Cargo Line, 545 Wh',1650],dual:['Bosch dual battery, 1,045 Wh',2350]},
drive:{nexus:['Shimano Nexus 8',0],enviolo:['Enviolo + Gates belt',690]},
box:{open:['Open box with bench',0],canopy:['Rain canopy',420],lock:['Lockable aluminium lid',560]}
};
var form=document.getElementById('cfgForm');
var eur=function(n){return '€'+n.toLocaleString('en-US')};
var add=function(n){return n?'+'+eur(n):'Included'};
var val=function(n){return form.querySelector('input[name="'+n+'"]:checked').value};
var set=function(id,t){document.getElementById(id).textContent=t};
function update(){
var m=val('model'),a=val('assist'),d=val('drive'),b=val('box');
var c=form.querySelector('input[name="colour"]:checked');
if(m==='fjord'&&b!=='open'){ // Fjord has no front box
document.getElementById('b-open').checked=true;b='open';
}
['b-canopy','b-lock'].forEach(function(id){var i=document.getElementById(id);i.disabled=(m==='fjord');i.nextElementSibling.style.opacity=m==='fjord'?.4:1});
document.querySelector('label[for="b-open"] b').textContent=m==='fjord'?'Rear deck':'Open box';
var total=P.model[m][1]+P.assist[a][1]+P.drive[d][1]+P.box[b][1];
set('sModel',P.model[m][0]);set('sModelP',eur(P.model[m][1]));
set('sAssist',P.assist[a][0]);set('sAssistP',add(P.assist[a][1]));
set('sDrive',P.drive[d][0]);set('sDriveP',add(P.drive[d][1]));
set('sBox',m==='fjord'?'Rear deck with pads & footrests':P.box[b][0]);set('sBoxP',add(P.box[b][1]));
set('total',eur(total));set('deposit',eur(Math.round(total*0.2)));
set('colourName',c.dataset.name);
document.querySelectorAll('.pv-frame').forEach(function(g){g.setAttribute('stroke',c.value)});
document.getElementById('pvCanopy').style.display=b==='canopy'?'':'none';
document.getElementById('pvLid').style.display=b==='lock'?'':'none';
document.getElementById('pvBox').style.display=m==='fjord'?'none':'';
document.getElementById('pvMotor').style.display=a==='none'?'none':'';
document.getElementById('pvChain').setAttribute('stroke',d==='enviolo'?'#1c2420':'#6b736c');
document.getElementById('pvChain').setAttribute('stroke-width',d==='enviolo'?'4':'2');
var sel=document.getElementById('fmodel');if(sel)sel.value=m;
}
form.addEventListener('change',update);update();
document.querySelectorAll('[data-model]').forEach(function(a){
a.addEventListener('click',function(){document.getElementById('m-'+a.dataset.model).checked=true;update()});
});
// Booking form (handled locally)
var book=document.getElementById('bookForm');
var dateIn=document.getElementById('fdate');
var t=new Date();t.setDate(t.getDate()+1);dateIn.min=t.toISOString().slice(0,10);
function check(f){
var i=f.querySelector('input'),ok=true;
if(!i)return true;
if(i.type==='email')ok=/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(i.value.trim());
else if(i.type==='date'){ok=!!i.value&&i.value>=i.min;if(ok){var d=new Date(i.value+'T12:00:00').getDay();ok=d>=2&&d<=6}}
else ok=i.value.trim().length>1;
f.classList.toggle('invalid',!ok);return ok;
}
book.querySelectorAll('.f').forEach(function(f){var i=f.querySelector('input');if(i&&i.required)i.addEventListener('blur',function(){check(f)})});
book.addEventListener('submit',function(e){
e.preventDefault();
var fields=[].slice.call(book.querySelectorAll('.f')).filter(function(f){var i=f.querySelector('input');return i&&i.required});
var ok=fields.map(check).every(Boolean);
if(!ok){var bad=book.querySelector('.invalid input');if(bad)bad.focus();return}
var name=document.getElementById('fname').value.trim().split(' ')[0];
var d=new Date(dateIn.value+'T12:00:00').toLocaleDateString('en-GB',{weekday:'long',day:'numeric',month:'long'});
document.getElementById('thanksMsg').textContent='Thanks, '+name+'. We’ve pencilled you in for '+d+' and will email you within one working day to confirm a time.';
document.getElementById('formBody').style.display='none';
document.getElementById('thanks').style.display='block';
});
})();
</script>
</body>
</html>

