Run details
- Model
- claude-fable-5-1
- Route
- Claude Code CLI
- Reasoning
- provider default
- Limits
- 60 min · 128,000 output tokens
- Date
- 21 Oct 2026
- Time
- 5 min 44 s
- Size
- 57 kB
- Tokens
- 162 in, 29,465 out
- List price
- $1.47 ($10 in / $50 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
57 kB 949 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 to order in Copenhagen</title>
<meta name="description" content="Lumen Cycles builds made-to-measure cargo bikes in our Nørrebro workshop. Steel frames, lifetime frame warranty, delivered in 10 to 14 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='%231b1a17'/%3E%3Ccircle cx='10' cy='21' r='5' fill='none' stroke='%23e9b44c' stroke-width='2.2'/%3E%3Ccircle cx='23' cy='21' r='5' fill='none' stroke='%23e9b44c' stroke-width='2.2'/%3E%3Cpath d='M10 21l5-9h6M15 12v9M23 21l-4-9' fill='none' stroke='%23f4efe6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E">
<style>
:root{
--ink:#1b1a17;
--ink-2:#3a3833;
--muted:#6f6a60;
--line:#e2dccf;
--paper:#f6f2ea;
--paper-2:#efe9dc;
--white:#fffdf9;
--brass:#c8923a;
--brass-2:#e9b44c;
--moss:#4f6b4a;
--max:1180px;
--radius:14px;
--serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,"Hoefler Text",Georgia,"Times New Roman",serif;
--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
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;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.1;margin:0}
h1{font-size:clamp(2.6rem,5.6vw,4.6rem)}
h2{font-size:clamp(2rem,3.8vw,3rem)}
h3{font-size:1.45rem}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.eyebrow{font-family:var(--sans);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:14px;display:block}
.lede{font-size:1.2rem;color:var(--ink-2);max-width:60ch}
.muted{color:var(--muted)}
section{padding:clamp(72px,9vw,128px) 0}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:600;font-size:.98rem;border:1.5px solid var(--ink);background:var(--ink);color:var(--white);cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;font-family:inherit;line-height:1}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(27,26,23,.5)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--white)}
.btn.brass{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.btn.brass:hover{background:var(--brass-2);border-color:var(--brass-2)}
.btn svg{width:18px;height:18px}
:focus-visible{outline:3px solid var(--brass-2);outline-offset:3px;border-radius:6px}
/* NAV */
header{position:sticky;top:0;z-index:50;background:rgba(246,242,234,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
header.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:1.35rem;letter-spacing:.01em}
.logo svg{width:34px;height:34px}
.nav ul{list-style:none;display:flex;gap:34px;margin:0;padding:0}
.nav ul a{font-size:.95rem;font-weight:500;color:var(--ink-2);position:relative}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav ul a:hover::after{transform:scaleX(1)}
.nav .cta{display:flex;gap:10px;align-items:center}
.nav .btn{padding:12px 20px;font-size:.9rem}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;padding:10px}
.burger span{display:block;height:2px;background:var(--ink);margin:6px 0;transition:.25s}
.mobile-menu{display:none;border-top:1px solid var(--line);background:var(--paper)}
.mobile-menu a{display:block;padding:16px 0;border-bottom:1px solid var(--line);font-size:1.1rem}
@media(max-width:900px){
.nav ul,.nav .cta .ghost{display:none}
.burger{display:block}
body.menu-open .mobile-menu{display:block}
body.menu-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}
/* HERO */
.hero{padding:clamp(40px,6vw,80px) 0 0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.hero h1{margin:0 0 24px}
.hero h1 em{font-style:italic;color:var(--brass)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0 28px}
.hero-meta{display:flex;gap:28px;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}
.hero-meta b{display:block;color:var(--ink);font-family:var(--serif);font-size:1.5rem;font-weight:500;letter-spacing:0}
.hero-art{position:relative}
.hero-art .plate{background:linear-gradient(160deg,#ebe4d4,#e3dbc8);border-radius:28px;padding:clamp(20px,3vw,36px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 30px 60px -40px rgba(27,26,23,.5)}
.hero-art .tag{position:absolute;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:.8rem;box-shadow:0 12px 30px -18px rgba(0,0,0,.35);line-height:1.3}
.hero-art .tag b{display:block;font-size:.95rem}
.tag.t1{left:-14px;top:18%}
.tag.t2{right:-10px;bottom:22%}
@media(max-width:900px){
.hero-grid{grid-template-columns:1fr}
.tag.t1{left:8px;top:6%}
.tag.t2{right:8px;bottom:8%}
}
/* TRUST STRIP */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2);padding:22px 0;margin-top:clamp(48px,6vw,80px)}
.strip .wrap{display:flex;gap:clamp(20px,4vw,56px);flex-wrap:wrap;justify-content:space-between;align-items:center}
.strip .item{display:flex;align-items:center;gap:12px;font-size:.92rem;color:var(--ink-2)}
.strip .item svg{width:22px;height:22px;flex:none;color:var(--brass)}
/* MODELS */
.section-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:clamp(32px,4vw,56px);flex-wrap:wrap}
.section-head p{max-width:52ch;margin:0;color:var(--ink-2)}
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.model{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.model:hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(27,26,23,.55)}
.model .art{background:var(--paper-2);padding:28px 24px 12px;aspect-ratio:4/3;display:flex;align-items:center}
.model .body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.model .price{font-family:var(--serif);font-size:1.5rem;margin-top:auto;padding-top:14px;border-top:1px dashed var(--line)}
.model .price small{font-family:var(--sans);font-size:.8rem;color:var(--muted);display:block;letter-spacing:.04em}
.spec{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.spec span{font-size:.76rem;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--ink-2);background:var(--paper)}
.model .badge{position:absolute;top:16px;left:16px;background:var(--ink);color:var(--white);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:999px}
.model{position:relative}
@media(max-width:900px){.models{grid-template-columns:1fr}}
/* PROCESS */
.dark{background:var(--ink);color:var(--paper)}
.dark .eyebrow{color:var(--brass-2)}
.dark .muted{color:#b4ad9f}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,.14);margin-top:48px}
.step{padding:36px 28px 36px 0;border-right:1px solid rgba(255,255,255,.14);position:relative}
.step:not(:first-child){padding-left:28px}
.step:last-child{border-right:0}
.step .n{font-family:var(--mono);color:var(--brass-2);font-size:.85rem;letter-spacing:.1em;margin-bottom:22px}
.step h3{margin-bottom:12px;font-size:1.35rem}
.step p{color:#b4ad9f;font-size:.96rem;margin:0}
.step .wk{position:absolute;top:36px;right:28px;font-size:.75rem;color:#8d877a;letter-spacing:.08em;text-transform:uppercase}
.step:last-child .wk{right:0}
@media(max-width:900px){
.steps{grid-template-columns:1fr 1fr}
.step{border-right:0;border-bottom:1px solid rgba(255,255,255,.14);padding-left:0 !important}
}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
/* CRAFT */
.craft-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.craft-art{background:var(--paper-2);border-radius:var(--radius);padding:clamp(20px,3vw,36px)}
.craft-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px}
.craft-list li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.craft-list .ic{width:44px;height:44px;border-radius:12px;background:var(--white);border:1px solid var(--line);display:grid;place-items:center;color:var(--brass)}
.craft-list .ic svg{width:22px;height:22px}
.craft-list b{display:block;font-family:var(--serif);font-weight:500;font-size:1.15rem;margin-bottom:2px}
.craft-list p{margin:0;color:var(--ink-2);font-size:.96rem}
@media(max-width:900px){.craft-grid{grid-template-columns:1fr}}
/* ESTIMATOR */
.estimator{background:var(--white);border:1px solid var(--line);border-radius:22px;display:grid;grid-template-columns:1.2fr .8fr;overflow:hidden;box-shadow:0 40px 80px -60px rgba(27,26,23,.45)}
.est-form{padding:clamp(24px,3.5vw,44px);display:grid;gap:28px}
.est-summary{background:var(--paper-2);padding:clamp(24px,3.5vw,44px);display:flex;flex-direction:column;border-left:1px solid var(--line)}
.field label.lbl{display:block;font-weight:600;font-size:.9rem;margin-bottom:10px}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
.choice span{display:block;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-size:.92rem;transition:.15s;background:var(--white)}
.choice span small{display:block;color:var(--muted);font-size:.78rem;margin-top:2px}
.choice input:checked + span{border-color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
.choice input:focus-visible + span{outline:3px solid var(--brass-2);outline-offset:2px}
.toggles{display:grid;gap:10px}
.toggle{display:flex;justify-content:space-between;align-items:center;gap:14px;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--white);font-size:.92rem}
.toggle:has(input:checked){border-color:var(--ink);background:var(--paper)}
.toggle input{width:20px;height:20px;accent-color:var(--ink);margin:0;flex:none}
.toggle .l{display:flex;gap:12px;align-items:center;flex:1}
.toggle .pr{color:var(--muted);font-size:.85rem;white-space:nowrap}
.total{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.total-note{font-size:.85rem;color:var(--muted)}
.lines{list-style:none;padding:0;margin:26px 0;display:grid;gap:9px;font-size:.92rem}
.lines li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted var(--line);padding-bottom:9px}
.lines li span:last-child{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.est-summary .btn{margin-top:auto;justify-content:center}
.fin{font-size:.82rem;color:var(--muted);margin-top:14px;text-align:center}
@media(max-width:900px){
.estimator{grid-template-columns:1fr}
.est-summary{border-left:0;border-top:1px solid var(--line)}
.choices{grid-template-columns:1fr}
}
/* TESTIMONIALS */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column;gap:18px}
.quote .stars{color:var(--brass);letter-spacing:2px;font-size:.9rem}
.quote blockquote{margin:0;font-family:var(--serif);font-size:1.22rem;line-height:1.45;flex:1}
.quote .who{display:flex;align-items:center;gap:12px;font-size:.9rem}
.quote .who .av{width:40px;height:40px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;font-family:var(--serif);font-size:.95rem;color:var(--ink-2);border:1px solid var(--line)}
.quote .who small{display:block;color:var(--muted)}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
/* WORKSHOP / VISIT */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:start}
.hours{display:grid;grid-template-columns:auto 1fr;gap:8px 28px;font-size:.95rem;margin:20px 0 28px;color:var(--ink-2)}
.hours b{color:var(--ink);font-weight:600}
.map{background:var(--paper-2);border-radius:var(--radius);border:1px solid var(--line);overflow:hidden}
form.contact{display:grid;gap:16px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,34px)}
form.contact .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form.contact label{display:grid;gap:6px;font-size:.85rem;font-weight:600}
form.contact input,form.contact select,form.contact textarea{font:inherit;font-size:.96rem;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);width:100%}
form.contact input:focus,form.contact select:focus,form.contact textarea:focus{outline:none;border-color:var(--ink)}
form.contact .err{font-size:.8rem;color:#a4442e;font-weight:500;display:none}
form.contact label.invalid .err{display:block}
form.contact label.invalid input{border-color:#a4442e}
.form-ok{display:none;background:#eef3ea;border:1px solid #cfdcc8;color:#2f4a2b;padding:18px 20px;border-radius:12px}
.form-ok.show{display:block}
@media(max-width:900px){.visit{grid-template-columns:1fr}form.contact .row{grid-template-columns:1fr}}
/* FAQ */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:var(--serif);font-size:1.25rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;transition:.2s;font-family:var(--sans);font-size:1.1rem;color:var(--ink-2)}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--ink);color:var(--white);border-color:var(--ink)}
.faq .a{padding:0 0 24px;color:var(--ink-2);max-width:66ch}
.faq .a p:last-child{margin:0}
/* FOOTER */
footer{background:var(--ink);color:#b4ad9f;padding:64px 0 32px;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12)}
footer .logo{color:var(--paper)}
footer h4{font-family:var(--sans);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);margin-bottom:16px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
footer a:hover{color:var(--paper)}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;font-size:.82rem}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
/* Reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.rv{opacity:1;transform:none;transition:none}
.btn,.model{transition:none}
}
.bikeanim .spoke-wheel{transform-origin:center;transform-box:fill-box}
</style>
</head>
<body>
<header id="top">
<div class="wrap nav">
<a class="logo" href="#top" aria-label="Lumen Cycles home">
<svg viewBox="0 0 32 32" aria-hidden="true"><rect width="32" height="32" rx="7" fill="#1b1a17"/><circle cx="10" cy="21" r="5" fill="none" stroke="#e9b44c" stroke-width="2.2"/><circle cx="23" cy="21" r="5" fill="none" stroke="#e9b44c" stroke-width="2.2"/><path d="M10 21l5-9h6M15 12v9M23 21l-4-9" fill="none" stroke="#f4efe6" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
Lumen Cycles
</a>
<nav aria-label="Primary">
<ul>
<li><a href="#models">Models</a></li>
<li><a href="#process">How it works</a></li>
<li><a href="#craft">Craft</a></li>
<li><a href="#estimate">Configure</a></li>
<li><a href="#visit">Workshop</a></li>
</ul>
</nav>
<div class="cta">
<a class="btn ghost" href="#estimate">Price your build</a>
<a class="btn" href="#visit">Book a fitting</a>
<button class="burger" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu"><span></span><span></span><span></span></button>
</div>
</div>
<div class="mobile-menu" id="mobile-menu">
<div class="wrap">
<a href="#models">Models</a>
<a href="#process">How it works</a>
<a href="#craft">Craft</a>
<a href="#estimate">Configure & price</a>
<a href="#visit">Visit the workshop</a>
<a href="#faq">Questions</a>
</div>
</div>
</header>
<main>
<!-- HERO -->
<section class="hero">
<div class="wrap hero-grid">
<div>
<span class="eyebrow">Nørrebro, Copenhagen · Est. 2014</span>
<h1>A cargo bike built around <em>your</em> life, not the other way round.</h1>
<p class="lede">Every Lumen is measured, welded and finished by hand in our workshop on Jægersborggade. We build about 180 bikes a year, and we know each of them by name.</p>
<div class="hero-actions">
<a class="btn brass" href="#estimate">Configure & price your bike
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>
<a class="btn ghost" href="#process">See how a build works</a>
</div>
<div class="hero-meta">
<div><b>10–14 wks</b>from fitting to handover</div>
<div><b>Lifetime</b>frame warranty</div>
<div><b>1,900+</b>bikes on the road</div>
</div>
</div>
<div class="hero-art rv">
<div class="plate">
<!-- Cargo bike illustration -->
<svg class="bikeanim" viewBox="0 0 640 380" role="img" aria-labelledby="bike-title">
<title id="bike-title">Illustration of a Lumen front-loading cargo bike</title>
<defs>
<linearGradient id="boxg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#2a2925"/><stop offset="1" stop-color="#1b1a17"/>
</linearGradient>
<linearGradient id="wood" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#d9b77c"/><stop offset=".5" stop-color="#c9a263"/><stop offset="1" stop-color="#d9b77c"/>
</linearGradient>
</defs>
<!-- ground shadow -->
<ellipse cx="320" cy="338" rx="290" ry="10" fill="rgba(27,26,23,.12)"/>
<!-- rear wheel -->
<g class="spoke-wheel" id="rw">
<circle cx="520" cy="262" r="72" fill="none" stroke="#1b1a17" stroke-width="9"/>
<circle cx="520" cy="262" r="62" fill="none" stroke="#8d877a" stroke-width="1.5"/>
<g stroke="#6f6a60" stroke-width="1.6">
<path d="M520 200v124M458 262h124M476 218l88 88M564 218l-88 88"/>
<path d="M490 206l60 112M550 206l-60 112M464 232l112 60M576 232l-112 60"/>
</g>
<circle cx="520" cy="262" r="9" fill="#c8923a"/>
</g>
<!-- front wheel -->
<g class="spoke-wheel" id="fw">
<circle cx="118" cy="284" r="50" fill="none" stroke="#1b1a17" stroke-width="9"/>
<circle cx="118" cy="284" r="41" fill="none" stroke="#8d877a" stroke-width="1.5"/>
<g stroke="#6f6a60" stroke-width="1.6">
<path d="M118 243v82M77 284h82M89 255l58 58M147 255l-58 58"/>
<path d="M98 246l40 76M138 246l-40 76M80 264l76 40M156 264l-76 40"/>
</g>
<circle cx="118" cy="284" r="8" fill="#c8923a"/>
</g>
<!-- low frame rail under box -->
<path d="M118 284 L160 268 L410 268" fill="none" stroke="#1b1a17" stroke-width="9" stroke-linecap="round" stroke-linejoin="round"/>
<!-- cargo box -->
<path d="M172 150 h170 a12 12 0 0 1 12 12 v88 a10 10 0 0 1 -10 10 h-174 a10 10 0 0 1 -10 -10 v-78 a22 22 0 0 1 12 -22z" fill="url(#boxg)"/>
<path d="M184 160 h150 v84 h-156 v-72 z" fill="none" stroke="rgba(255,255,255,.08)"/>
<rect x="178" y="142" width="170" height="10" rx="3" fill="url(#wood)"/>
<!-- bench inside box -->
<rect x="300" y="190" width="44" height="6" rx="2" fill="#c8923a" opacity=".9"/>
<!-- Lumen mark on box -->
<g transform="translate(246 198)">
<circle cx="0" cy="0" r="12" fill="none" stroke="#e9b44c" stroke-width="1.5"/>
<path d="M-4 -4 v8 h7" fill="none" stroke="#e9b44c" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<!-- steering linkage -->
<path d="M150 262 L380 262" fill="none" stroke="#6f6a60" stroke-width="3" stroke-dasharray="0" opacity=".6"/>
<!-- front fork / steering column -->
<path d="M118 284 L150 212 L170 212" fill="none" stroke="#1b1a17" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
<!-- main frame -->
<path d="M410 268 L392 150 M392 150 L480 150 L520 262 M480 150 L440 262 L410 268" fill="none" stroke="#1b1a17" stroke-width="9" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M440 262 L520 262" fill="none" stroke="#1b1a17" stroke-width="8" stroke-linecap="round"/>
<!-- chainring and crank -->
<circle cx="440" cy="262" r="20" fill="none" stroke="#1b1a17" stroke-width="5"/>
<circle cx="440" cy="262" r="5" fill="#1b1a17"/>
<path d="M440 262 L458 290" stroke="#1b1a17" stroke-width="6" stroke-linecap="round"/>
<rect x="452" y="286" width="20" height="7" rx="2" fill="#1b1a17"/>
<path d="M440 243 Q480 230 520 253" fill="none" stroke="#6f6a60" stroke-width="2"/>
<path d="M440 281 Q480 290 520 271" fill="none" stroke="#6f6a60" stroke-width="2"/>
<!-- seat -->
<path d="M480 150 L488 118" stroke="#1b1a17" stroke-width="7" stroke-linecap="round"/>
<path d="M468 116 h40 a6 6 0 0 1 0 12 h-40 a6 6 0 0 1 0 -12z" fill="#1b1a17"/>
<!-- handlebar / stem -->
<path d="M392 150 L384 118" stroke="#1b1a17" stroke-width="7" stroke-linecap="round"/>
<path d="M350 118 L410 118" stroke="#1b1a17" stroke-width="7" stroke-linecap="round"/>
<path d="M350 118 L344 128" stroke="#c8923a" stroke-width="7" stroke-linecap="round"/>
<path d="M410 118 L416 128" stroke="#c8923a" stroke-width="7" stroke-linecap="round"/>
<!-- front light -->
<circle cx="166" cy="150" r="7" fill="#e9b44c"/>
<path d="M156 146 L140 140 M156 154 L140 160" stroke="#e9b44c" stroke-width="2" stroke-linecap="round" opacity=".7"/>
<!-- rear rack -->
<path d="M488 150 L560 150 L556 180" fill="none" stroke="#1b1a17" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
<!-- mudguard front -->
<path d="M70 262 A50 50 0 0 1 150 246" fill="none" stroke="#1b1a17" stroke-width="4" stroke-linecap="round"/>
<!-- mudguard rear -->
<path d="M452 220 A72 72 0 0 1 594 250" fill="none" stroke="#1b1a17" stroke-width="4" stroke-linecap="round"/>
</svg>
</div>
<div class="tag t1"><b>Lumen One · Long</b>Reynolds 725 steel, moss green</div>
<div class="tag t2"><b>Build #1,912</b>Handed over last Thursday</div>
</div>
</div>
<div class="strip">
<div class="wrap">
<div class="item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6z"/><path d="M9 12l2 2 4-4"/></svg>Lifetime warranty on every frame</div>
<div class="item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7h13v10H3zM16 10h4l1 3v4h-5z"/><circle cx="7" cy="18" r="2"/><circle cx="18" cy="18" r="2"/></svg>Free delivery within Denmark</div>
<div class="item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>First service after 300 km, on us</div>
<div class="item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10l8-6 8 6v10"/><path d="M10 20v-6h4v6"/></svg>Hand-built in Copenhagen, DK</div>
<div class="item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12h4l3-7 4 14 3-7h4"/></svg>0% financing over 24 months</div>
</div>
</div>
</section>
<!-- MODELS -->
<section id="models">
<div class="wrap">
<div class="section-head rv">
<div>
<span class="eyebrow">Three platforms, endless builds</span>
<h2>Start with a platform.<br>We'll build the rest to you.</h2>
</div>
<p>Each platform is a proven geometry we have refined for over a decade. Frame size, box, drivetrain, colour and every fitting are then decided together at your fitting.</p>
</div>
<div class="models">
<article class="model rv">
<div class="art">
<svg viewBox="0 0 320 180" aria-hidden="true">
<ellipse cx="160" cy="166" rx="140" ry="5" fill="rgba(27,26,23,.1)"/>
<circle cx="60" cy="136" r="26" fill="none" stroke="#1b1a17" stroke-width="6"/>
<circle cx="262" cy="126" r="36" fill="none" stroke="#1b1a17" stroke-width="6"/>
<path d="M60 136l20-8h130" fill="none" stroke="#1b1a17" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M88 76h86a8 8 0 0 1 8 8v40h-100v-36a12 12 0 0 1 6-12z" fill="#1b1a17"/>
<rect x="86" y="70" width="90" height="6" rx="2" fill="#c9a263"/>
<path d="M210 128l-8-60h46l14 58M248 68l-24 60M242 66l4-16M220 50h26" fill="none" stroke="#1b1a17" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M60 136l16-36h10" fill="none" stroke="#1b1a17" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="226" cy="128" r="10" fill="none" stroke="#1b1a17" stroke-width="4"/>
</svg>
</div>
<div class="body">
<h3>Lumen One</h3>
<p class="muted" style="margin:0">Our two-wheel front loader. Rides like a bicycle, carries like a van. The choice for most families and for anyone who wants to go fast.</p>
<div class="spec"><span>2 wheels</span><span>Up to 100 kg in box</span><span>2 children + shopping</span><span>Steel frame</span></div>
<div class="price">From €3,900<small>or €4,990 with e-assist</small></div>
</div>
</article>
<article class="model rv">
<span class="badge">Most popular</span>
<div class="art">
<svg viewBox="0 0 320 180" aria-hidden="true">
<ellipse cx="160" cy="166" rx="140" ry="5" fill="rgba(27,26,23,.1)"/>
<circle cx="48" cy="140" r="24" fill="none" stroke="#1b1a17" stroke-width="6"/>
<circle cx="104" cy="148" r="18" fill="none" stroke="#1b1a17" stroke-width="5"/>
<circle cx="262" cy="126" r="36" fill="none" stroke="#1b1a17" stroke-width="6"/>
<path d="M48 140h160" fill="none" stroke="#1b1a17" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M44 72h128a10 10 0 0 1 10 10v44h-148v-44a10 10 0 0 1 10-10z" fill="#1b1a17"/>
<rect x="34" y="66" width="148" height="6" rx="2" fill="#c9a263"/>
<path d="M68 72v-14M158 72v-14M60 58h16M150 58h16" stroke="#1b1a17" stroke-width="5" stroke-linecap="round"/>
<path d="M210 128l-8-60h46l14 58M248 68l-24 60M242 66l4-16M220 50h26" fill="none" stroke="#1b1a17" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="226" cy="128" r="10" fill="none" stroke="#1b1a17" stroke-width="4"/>
</svg>
</div>
<div class="body">
<h3>Lumen Trike</h3>
<p class="muted" style="margin:0">Three wheels and a wide, low box. Stable at a standstill, which matters when you are loading a toddler and a dog at the same time.</p>
<div class="spec"><span>3 wheels</span><span>Up to 150 kg in box</span><span>3–4 children</span><span>Tilt-free standing</span></div>
<div class="price">From €4,400<small>or €5,490 with e-assist</small></div>
</div>
</article>
<article class="model rv">
<div class="art">
<svg viewBox="0 0 320 180" aria-hidden="true">
<ellipse cx="160" cy="166" rx="140" ry="5" fill="rgba(27,26,23,.1)"/>
<circle cx="70" cy="140" r="22" fill="none" stroke="#1b1a17" stroke-width="6"/>
<circle cx="250" cy="140" r="22" fill="none" stroke="#1b1a17" stroke-width="6"/>
<path d="M70 140l26-50h60l22 50M156 90l-10 50h-50M250 140l-40-50h-54" fill="none" stroke="#1b1a17" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M226 110h50l6 22h-56z" fill="#1b1a17"/>
<rect x="222" y="104" width="60" height="6" rx="2" fill="#c9a263"/>
<path d="M82 84h20a6 6 0 0 1 6 6v16h-40v-10a12 12 0 0 1 14-12z" fill="#1b1a17"/>
<path d="M156 90l-4-18M138 72h30M210 90l6-18M206 66h20" stroke="#1b1a17" stroke-width="5" stroke-linecap="round"/>
<circle cx="146" cy="140" r="9" fill="none" stroke="#1b1a17" stroke-width="4"/>
</svg>
</div>
<div class="body">
<h3>Lumen Compact</h3>
<p class="muted" style="margin:0">A longtail with a short wheelbase and 20-inch wheels. Fits in a lift, on a train, and in the bike room you thought was too small.</p>
<div class="spec"><span>Longtail</span><span>Up to 80 kg on rack</span><span>2 children</span><span>Fits in a lift</span></div>
<div class="price">From €3,200<small>or €4,290 with e-assist</small></div>
</div>
</article>
</div>
</div>
</section>
<!-- PROCESS -->
<section id="process" class="dark">
<div class="wrap">
<div class="rv">
<span class="eyebrow">How a build works</span>
<h2>Four steps, one point of contact.</h2>
<p class="muted" style="max-width:56ch;margin-top:18px">The builder who measures you is the builder who welds your frame and hands you the keys. No sales floor, no call centre.</p>
</div>
<div class="steps">
<div class="step rv">
<div class="n">01</div><span class="wk">Week 0</span>
<h3>Fitting</h3>
<p>Ninety minutes at the workshop. We measure you, test-ride three platforms on the Nørrebro cobbles, and talk honestly about what you will actually carry.</p>
</div>
<div class="step rv">
<div class="n">02</div><span class="wk">Weeks 1–3</span>
<h3>Specification</h3>
<p>You receive a drawn spec sheet with geometry, components and a fixed price. Nothing is cut until you have signed it. A 20% deposit books your slot.</p>
</div>
<div class="step rv">
<div class="n">03</div><span class="wk">Weeks 4–11</span>
<h3>Frame & finish</h3>
<p>Tubes are mitred and TIG-welded in-house, then powder-coated at our partner in Valby. We photograph the bare frame and send it to you before paint.</p>
</div>
<div class="step rv">
<div class="n">04</div><span class="wk">Weeks 12–14</span>
<h3>Build & handover</h3>
<p>Assembly, a 30 km shakedown ride by your builder, then handover with a second fitting. Your free 300 km service is already in the diary.</p>
</div>
</div>
</div>
</section>
<!-- CRAFT -->
<section id="craft">
<div class="wrap craft-grid">
<div class="craft-art rv">
<svg viewBox="0 0 520 420" role="img" aria-label="Technical drawing of a Lumen frame joint">
<defs>
<pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M20 0H0v20" fill="none" stroke="rgba(27,26,23,.08)"/></pattern>
</defs>
<rect width="520" height="420" fill="url(#grid)"/>
<!-- frame joint detail -->
<g fill="none" stroke="#1b1a17" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M60 300 L300 120"/>
<path d="M60 330 L300 150"/>
<path d="M300 120 L300 150"/>
<path d="M280 110 L460 110 M280 170 L460 170 M280 110 L280 170"/>
<path d="M460 110 A30 30 0 0 1 460 170"/>
<path d="M300 170 L300 340 M330 170 L330 340"/>
<path d="M300 340 A15 15 0 0 0 330 340"/>
<!-- weld bead -->
<path d="M282 150 q6 -5 12 0 q6 5 12 0 q6 -5 12 0" stroke="#c8923a" stroke-width="3"/>
<path d="M296 172 q0 8 6 8 q6 0 6 8 q0 8 6 8" stroke="#c8923a" stroke-width="3" opacity=".9"/>
</g>
<!-- dimension lines -->
<g stroke="#6f6a60" stroke-width="1" fill="none">
<path d="M280 90 L460 90 M280 84v12 M460 84v12"/>
<path d="M480 110 L480 170 M474 110h12 M474 170h12"/>
<path d="M40 300 L40 330 M34 300h12 M34 330h12"/>
<path d="M300 360 L330 360 M300 354v12 M330 354v12"/>
</g>
<g font-family="ui-monospace,Menlo,monospace" font-size="11" fill="#6f6a60">
<text x="352" y="80">Ø 34.9 · 0.8/0.5/0.8</text>
<text x="488" y="144">60.0</text>
<text x="10" y="320">31.8</text>
<text x="340" y="364">Ø 31.8</text>
<text x="60" y="390">LUMEN ONE · HEAD TUBE JUNCTION · REYNOLDS 725 · REV C</text>
<text x="60" y="406">TIG · ER70S-2 · 1.0 mm · post-weld stress relief 600 °C</text>
</g>
<circle cx="300" cy="150" r="40" fill="none" stroke="#c8923a" stroke-width="1.2" stroke-dasharray="4 4"/>
<path d="M330 120 L380 60 L430 60" fill="none" stroke="#c8923a" stroke-width="1.2"/>
<text x="386" y="54" font-family="ui-monospace,Menlo,monospace" font-size="11" fill="#c8923a">DETAIL A</text>
</svg>
</div>
<div class="rv">
<span class="eyebrow">Why steel, why here</span>
<h2>Built to be ridden for thirty years, then handed down.</h2>
<ul class="craft-list">
<li>
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20L20 4M4 4l16 16"/><circle cx="12" cy="12" r="3"/></svg></div>
<div><b>Reynolds 725 heat-treated steel</b><p>Chosen for fatigue life, not weight. A steel cargo frame flexes a little over cobbles and comes back, every time, for decades.</p></div>
</li>
<li>
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18M5 8l7-5 7 5M5 16l7 5 7-5"/></svg></div>
<div><b>Welded in-house, by the person you met</b><p>Two builders, both certified. Every frame is aligned on a surface table and stress-relieved before it goes anywhere near paint.</p></div>
</li>
<li>
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M7 10h.01M11 10h6M7 14h.01M11 14h4"/></svg></div>
<div><b>Parts you can get anywhere</b><p>Shimano and Enviolo drivetrains, Schwalbe tyres, Magura brakes, Bosch motors. Any good shop in Europe can service a Lumen.</p></div>
</li>
<li>
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6z"/></svg></div>
<div><b>Lifetime warranty, in writing</b><p>The frame is guaranteed for as long as you own the bike. If we ever close, the warranty transfers to our partner workshop in Aarhus.</p></div>
</li>
</ul>
</div>
</div>
</section>
<!-- ESTIMATOR -->
<section id="estimate" style="background:var(--paper-2)">
<div class="wrap">
<div class="section-head rv">
<div>
<span class="eyebrow">Configure & price</span>
<h2>Know the number before you visit.</h2>
</div>
<p>This is the same price list we use at the workshop. The figure you see here is the figure on your spec sheet, give or take the colour you fall in love with.</p>
</div>
<div class="estimator rv">
<form class="est-form" id="est" novalidate>
<div class="field">
<label class="lbl">Platform</label>
<div class="choices" role="radiogroup" aria-label="Platform">
<label class="choice"><input type="radio" name="platform" value="one" checked><span>Lumen One<small>Two-wheel front loader</small></span></label>
<label class="choice"><input type="radio" name="platform" value="trike"><span>Lumen Trike<small>Three wheels, wide box</small></span></label>
<label class="choice"><input type="radio" name="platform" value="compact"><span>Lumen Compact<small>Short longtail</small></span></label>
</div>
</div>
<div class="field">
<label class="lbl">Drivetrain</label>
<div class="choices" role="radiogroup" aria-label="Drivetrain">
<label class="choice"><input type="radio" name="drive" value="hub" checked><span>Shimano Nexus 8<small>Internal hub, belt drive</small></span></label>
<label class="choice"><input type="radio" name="drive" value="enviolo"><span>Enviolo stepless<small>Automatic-feel shifting · +€420</small></span></label>
<label class="choice"><input type="radio" name="drive" value="bosch"><span>Bosch Cargo Line<small>E-assist, 500 Wh · +€1,090</small></span></label>
</div>
</div>
<div class="field">
<label class="lbl">Box & family options</label>
<div class="toggles">
<label class="toggle"><span class="l"><input type="checkbox" name="opt" value="bench" data-price="190" data-label="Second folding bench">Second folding bench, two more seats</span><span class="pr">+€190</span></label>
<label class="toggle"><span class="l"><input type="checkbox" name="opt" value="rain" data-price="340" data-label="Rain canopy">Rain canopy with clear panels</span><span class="pr">+€340</span></label>
<label class="toggle"><span class="l"><input type="checkbox" name="opt" value="infant" data-price="160" data-label="Infant seat adapter">Infant car-seat adapter (0–9 months)</span><span class="pr">+€160</span></label>
<label class="toggle"><span class="l"><input type="checkbox" name="opt" value="lock" data-price="130" data-label="Integrated lock + alarm">Integrated frame lock with alarm</span><span class="pr">+€130</span></label>
<label class="toggle"><span class="l"><input type="checkbox" name="opt" value="colour" data-price="220" data-label="Custom RAL colour">Any RAL colour (standard: moss, sand, ink)</span><span class="pr">+€220</span></label>
</div>
</div>
</form>
<aside class="est-summary" aria-live="polite">
<span class="eyebrow">Your estimate</span>
<div class="total" id="total">€3,900</div>
<div class="total-note">incl. 25% Danish VAT · <span id="dkk">≈ 29,100 kr.</span></div>
<ul class="lines" id="lines"></ul>
<a class="btn" href="#visit" id="est-cta">Book a fitting with this spec</a>
<div class="fin" id="fin">or €163 / month over 24 months, 0% interest</div>
</aside>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section id="owners">
<div class="wrap">
<div class="section-head rv">
<div>
<span class="eyebrow">From the road</span>
<h2>What owners say after a winter or two.</h2>
</div>
<p>We ask every owner for feedback at the 300 km service and again after one year. These are quoted with permission.</p>
</div>
<div class="quotes">
<div class="quote rv">
<div class="stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>“We sold the car eight months after collecting the bike. I didn't expect to write that sentence. Two kids, daycare, Netto, the lot.”</blockquote>
<div class="who"><div class="av">MH</div><div>Mette H.<small>Lumen One · Østerbro · owned 2 years</small></div></div>
</div>
<div class="quote rv">
<div class="stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>“I run a florist. The trike carries 40 bouquets to Torvehallerne in the rain and the canopy keeps them dry. Jonas tuned the gearing for the hill on my route.”</blockquote>
<div class="who"><div class="av">SB</div><div>Sofie B.<small>Lumen Trike · Frederiksberg · owned 3 years</small></div></div>
</div>
<div class="quote rv">
<div class="stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>“Scratched the frame badly in year one. They touched it up for free and showed me how. The bike still looks new; the rest of my life does not.”</blockquote>
<div class="who"><div class="av">AK</div><div>Anders K.<small>Lumen Compact · Amager · owned 4 years</small></div></div>
</div>
</div>
</div>
</section>
<!-- VISIT -->
<section id="visit" style="background:var(--white);border-top:1px solid var(--line)">
<div class="wrap visit">
<div class="rv">
<span class="eyebrow">Visit the workshop</span>
<h2>Jægersborggade 41, Nørrebro.</h2>
<p class="lede" style="margin-top:18px">Walk in any time we're open to see frames being built. Fittings are by appointment and take about ninety minutes. Coffee is included; opinions are free.</p>
<div class="hours">
<b>Tue–Fri</b><span>10:00 – 18:00</span>
<b>Saturday</b><span>10:00 – 15:00</span>
<b>Sun–Mon</b><span>Closed (we're riding)</span>
<b>Phone</b><span>+45 33 12 48 70</span>
<b>Email</b><span>hej@lumencycles.dk</span>
</div>
<div class="map rv" aria-hidden="true">
<svg viewBox="0 0 560 300">
<rect width="560" height="300" fill="#efe9dc"/>
<g stroke="#e2dccf" stroke-width="14" stroke-linecap="round">
<path d="M-20 80 L580 60"/><path d="M-20 200 L580 230"/><path d="M120 -20 L160 320"/><path d="M380 -20 L340 320"/>
</g>
<g stroke="#fffdf9" stroke-width="8" stroke-linecap="round">
<path d="M-20 80 L580 60"/><path d="M-20 200 L580 230"/><path d="M120 -20 L160 320"/><path d="M380 -20 L340 320"/>
</g>
<path d="M60 120 L520 110" stroke="#d6cfbf" stroke-width="4" stroke-dasharray="6 8"/>
<rect x="190" y="90" width="120" height="70" rx="4" fill="#e2dccf"/>
<rect x="400" y="240" width="90" height="50" rx="4" fill="#e2dccf"/>
<rect x="30" y="230" width="70" height="50" rx="4" fill="#e2dccf"/>
<path d="M60 300 Q70 260 110 250" fill="none" stroke="#9fb39a" stroke-width="18" stroke-linecap="round" opacity=".6"/>
<g transform="translate(250 125)">
<path d="M0 -34 a22 22 0 1 1 0.01 0z M0 12 l-14 -20 h28z" fill="#1b1a17"/>
<circle cx="0" cy="-13" r="8" fill="#e9b44c"/>
</g>
<g font-family="-apple-system,Segoe UI,Helvetica,Arial,sans-serif" font-size="11" fill="#6f6a60">
<text x="20" y="72">Jægersborggade</text>
<text x="165" y="40" transform="rotate(86 165 40)">Stefansgade</text>
<text x="420" y="222">Jagtvej</text>
<text x="70" y="275">Assistens</text>
</g>
<g transform="translate(470 30)" font-family="-apple-system,Segoe UI,Helvetica,Arial,sans-serif" font-size="10" fill="#6f6a60">
<circle cx="30" cy="30" r="26" fill="none" stroke="#d6cfbf"/>
<path d="M30 8v12M30 50v-12" stroke="#6f6a60" stroke-width="1.5"/><text x="26" y="24">N</text>
</g>
</svg>
</div>
</div>
<div class="rv">
<form class="contact" id="contact" novalidate>
<div>
<h3 style="margin-bottom:6px">Book a fitting</h3>
<p class="muted" style="margin:0;font-size:.95rem">We reply within one working day with two or three available slots. No deposit required for the fitting.</p>
</div>
<div class="row">
<label>Full name<input type="text" name="name" autocomplete="name" required><span class="err">Please tell us your name.</span></label>
<label>Email<input type="email" name="email" autocomplete="email" required><span class="err">We need a valid email to reply.</span></label>
</div>
<div class="row">
<label>Phone (optional)<input type="tel" name="phone" autocomplete="tel"></label>
<label>Platform I'm leaning towards
<select name="platform" id="c-platform">
<option value="">Not sure yet</option>
<option value="one">Lumen One</option>
<option value="trike">Lumen Trike</option>
<option value="compact">Lumen Compact</option>
</select>
</label>
</div>
<label>What will you carry, mostly?<textarea name="msg" rows="4" placeholder="Two kids (3 and 6), nursery run, weekly shop, occasionally a dog."></textarea></label>
<input type="hidden" name="spec" id="c-spec">
<div id="spec-echo" class="muted" style="font-size:.84rem;display:none"></div>
<button class="btn brass" type="submit" style="justify-content:center">Request fitting slots</button>
<p class="muted" style="font-size:.8rem;margin:0;text-align:center">We will only use your details to arrange the fitting. No newsletter unless you ask.</p>
</form>
<div class="form-ok" id="form-ok" role="status">
<b>Thank you. We've got it.</b><br>
You'll hear from Jonas or Line within one working day. If it is urgent, call +45 33 12 48 70 during opening hours.
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq">
<div class="wrap">
<div class="rv" style="text-align:center;margin-bottom:40px">
<span class="eyebrow">Questions people actually ask</span>
<h2>Before you spend four thousand euros.</h2>
</div>
<div class="faq rv">
<details>
<summary>Why not just buy a Bullitt or an Urban Arrow?<span class="pm">+</span></summary>
<div class="a"><p>Both are excellent bikes and we will tell you so. The difference is fit. A stock cargo bike comes in one or two sizes and is tuned for the average rider. We adjust reach, stack, crank length, gearing and box height to you and to what you carry. If you are 1.58 m or 1.96 m, or you share the bike with a partner of a very different height, that matters every single day.</p></div>
</details>
<details>
<summary>How is the price structured and when do I pay?<span class="pm">+</span></summary>
<div class="a"><p>Your spec sheet carries a fixed, all-inclusive price in euros with Danish VAT. You pay 20% to book a build slot, 40% when the frame is welded and photographed, and the balance at handover. Zero-interest financing over 24 months is available through our partner bank for residents of Denmark.</p></div>
</details>
<details>
<summary>What happens if something breaks?<span class="pm">+</span></summary>
<div class="a"><p>The frame and fork are guaranteed for life against defects in materials and workmanship, non-transferable. Components carry their manufacturers' warranties, which we handle on your behalf. Crash damage is not covered, but we repair steel, and we have straightened or re-tubed more than sixty frames over the years rather than scrap them.</p></div>
</details>
<details>
<summary>I'm not in Copenhagen. Can I still order?<span class="pm">+</span></summary>
<div class="a"><p>Yes. Around a third of our bikes go elsewhere in Denmark, Sweden and Germany. You will need to come to the workshop once for the fitting. Delivery is free within Denmark and quoted at cost elsewhere in the EU, usually €180 to €320 boxed and insured.</p></div>
</details>
<details>
<summary>How long does a Lumen really last?<span class="pm">+</span></summary>
<div class="a"><p>Our oldest customer bikes are from 2014 and in daily use. Expect to replace tyres yearly, brake pads every 18 months and the belt around 25,000 km. A Bosch battery is good for roughly 1,000 full cycles. The frame should outlast all of it.</p></div>
</details>
<details>
<summary>Can I see one before I commit to a fitting?<span class="pm">+</span></summary>
<div class="a"><p>Walk in during opening hours. There are always demo bikes you can take out for half an hour with a piece of ID. If you then want a fitting, we'll put you in the diary on the spot.</p></div>
</details>
</div>
</div>
</section>
</main>
<footer>
<div class="wrap">
<div class="foot-grid">
<div>
<a class="logo" href="#top">
<svg viewBox="0 0 32 32" aria-hidden="true"><rect width="32" height="32" rx="7" fill="#f6f2ea"/><circle cx="10" cy="21" r="5" fill="none" stroke="#c8923a" stroke-width="2.2"/><circle cx="23" cy="21" r="5" fill="none" stroke="#c8923a" stroke-width="2.2"/><path d="M10 21l5-9h6M15 12v9M23 21l-4-9" fill="none" stroke="#1b1a17" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
Lumen Cycles
</a>
<p style="margin-top:18px;max-width:34ch">Custom cargo bikes, built to order in Copenhagen since 2014. Lumen Cycles ApS · CVR 36 48 12 90.</p>
</div>
<div>
<h4>Bikes</h4>
<ul><li><a href="#models">Lumen One</a></li><li><a href="#models">Lumen Trike</a></li><li><a href="#models">Lumen Compact</a></li><li><a href="#estimate">Configure & price</a></li></ul>
</div>
<div>
<h4>Workshop</h4>
<ul><li><a href="#visit">Book a fitting</a></li><li><a href="#process">How a build works</a></li><li><a href="#craft">Materials & warranty</a></li><li><a href="#faq">Questions</a></li></ul>
</div>
<div>
<h4>Contact</h4>
<ul><li>Jægersborggade 41<br>2200 København N</li><li>+45 33 12 48 70</li><li>hej@lumencycles.dk</li></ul>
</div>
</div>
<div class="foot-bottom">
<span>© <span id="yr">2026</span> Lumen Cycles ApS. All prices include 25% VAT.</span>
<span>Privacy · Terms · Warranty conditions</span>
</div>
</div>
</footer>
<script>
(function(){
'use strict';
/* ---------- Nav ---------- */
var header = document.querySelector('header');
var burger = document.querySelector('.burger');
function onScroll(){ header.classList.toggle('scrolled', window.scrollY > 8); }
window.addEventListener('scroll', onScroll, {passive:true}); onScroll();
burger.addEventListener('click', function(){
var open = document.body.classList.toggle('menu-open');
burger.setAttribute('aria-expanded', open ? 'true' : 'false');
burger.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
});
document.querySelectorAll('.mobile-menu a').forEach(function(a){
a.addEventListener('click', function(){ document.body.classList.remove('menu-open'); burger.setAttribute('aria-expanded','false'); });
});
/* ---------- Reveal on scroll ---------- */
var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var rv = document.querySelectorAll('.rv');
if (reduced || !('IntersectionObserver' in window)) {
rv.forEach(function(el){ el.classList.add('in'); });
} else {
var io = new IntersectionObserver(function(entries){
entries.forEach(function(e){ if (e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } });
}, {rootMargin:'0px 0px -8% 0px', threshold:0.08});
rv.forEach(function(el){ io.observe(el); });
}
/* ---------- Hero wheel animation (subtle) ---------- */
if (!reduced) {
var wheels = document.querySelectorAll('.spoke-wheel');
var angle = 0, last = null;
function spin(t){
if (last !== null) angle += (t - last) * 0.012;
last = t;
wheels.forEach(function(w){ w.style.transform = 'rotate(' + (angle % 360) + 'deg)'; });
requestAnimationFrame(spin);
}
var heroArt = document.querySelector('.hero-art');
var spinning = false;
var heroIO = new IntersectionObserver(function(en){
if (en[0].isIntersecting && !spinning){ spinning = true; requestAnimationFrame(spin); }
});
heroIO.observe(heroArt);
}
/* ---------- Estimator ---------- */
var PLATFORMS = {
one: {name:'Lumen One', price:3900},
trike: {name:'Lumen Trike', price:4400},
compact: {name:'Lumen Compact', price:3200}
};
var DRIVES = {
hub: {name:'Shimano Nexus 8, belt drive', price:0},
enviolo: {name:'Enviolo stepless hub', price:420},
bosch: {name:'Bosch Cargo Line e-assist', price:1090}
};
var EUR_TO_DKK = 7.46;
var form = document.getElementById('est');
var totalEl = document.getElementById('total');
var dkkEl = document.getElementById('dkk');
var linesEl = document.getElementById('lines');
var finEl = document.getElementById('fin');
var specHidden = document.getElementById('c-spec');
var specEcho = document.getElementById('spec-echo');
var cPlatform = document.getElementById('c-platform');
function eur(n){ return '€' + n.toLocaleString('en-IE'); }
function calc(){
var p = form.querySelector('input[name="platform"]:checked').value;
var d = form.querySelector('input[name="drive"]:checked').value;
var lines = [];
var total = PLATFORMS[p].price;
lines.push([PLATFORMS[p].name + ' platform', eur(PLATFORMS[p].price)]);
lines.push([DRIVES[d].name, DRIVES[d].price ? '+' + eur(DRIVES[d].price) : 'Included']);
total += DRIVES[d].price;
var opts = [];
form.querySelectorAll('input[name="opt"]:checked').forEach(function(cb){
var pr = parseInt(cb.dataset.price, 10);
total += pr;
lines.push([cb.dataset.label, '+' + eur(pr)]);
opts.push(cb.dataset.label);
});
lines.push(['Delivery in Denmark, first service', 'Included']);
totalEl.textContent = eur(total);
dkkEl.textContent = '≈ ' + (Math.round(total * EUR_TO_DKK / 100) * 100).toLocaleString('da-DK') + ' kr.';
linesEl.innerHTML = '';
lines.forEach(function(l){
var li = document.createElement('li');
var a = document.createElement('span'); a.textContent = l[0];
var b = document.createElement('span'); b.textContent = l[1];
li.appendChild(a); li.appendChild(b); linesEl.appendChild(li);
});
finEl.textContent = 'or ' + eur(Math.ceil(total / 24)) + ' / month over 24 months, 0% interest';
var spec = PLATFORMS[p].name + ' · ' + DRIVES[d].name + (opts.length ? ' · ' + opts.join(', ') : '') + ' · ' + eur(total);
specHidden.value = spec;
specEcho.textContent = 'Attached spec: ' + spec;
specEcho.style.display = 'block';
if (cPlatform) cPlatform.value = p;
}
form.addEventListener('change', calc);
calc();
/* ---------- Contact form (local only) ---------- */
var contact = document.getElementById('contact');
var ok = document.getElementById('form-ok');
contact.addEventListener('submit', function(e){
e.preventDefault();
var valid = true;
contact.querySelectorAll('input[required]').forEach(function(inp){
var lab = inp.closest('label');
var good = inp.type === 'email' ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(inp.value.trim()) : inp.value.trim().length > 1;
lab.classList.toggle('invalid', !good);
if (!good && valid){ inp.focus(); }
valid = valid && good;
});
if (!valid) return;
contact.style.display = 'none';
ok.classList.add('show');
ok.scrollIntoView({behavior: reduced ? 'auto' : 'smooth', block:'center'});
});
contact.querySelectorAll('input[required]').forEach(function(inp){
inp.addEventListener('input', function(){ inp.closest('label').classList.remove('invalid'); });
});
/* ---------- FAQ: one open at a time ---------- */
var faqs = document.querySelectorAll('.faq details');
faqs.forEach(function(d){
d.addEventListener('toggle', function(){
if (d.open) faqs.forEach(function(o){ if (o !== d) o.removeAttribute('open'); });
});
});
document.getElementById('yr').textContent = new Date().getFullYear();
})();
</script>
</body>
</html>

