Run details
- Model
- moonshotai/kimi-k3
- Route
- Command Code CLI
- Reasoning
- provider default
- Limits
- 60 min
- Date
- 2 Oct 2026
- Time
- 18 min 46 s
- Size
- 64 kB
- Tokens
- 119,620 in, 35,648 out
- List price
- $0.45 ($0.239 in / $11.94 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
64 kB 1,154 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lumen Cycles — Custom cargo bikes, handbuilt in Copenhagen</title>
<meta name="description" content="Lumen Cycles is a small Copenhagen workshop building made-to-measure cargo bikes to order. Steel, ash and good light — one bike at a time.">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6' fill='%231E4A38'/%3E%3Cg stroke='%23C8842F' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='1' x2='12' y2='4'/%3E%3Cline x1='12' y1='23' x2='12' y2='20'/%3E%3Cline x1='1' y1='12' x2='4' y2='12'/%3E%3Cline x1='23' y1='12' x2='20' y2='12'/%3E%3C/g%3E%3C/svg%3E">
<style>
:root{
--paper:#F6F2E9;
--paper-2:#F1EBDD;
--card:#FBF9F2;
--ink:#16221D;
--ink-2:#47534D;
--ink-3:#6E7A72;
--line:rgba(22,34,29,.16);
--green:#1E4A38;
--green-deep:#122E23;
--amber:#C8842F;
--wood:#D9A05B;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--serif:Georgia,"Iowan Old Style","Times New Roman",serif;
--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
--r-lg:22px;
--r-md:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:var(--sans);
background:var(--paper);
color:var(--ink);
line-height:1.6;
font-size:17px;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
body::after{
content:"";
position:fixed;
inset:0;
z-index:200;
pointer-events:none;
opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--green);color:var(--paper)}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:300}
.skip:focus{left:1rem;top:1rem}
.container{max-width:1180px;margin:0 auto;padding:0 clamp(1.2rem,4vw,2.5rem)}
section{scroll-margin-top:96px}
.kicker{
font-family:var(--mono);
font-size:.72rem;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--ink-2);
display:flex;
align-items:center;
gap:.8rem;
margin-bottom:1.4rem;
}
.kicker::before{content:"";width:34px;height:1px;background:var(--amber)}
h1,h2,h3{line-height:1.08;letter-spacing:-.025em;font-weight:650}
h1{font-size:clamp(2.6rem,6vw,4.6rem);max-width:17ch}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem);max-width:22ch}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.01em}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-2);max-width:52ch;margin-top:1.4rem}
.btn{
display:inline-flex;align-items:center;gap:.6rem;
background:var(--ink);color:var(--paper);
padding:.95rem 1.7rem;border-radius:999px;
font-weight:600;font-size:.95rem;letter-spacing:.01em;
border:1px solid var(--ink);
transition:transform .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(22,34,29,.18);background:var(--green);border-color:var(--green)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--card);border-color:var(--ink);box-shadow:none;color:var(--ink)}
.btn .arr{transition:transform .25s ease}
.btn:hover .arr{transform:translateX(4px)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,.7,.3,1),transform .8s cubic-bezier(.22,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
/* ---------- header ---------- */
#site-header{
position:fixed;top:0;left:0;right:0;z-index:100;
transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
border-bottom:1px solid transparent;
}
#site-header.scrolled{
background:rgba(246,242,233,.88);
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
border-bottom-color:var(--line);
}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:76px}
.brand{display:flex;align-items:center;gap:.7rem}
.brand svg{width:30px;height:30px}
.brand-name{font-weight:700;letter-spacing:-.02em;font-size:1.08rem;line-height:1.05}
.brand-sub{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-3)}
.main-nav{display:flex;gap:2rem}
.main-nav a{font-size:.9rem;font-weight:550;color:var(--ink-2);position:relative;padding:.3rem 0}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--amber);transition:width .3s ease}
.main-nav a:hover{color:var(--ink)}
.main-nav a:hover::after{width:100%}
.header-cta{padding:.6rem 1.3rem;font-size:.85rem}
.menu-btn{display:none;flex-direction:column;gap:6px;padding:.5rem}
.menu-btn span{width:24px;height:2px;background:var(--ink);transition:transform .3s ease,opacity .3s ease}
/* ---------- hero ---------- */
.hero{padding:170px 0 4.5rem;position:relative}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.4rem}
.hero-trust{display:flex;gap:2.6rem;flex-wrap:wrap;margin-top:2.8rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.hero-trust li{font-size:.86rem;color:var(--ink-2)}
.hero-trust strong{display:block;font-size:1.25rem;color:var(--ink);letter-spacing:-.02em}
.blueprint{
margin-top:3.6rem;
background:#F3EEE2;
background-image:
repeating-linear-gradient(0deg,rgba(30,74,56,.055) 0 1px,transparent 1px 42px),
repeating-linear-gradient(90deg,rgba(30,74,56,.055) 0 1px,transparent 1px 42px);
border:1px solid var(--line);
border-radius:var(--r-lg);
padding:clamp(1.2rem,4vw,3rem) clamp(1rem,4vw,3rem) clamp(.8rem,2vw,1.4rem);
position:relative;
overflow:hidden;
}
.bp-meta{
position:absolute;font-family:var(--mono);font-size:.62rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.bp-tl{top:1.1rem;left:1.4rem}
.bp-tr{top:1.1rem;right:1.4rem}
.bp-br{bottom:.9rem;right:1.4rem}
.bp-bike{width:100%;height:auto}
.spin{transform-box:view-box;animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lamp-halo{animation:halo 3.2s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.14}50%{opacity:.5}}
/* ---------- marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:1.1rem 0;background:var(--paper-2)}
.marquee-track{display:flex;gap:3.4rem;width:max-content;animation:marq 30s linear infinite}
.marquee-track span{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;display:flex;align-items:center;gap:3.4rem}
.marquee-track i{font-style:normal;color:var(--amber)}
@keyframes marq{to{transform:translateX(-50%)}}
/* ---------- sections ---------- */
.section{padding:clamp(4.5rem,9vw,7.5rem) 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3.2rem;flex-wrap:wrap}
.section-note{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);max-width:24ch;text-align:right}
/* ---------- models ---------- */
.models-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.model-card{
background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
padding:2rem 1.8rem 1.8rem;display:flex;flex-direction:column;gap:1.1rem;
transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
position:relative;
}
.model-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(22,34,29,.1);border-color:rgba(22,34,29,.3)}
.model-tag{
position:absolute;top:1.3rem;right:1.3rem;
font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
background:var(--green);color:var(--paper);padding:.35rem .7rem;border-radius:999px;
}
.model-card svg{height:120px;width:100%;margin:.4rem 0 .2rem}
.model-name{font-size:1.45rem;letter-spacing:-.02em}
.model-dk{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:.35rem}
.model-desc{font-size:.94rem;color:var(--ink-2);flex:1}
.model-specs{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--ink-3);border-top:1px dashed var(--line);padding-top:1rem;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.model-price{display:flex;justify-content:space-between;align-items:baseline;margin-top:.2rem}
.model-price .from{font-size:.78rem;color:var(--ink-3)}
.model-price .amount{font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
/* ---------- configurator ---------- */
#byg{background:var(--green-deep);color:#EDE8DA;border-radius:clamp(20px,4vw,44px);margin:0 clamp(.6rem,2vw,1.4rem)}
#byg .kicker{color:#B9C6BD}
#byg .kicker::before{background:var(--wood)}
#byg h2 em{color:#E8C98F}
.cfg-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);margin-top:3rem;align-items:start}
.cfg-group{border:0;margin-bottom:2.2rem}
.cfg-group legend,.cfg-legend{
font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
color:#9FB0A5;margin-bottom:1rem;display:flex;align-items:center;gap:.7rem;
}
.cfg-legend::after{content:"";flex:1;height:1px;background:rgba(237,232,218,.15)}
.opts{display:grid;gap:.6rem}
.opts.two{grid-template-columns:1fr 1fr}
.opt{display:block}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt-body{
display:flex;align-items:center;justify-content:space-between;gap:1rem;
border:1px solid rgba(237,232,218,.2);border-radius:14px;
padding:.95rem 1.2rem;transition:border-color .25s,background .25s;cursor:pointer;
}
.opt:hover .opt-body{border-color:rgba(237,232,218,.5)}
.opt input:checked+.opt-body{border-color:var(--wood);background:rgba(200,132,47,.1)}
.opt input:focus-visible+.opt-body{outline:2px solid var(--wood);outline-offset:3px}
.opt-name{font-weight:600;font-size:.96rem}
.opt-desc{display:block;font-size:.78rem;color:#9FB0A5;margin-top:.1rem}
.opt-price{font-family:var(--mono);font-size:.8rem;color:#E8C98F;white-space:nowrap}
.swatches{display:flex;gap:.9rem;flex-wrap:wrap}
.swatch{position:relative}
.swatch input{position:absolute;opacity:0;pointer-events:none}
.swatch-dot{
width:46px;height:46px;border-radius:50%;cursor:pointer;display:block;
border:2px solid rgba(237,232,218,.25);transition:transform .25s,border-color .25s;
position:relative;
}
.swatch-dot::after{
content:"";position:absolute;inset:-7px;border-radius:50%;
border:1.5px solid transparent;transition:border-color .25s;
}
.swatch:hover .swatch-dot{transform:scale(1.06)}
.swatch input:checked+.swatch-dot::after{border-color:var(--wood)}
.swatch input:focus-visible+.swatch-dot{outline:2px solid var(--wood);outline-offset:5px}
.swatch-label{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 8px);font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#9FB0A5;white-space:nowrap;opacity:0;transition:opacity .25s}
.swatch:hover .swatch-label,.swatch input:checked~.swatch-label{opacity:1}
.cfg-summary{
background:rgba(237,232,218,.05);
border:1px solid rgba(237,232,218,.16);
border-radius:var(--r-lg);
padding:1.8rem;
position:sticky;top:100px;
}
#cfg-bike{margin-bottom:.6rem}
#cfg-bike .fr{transition:stroke .4s ease}
.cfg-summary-title{font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:#9FB0A5;margin-bottom:.9rem}
#cfg-recap{font-size:.9rem;color:#C9D2C9;min-height:2.6em}
.cfg-total-row{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(237,232,218,.18);margin-top:1.2rem;padding-top:1.2rem}
.cfg-total-row .lbl{font-size:.85rem;color:#9FB0A5}
#cfg-total{font-size:2.1rem;font-weight:700;letter-spacing:-.03em;color:#fff}
.cfg-sub{display:flex;justify-content:space-between;font-size:.82rem;color:#9FB0A5;margin-top:.35rem}
.cfg-sub strong{color:#E8C98F;font-weight:600}
.cfg-note{font-size:.72rem;color:#8A988E;margin-top:1.1rem}
.cfg-summary .btn{width:100%;justify-content:center;margin-top:1.3rem;background:var(--wood);border-color:var(--wood);color:#23180A}
.cfg-summary .btn:hover{background:#DDA14F;box-shadow:0 10px 24px rgba(0,0,0,.3)}
/* ---------- process ---------- */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;counter-reset:step}
.step{border-top:2px solid var(--ink);padding-top:1.4rem;position:relative}
.step-num{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--amber)}
.step h3{font-size:1.2rem;margin:.7rem 0 .6rem}
.step p{font-size:.9rem;color:var(--ink-2)}
.step .dk{font-family:var(--serif);font-style:italic;color:var(--ink-3);font-size:.9rem}
/* ---------- workshop ---------- */
#vaerkstedet{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ws-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.ws-copy p{color:var(--ink-2);margin-top:1.2rem;max-width:52ch}
.materials{margin-top:2.2rem;border-top:1px solid var(--line)}
.materials li{display:grid;grid-template-columns:130px 1fr;gap:1.2rem;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.92rem;align-items:baseline}
.materials .mk{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.ws-visual{position:relative;display:flex;justify-content:center}
.ws-frame{
width:min(420px,100%);aspect-ratio:4/5;border:1px solid var(--line);border-radius:var(--r-lg);
background:#F3EEE2;
background-image:
repeating-linear-gradient(0deg,rgba(30,74,56,.05) 0 1px,transparent 1px 34px),
repeating-linear-gradient(90deg,rgba(30,74,56,.05) 0 1px,transparent 1px 34px);
display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.stamp{width:min(240px,60%);color:var(--green);animation:spin 60s linear infinite}
.stamp-text{font-family:var(--mono);font-size:14.5px;letter-spacing:2.6px;fill:var(--green)}
.ws-caption{
position:absolute;bottom:-1rem;left:50%;transform:translateX(-50%);
font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--ink-3);background:var(--card);border:1px solid var(--line);
padding:.5rem 1rem;border-radius:999px;white-space:nowrap;
}
/* ---------- owners ---------- */
#ejere .quote-wrap{max-width:820px;margin:0 auto;text-align:center}
.quote-mark{font-family:var(--serif);font-size:5rem;line-height:.5;color:var(--amber);display:block;margin-bottom:2rem}
#t-box{transition:opacity .35s ease}
#t-box.fade{opacity:0}
#t-text{font-family:var(--serif);font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.45;font-style:italic;letter-spacing:-.01em}
#t-cite{margin-top:1.8rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.t-controls{display:flex;justify-content:center;align-items:center;gap:1.4rem;margin-top:2.4rem}
.t-btn{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color .25s,background .25s}
.t-btn:hover{border-color:var(--ink);background:var(--card)}
.t-dots{display:flex;gap:.5rem}
.t-dot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .25s,transform .25s}
.t-dot.active{background:var(--amber);transform:scale(1.3)}
/* ---------- faq ---------- */
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-q{
width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
padding:1.5rem .2rem;text-align:left;font-size:1.08rem;font-weight:600;letter-spacing:-.01em;
}
.faq-q .ic{flex:none;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .35s ease,background .35s ease}
.faq-item.open .faq-q .ic{transform:rotate(45deg);background:var(--amber);border-color:var(--amber);color:#fff}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.22,.7,.3,1)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-in{overflow:hidden}
.faq-a-in p{padding:0 3.5rem 1.6rem .2rem;color:var(--ink-2);font-size:.95rem;max-width:60ch}
/* ---------- visit ---------- */
.visit-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:1.4rem;align-items:stretch}
.visit-card{
background:var(--green-deep);color:#EDE8DA;border-radius:var(--r-lg);
padding:2.4rem;display:flex;flex-direction:column;gap:1.6rem;
}
.visit-card h3{font-size:1.5rem}
.visit-rows{display:grid;gap:1.1rem;font-size:.92rem}
.visit-rows .vr-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#9FB0A5;display:block;margin-bottom:.25rem}
.visit-card .vr-v{color:#EDE8DA}
.visit-card .vr-v a{border-bottom:1px solid rgba(237,232,218,.35);transition:border-color .25s}
.visit-card .vr-v a:hover{border-color:var(--wood)}
.visit-note{margin-top:auto;font-size:.8rem;color:#9FB0A5;border-top:1px solid rgba(237,232,218,.15);padding-top:1.2rem}
.order-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:2.4rem}
.order-card h3{font-size:1.35rem;margin-bottom:.4rem}
.order-card>p{font-size:.9rem;color:var(--ink-2);margin-bottom:1.8rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field select,.field textarea{
font:inherit;font-size:.95rem;color:var(--ink);
background:var(--paper);border:1px solid var(--line);border-radius:12px;
padding:.8rem 1rem;transition:border-color .25s,box-shadow .25s;
-webkit-appearance:none;appearance:none;
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(30,74,56,.12)}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2347534D' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.form-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;margin-top:.4rem}
.form-foot small{color:var(--ink-3);font-size:.78rem}
.form-success{display:none;text-align:center;padding:2rem 0}
.form-success .ok-ring{width:66px;height:66px;border-radius:50%;border:2px solid var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 1.4rem}
.form-success h3{margin-bottom:.6rem}
.form-success p{color:var(--ink-2);font-size:.94rem;max-width:44ch;margin:0 auto}
.form-success .ref{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--amber);margin-top:1.2rem;display:block}
.order-card.sent form{display:none}
.order-card.sent .form-success{display:block}
/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:3.5rem 0 2rem;background:var(--paper-2)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2.6rem}
.foot-brand p{font-size:.88rem;color:var(--ink-2);margin-top:1rem;max-width:32ch}
.foot-col h4{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem}
.foot-col li{margin-bottom:.55rem}
.foot-col a{font-size:.9rem;color:var(--ink-2);transition:color .2s}
.foot-col a:hover{color:var(--ink)}
.foot-base{border-top:1px solid var(--line);padding-top:1.6rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
/* ---------- responsive ---------- */
@media (max-width:1020px){
.models-grid{grid-template-columns:1fr 1fr}
.process-grid{grid-template-columns:1fr 1fr;gap:2.4rem}
.cfg-grid{grid-template-columns:1fr}
.cfg-summary{position:static}
.foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
.main-nav{
position:absolute;top:76px;left:0;right:0;
background:var(--paper);border-bottom:1px solid var(--line);
flex-direction:column;padding:1.4rem clamp(1.2rem,4vw,2.5rem) 1.8rem;gap:1.1rem;
display:none;
}
#site-header.nav-open .main-nav{display:flex}
#site-header.nav-open .menu-btn span:first-child{transform:translateY(4px) rotate(45deg)}
#site-header.nav-open .menu-btn span:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu-btn{display:flex}
.header-cta{display:none}
.ws-grid,.visit-grid{grid-template-columns:1fr}
.section-note{text-align:left}
}
@media (max-width:640px){
.models-grid{grid-template-columns:1fr}
.process-grid{grid-template-columns:1fr}
.form-grid{grid-template-columns:1fr}
.opts.two{grid-template-columns:1fr}
.hero{padding-top:140px}
.hero-trust{gap:1.4rem}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
html{scroll-behavior:auto}
.reveal{opacity:1;transform:none}
}
</style>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header id="site-header">
<div class="container header-in">
<a class="brand" href="#top" aria-label="Lumen Cycles — home">
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="5" fill="#1E4A38"/>
<g stroke="#C8842F" stroke-width="1.8" stroke-linecap="round">
<line x1="12" y1="1" x2="12" y2="4.4"/><line x1="12" y1="23" x2="12" y2="19.6"/>
<line x1="1" y1="12" x2="4.4" y2="12"/><line x1="23" y1="12" x2="19.6" y2="12"/>
<line x1="4.2" y1="4.2" x2="6.6" y2="6.6"/><line x1="19.8" y1="19.8" x2="17.4" y2="17.4"/>
<line x1="19.8" y1="4.2" x2="17.4" y2="6.6"/><line x1="4.2" y1="19.8" x2="6.6" y2="17.4"/>
</g>
</svg>
<span><span class="brand-name">Lumen Cycles</span><span class="brand-sub">København</span></span>
</a>
<nav class="main-nav" aria-label="Main navigation">
<a href="#modeller">Bikes</a>
<a href="#processen">Process</a>
<a href="#vaerkstedet">Workshop</a>
<a href="#ejere">Owners</a>
<a href="#faq">FAQ</a>
</nav>
<a class="btn header-cta" href="#bestil">Book a test ride</a>
<button class="menu-btn" id="menu-btn" aria-label="Toggle menu" aria-expanded="false"><span></span><span></span></button>
</div>
</header>
<main id="main">
<section class="hero" id="top">
<div class="container">
<p class="kicker reveal">Håndbyggede ladcykler · København · Est. 2016</p>
<h1 class="reveal d1">A cargo bike built around <em>your life</em>, not the other way around.</h1>
<p class="lede reveal d2">Lumen Cycles is a six-builder workshop on Refshaleøen. We design and hand-build made-to-measure cargo bikes to order — one at a time, in steel, ash and good light.</p>
<div class="hero-cta reveal d3">
<a class="btn" href="#byg">Start your build <span class="arr">→</span></a>
<a class="btn btn-ghost" href="#bestil">Book a test ride</a>
</div>
<ul class="hero-trust reveal d3">
<li><strong>647</strong> bikes on the road</li>
<li><strong>10-year</strong> frame warranty</li>
<li><strong>4.9 / 5</strong> from 312 owners</li>
</ul>
<figure class="blueprint reveal d3" aria-label="Technical drawing of the Lumen Familie cargo bike">
<span class="bp-meta bp-tl">Fig. 01 — LC-04 »Familie«</span>
<span class="bp-meta bp-tr">Målestok 1:12</span>
<span class="bp-meta bp-br">Tegnet og bygget på Refshaleøen</span>
<svg class="bp-bike" viewBox="0 0 820 500" role="img" aria-label="Side-view line drawing of a long-john cargo bike with wooden box, dimensions marked">
<line x1="40" y1="432" x2="780" y2="432" stroke="#16221D" stroke-width="1.5" opacity=".35"/>
<line x1="120" y1="432" x2="112" y2="440" stroke="#16221D" stroke-width="1.5" opacity=".35"/>
<line x1="400" y1="432" x2="392" y2="440" stroke="#16221D" stroke-width="1.5" opacity=".35"/>
<line x1="680" y1="432" x2="672" y2="440" stroke="#16221D" stroke-width="1.5" opacity=".35"/>
<g stroke="#16221D" fill="none" stroke-linecap="round">
<circle cx="190" cy="347" r="85" stroke-width="7"/>
<circle cx="190" cy="347" r="71" stroke-width="2.5" opacity=".75"/>
</g>
<g class="spin" style="transform-origin:190px 347px" stroke="#16221D" stroke-width="1.6" opacity=".55">
<line x1="190" y1="347" x2="260" y2="347"/><line x1="190" y1="347" x2="246.6" y2="388.1"/>
<line x1="190" y1="347" x2="211.6" y2="413.6"/><line x1="190" y1="347" x2="168.4" y2="413.6"/>
<line x1="190" y1="347" x2="133.4" y2="388.1"/><line x1="190" y1="347" x2="120" y2="347"/>
<line x1="190" y1="347" x2="133.4" y2="305.9"/><line x1="190" y1="347" x2="168.4" y2="280.4"/>
<line x1="190" y1="347" x2="211.6" y2="280.4"/><line x1="190" y1="347" x2="246.6" y2="305.9"/>
</g>
<circle cx="190" cy="347" r="11" fill="#F3EEE2" stroke="#16221D" stroke-width="3"/>
<circle cx="190" cy="347" r="3.5" fill="#16221D"/>
<g stroke="#16221D" fill="none" stroke-linecap="round">
<circle cx="622" cy="372" r="60" stroke-width="7"/>
<circle cx="622" cy="372" r="48" stroke-width="2.5" opacity=".75"/>
</g>
<g class="spin" style="transform-origin:622px 372px" stroke="#16221D" stroke-width="1.6" opacity=".55">
<line x1="622" y1="372" x2="670" y2="372"/><line x1="622" y1="372" x2="658.8" y2="402.9"/>
<line x1="622" y1="372" x2="630.3" y2="419.3"/><line x1="622" y1="372" x2="598" y2="413.6"/>
<line x1="622" y1="372" x2="576.9" y2="388.4"/><line x1="622" y1="372" x2="576.9" y2="355.6"/>
<line x1="622" y1="372" x2="598" y2="330.4"/><line x1="622" y1="372" x2="630.3" y2="324.7"/>
<line x1="622" y1="372" x2="658.8" y2="341.1"/>
</g>
<circle cx="622" cy="372" r="9" fill="#F3EEE2" stroke="#16221D" stroke-width="3"/>
<circle cx="622" cy="372" r="3" fill="#16221D"/>
<path d="M 97 322 A 96 96 0 0 1 285 327" fill="none" stroke="#16221D" stroke-width="4" stroke-linecap="round"/>
<path d="M 556 350 A 68 68 0 0 1 690 356" fill="none" stroke="#16221D" stroke-width="4" stroke-linecap="round"/>
<g stroke="#16221D" fill="none" stroke-linecap="round" stroke-linejoin="round">
<line x1="330" y1="362" x2="258" y2="216" stroke-width="6"/>
<line x1="352" y1="238" x2="330" y2="362" stroke-width="6"/>
<line x1="344" y1="214" x2="262" y2="232" stroke-width="6"/>
<line x1="338" y1="202" x2="356" y2="246" stroke-width="9"/>
<path d="M 288 172 Q 316 152 342 166" stroke-width="6"/>
<line x1="342" y1="356" x2="600" y2="320" stroke-width="8"/>
<line x1="360" y1="250" x2="612" y2="306" stroke-width="3.5" opacity=".8"/>
<line x1="612" y1="306" x2="622" y2="372" stroke-width="6"/>
<line x1="330" y1="362" x2="190" y2="347" stroke-width="5"/>
<line x1="266" y1="246" x2="190" y2="347" stroke-width="5"/>
<line x1="420" y1="340" x2="404" y2="428" stroke-width="5"/>
<line x1="396" y1="428" x2="412" y2="428" stroke-width="5"/>
</g>
<circle cx="330" cy="362" r="20" fill="none" stroke="#16221D" stroke-width="4"/>
<line x1="330" y1="342" x2="190" y2="336" stroke="#16221D" stroke-width="2.5"/>
<line x1="330" y1="382" x2="190" y2="358" stroke="#16221D" stroke-width="2.5"/>
<line x1="330" y1="362" x2="348" y2="382" stroke="#16221D" stroke-width="5" stroke-linecap="round"/>
<line x1="342" y1="384" x2="358" y2="384" stroke="#16221D" stroke-width="5" stroke-linecap="round"/>
<line x1="258" y1="216" x2="250" y2="200" stroke="#16221D" stroke-width="5" stroke-linecap="round"/>
<path d="M 224 196 Q 248 186 268 194" fill="none" stroke="#16221D" stroke-width="7" stroke-linecap="round"/>
<polygon points="372,238 578,252 564,346 388,332" fill="#D9A05B" fill-opacity=".92" stroke="#16221D" stroke-width="5" stroke-linejoin="round"/>
<g stroke="#16221D" stroke-width="2" opacity=".55">
<line x1="376" y1="261.5" x2="574.5" y2="275.5"/>
<line x1="380" y1="285" x2="571" y2="299"/>
<line x1="384" y1="308.5" x2="567.5" y2="322.5"/>
</g>
<circle class="lamp-halo" cx="606" cy="296" r="15" fill="#E2A54A"/>
<circle cx="606" cy="296" r="6.5" fill="#E2A54A" stroke="#16221D" stroke-width="2.5"/>
<g stroke="#C8842F" stroke-width="3" stroke-linecap="round">
<line x1="590" y1="288" x2="581" y2="284"/>
<line x1="592" y1="298" x2="583" y2="300"/>
<line x1="596" y1="307" x2="590" y2="313"/>
</g>
<g font-family="ui-monospace,Menlo,Consolas,monospace" font-size="13" fill="#47534D">
<line x1="105" y1="452" x2="682" y2="452" stroke="#47534D" stroke-width="1"/>
<line x1="105" y1="446" x2="105" y2="458" stroke="#47534D" stroke-width="1"/>
<line x1="682" y1="446" x2="682" y2="458" stroke="#47534D" stroke-width="1"/>
<rect x="352" y="440" width="86" height="20" fill="#F3EEE2"/>
<text x="395" y="455" text-anchor="middle" letter-spacing="1">2.480 MM</text>
<text x="475" y="222" text-anchor="middle" letter-spacing="1">KASSE 840 × 620 MM · 100 KG</text>
<line x1="475" y1="230" x2="475" y2="248" stroke="#47534D" stroke-width="1"/>
</g>
</svg>
</figure>
</div>
</section>
<div class="marquee" aria-hidden="true">
<div class="marquee-track">
<span>Håndbygget i København <i>✳</i> 10 års stelgaranti <i>✳</i> Målbygget til dig <i>✳</i> Prøvetur på Refshaleøen <i>✳</i> 647 cykler på gaden <i>✳</i></span>
<span>Håndbygget i København <i>✳</i> 10 års stelgaranti <i>✳</i> Målbygget til dig <i>✳</i> Prøvetur på Refshaleøen <i>✳</i> 647 cykler på gaden <i>✳</i></span>
</div>
</div>
<section class="section" id="modeller">
<div class="container">
<div class="section-head">
<div>
<p class="kicker reveal">Modeller</p>
<h2 class="reveal d1">Three starting points. <em>Endless variations.</em></h2>
</div>
<p class="section-note reveal d2">Hver cykel tegnes på ny — modellen er kun begyndelsen</p>
</div>
<div class="models-grid">
<article class="model-card reveal">
<svg viewBox="0 0 200 120" role="img" aria-label="Kompakt short cargo bike icon">
<g fill="none" stroke="#16221D" stroke-linecap="round" stroke-linejoin="round">
<circle cx="48" cy="88" r="25" stroke-width="5"/>
<circle cx="140" cy="94" r="19" stroke-width="5"/>
<line x1="92" y1="92" x2="48" y2="88" stroke-width="3.5"/>
<line x1="70" y1="52" x2="48" y2="88" stroke-width="3.5"/>
<line x1="92" y1="92" x2="72" y2="50" stroke-width="4"/>
<line x1="100" y1="46" x2="106" y2="66" stroke-width="5"/>
<line x1="72" y1="50" x2="100" y2="48" stroke-width="4"/>
<path d="M 92 40 Q 104 34 112 42" stroke-width="4"/>
<line x1="100" y1="46" x2="94" y2="42" stroke-width="4"/>
<line x1="96" y1="88" x2="136" y2="82" stroke-width="4"/>
<line x1="134" y1="76" x2="140" y2="94" stroke-width="4"/>
<line x1="60" y1="46" x2="76" y2="44" stroke-width="5"/>
</g>
<polygon points="104,50 134,54 130,82 100,78" fill="#D9A05B" stroke="#16221D" stroke-width="3.5" stroke-linejoin="round"/>
<circle cx="48" cy="88" r="4" fill="#16221D"/><circle cx="140" cy="94" r="3.5" fill="#16221D"/>
<circle cx="92" cy="92" r="6" fill="none" stroke="#16221D" stroke-width="3"/>
</svg>
<h3 class="model-name"><span class="model-dk">Byens cykel</span>Kompakt</h3>
<p class="model-desc">The two-wheeled city hauler. One child, the week's groceries, or both at once. Fits through a standard courtyard door and parks like a normal bike.</p>
<ul class="model-specs"><li>L 2.260 MM</li><li>Kasse 60 L</li><li>Maks 80 kg</li><li>24 kg</li></ul>
<div class="model-price"><span class="from">From</span><span class="amount">3.450 €</span></div>
</article>
<article class="model-card reveal d1">
<span class="model-tag">Mest valgte</span>
<svg viewBox="0 0 200 120" role="img" aria-label="Familie long-john cargo bike icon">
<g fill="none" stroke="#16221D" stroke-linecap="round" stroke-linejoin="round">
<circle cx="42" cy="86" r="26" stroke-width="5"/>
<circle cx="164" cy="94" r="19" stroke-width="5"/>
<line x1="86" y1="90" x2="42" y2="86" stroke-width="3.5"/>
<line x1="62" y1="52" x2="42" y2="86" stroke-width="3.5"/>
<line x1="86" y1="90" x2="64" y2="50" stroke-width="4"/>
<line x1="92" y1="46" x2="98" y2="66" stroke-width="5"/>
<line x1="64" y1="50" x2="92" y2="48" stroke-width="4"/>
<path d="M 84 40 Q 96 34 104 42" stroke-width="4"/>
<line x1="88" y1="86" x2="152" y2="78" stroke-width="4.5"/>
<line x1="98" y1="66" x2="150" y2="74" stroke-width="2.5" opacity=".7"/>
<line x1="152" y1="74" x2="164" y2="94" stroke-width="4"/>
<line x1="52" y1="46" x2="68" y2="44" stroke-width="5"/>
</g>
<polygon points="98,48 152,54 146,84 102,80" fill="#D9A05B" stroke="#16221D" stroke-width="3.5" stroke-linejoin="round"/>
<line x1="100" y1="60" x2="150" y2="65" stroke="#16221D" stroke-width="1.6" opacity=".5"/>
<line x1="101" y1="71" x2="148" y2="75" stroke="#16221D" stroke-width="1.6" opacity=".5"/>
<circle cx="42" cy="86" r="4" fill="#16221D"/><circle cx="164" cy="94" r="3.5" fill="#16221D"/>
<circle cx="86" cy="90" r="6" fill="none" stroke="#16221D" stroke-width="3"/>
</svg>
<h3 class="model-name"><span class="model-dk">Familiens bil</span>Familie</h3>
<p class="model-desc">Two children and a dog, year-round, in any weather Copenhagen offers. Our signature long-john — stable, light-steering and measured to your body.</p>
<ul class="model-specs"><li>L 2.480 MM</li><li>Kasse 840×620</li><li>Maks 100 kg</li><li>28 kg</li></ul>
<div class="model-price"><span class="from">From</span><span class="amount">4.200 €</span></div>
</article>
<article class="model-card reveal d2">
<svg viewBox="0 0 200 120" role="img" aria-label="Erhverv three-wheeled cargo trike icon">
<g fill="none" stroke="#16221D" stroke-linecap="round" stroke-linejoin="round">
<circle cx="44" cy="86" r="26" stroke-width="5"/>
<circle cx="142" cy="92" r="17" stroke-width="5"/>
<circle cx="172" cy="92" r="17" stroke-width="5"/>
<line x1="88" y1="90" x2="44" y2="86" stroke-width="3.5"/>
<line x1="64" y1="52" x2="44" y2="86" stroke-width="3.5"/>
<line x1="88" y1="90" x2="66" y2="50" stroke-width="4"/>
<line x1="94" y1="46" x2="100" y2="64" stroke-width="5"/>
<line x1="66" y1="50" x2="94" y2="48" stroke-width="4"/>
<path d="M 86 40 Q 98 34 106 42" stroke-width="4"/>
<line x1="90" y1="88" x2="180" y2="88" stroke-width="4.5"/>
<line x1="54" y1="46" x2="70" y2="44" stroke-width="5"/>
</g>
<rect x="98" y="46" width="86" height="42" rx="4" fill="#D9A05B" stroke="#16221D" stroke-width="3.5"/>
<line x1="98" y1="60" x2="184" y2="60" stroke="#16221D" stroke-width="1.6" opacity=".5"/>
<line x1="98" y1="74" x2="184" y2="74" stroke="#16221D" stroke-width="1.6" opacity=".5"/>
<circle cx="44" cy="86" r="4" fill="#16221D"/><circle cx="142" cy="92" r="3.2" fill="#16221D"/><circle cx="172" cy="92" r="3.2" fill="#16221D"/>
<circle cx="88" cy="90" r="6" fill="none" stroke="#16221D" stroke-width="3"/>
</svg>
<h3 class="model-name"><span class="model-dk">Byens varevogn</span>Erhverv</h3>
<p class="model-desc">A three-wheeled van replacement for cafés, florists and couriers. 150 kg payload, a box we can build to your crates — and paint in your colours.</p>
<ul class="model-specs"><li>L 2.540 MM</li><li>Kasse 180 L</li><li>Maks 150 kg</li><li>3 hjul</li></ul>
<div class="model-price"><span class="from">From</span><span class="amount">4.900 €</span></div>
</article>
</div>
</div>
</section>
<section class="section" id="byg">
<div class="container">
<p class="kicker reveal">Byg din cykel</p>
<h2 class="reveal d1">Sketch your own. <em>We quote within two days.</em></h2>
<div class="cfg-grid">
<div class="reveal d1">
<fieldset class="cfg-group">
<legend class="cfg-legend">01 — Model</legend>
<div class="opts">
<label class="opt">
<input type="radio" name="model" value="Kompakt" data-price="3450">
<span class="opt-body"><span><span class="opt-name">Kompakt</span><span class="opt-desc">City hauler · 80 kg box</span></span><span class="opt-price">3.450 €</span></span>
</label>
<label class="opt">
<input type="radio" name="model" value="Familie" data-price="4200" checked>
<span class="opt-body"><span><span class="opt-name">Familie</span><span class="opt-desc">Two kids & a dog · 100 kg box</span></span><span class="opt-price">4.200 €</span></span>
</label>
<label class="opt">
<input type="radio" name="model" value="Erhverv" data-price="4900">
<span class="opt-body"><span><span class="opt-name">Erhverv</span><span class="opt-desc">Business trike · 150 kg payload</span></span><span class="opt-price">4.900 €</span></span>
</label>
</div>
</fieldset>
<fieldset class="cfg-group">
<legend class="cfg-legend">02 — El-assist</legend>
<div class="opts two">
<label class="opt">
<input type="radio" name="motor" value="Uden motor" data-price="0" checked>
<span class="opt-body"><span><span class="opt-name">Uden</span><span class="opt-desc">Pure legs, lighter bike</span></span><span class="opt-price">+0 €</span></span>
</label>
<label class="opt">
<input type="radio" name="motor" value="E-assist 250 W" data-price="1350">
<span class="opt-body"><span><span class="opt-name">E-assist</span><span class="opt-desc">250 W mid-drive · 500 Wh</span></span><span class="opt-price">+1.350 €</span></span>
</label>
</div>
</fieldset>
<fieldset class="cfg-group">
<legend class="cfg-legend">03 — Gear</legend>
<div class="opts two">
<label class="opt">
<input type="radio" name="gear" value="8-gear nav" data-price="0" checked>
<span class="opt-body"><span><span class="opt-name">8-speed hub</span><span class="opt-desc">Sealed, near-zero service</span></span><span class="opt-price">+0 €</span></span>
</label>
<label class="opt">
<input type="radio" name="gear" value="Enviolo trinløs" data-price="480">
<span class="opt-body"><span><span class="opt-name">Enviolo</span><span class="opt-desc">Stepless, belt-ready</span></span><span class="opt-price">+480 €</span></span>
</label>
</div>
</fieldset>
<fieldset class="cfg-group">
<legend class="cfg-legend">04 — Farve</legend>
<div class="swatches">
<label class="swatch">
<input type="radio" name="color" value="Skovgrøn" data-price="0" data-hex="#1E4A38" checked>
<span class="swatch-dot" style="background:#1E4A38"></span>
<span class="swatch-label">Skovgrøn</span>
</label>
<label class="swatch">
<input type="radio" name="color" value="Kulsort" data-price="0" data-hex="#23272B">
<span class="swatch-dot" style="background:#23272B"></span>
<span class="swatch-label">Kulsort</span>
</label>
<label class="swatch">
<input type="radio" name="color" value="Rå stål" data-price="0" data-hex="#7E8580">
<span class="swatch-dot" style="background:#7E8580"></span>
<span class="swatch-label">Rå stål</span>
</label>
<label class="swatch">
<input type="radio" name="color" value="Okker" data-price="120" data-hex="#C8842F">
<span class="swatch-dot" style="background:#C8842F"></span>
<span class="swatch-label">Okker +120 €</span>
</label>
</div>
</fieldset>
<fieldset class="cfg-group">
<legend class="cfg-legend">05 — Tilvalg</legend>
<div class="opts two">
<label class="opt">
<input type="checkbox" name="extras" value="Regnslag" data-price="210">
<span class="opt-body"><span><span class="opt-name">Regnslag</span><span class="opt-desc">Full rain canopy, panorama window</span></span><span class="opt-price">+210 €</span></span>
</label>
<label class="opt">
<input type="checkbox" name="extras" value="Børnebænk m. sele" data-price="260">
<span class="opt-body"><span><span class="opt-name">Børnebænk</span><span class="opt-desc">Child bench + 5-point harness</span></span><span class="opt-price">+260 €</span></span>
</label>
<label class="opt">
<input type="checkbox" name="extras" value="Ekstra batteri" data-price="520">
<span class="opt-body"><span><span class="opt-name">Ekstra batteri</span><span class="opt-desc">Second 500 Wh pack</span></span><span class="opt-price">+520 €</span></span>
</label>
<label class="opt">
<input type="checkbox" name="extras" value="Bagagebærer" data-price="90">
<span class="opt-body"><span><span class="opt-name">Bagagebærer</span><span class="opt-desc">Rear rack, 25 kg rated</span></span><span class="opt-price">+90 €</span></span>
</label>
</div>
</fieldset>
</div>
<aside class="cfg-summary reveal d2" aria-live="polite">
<svg id="cfg-bike" viewBox="0 0 400 250" role="img" aria-label="Your selected bike, frame shown in chosen colour">
<line x1="20" y1="226" x2="380" y2="226" stroke="#47534D" stroke-width="1.5" opacity=".5"/>
<g fill="none" stroke="#EDE8DA" stroke-linecap="round">
<circle cx="92" cy="182" r="44" stroke-width="5"/>
<circle cx="318" cy="192" r="34" stroke-width="5"/>
</g>
<g stroke="#EDE8DA" stroke-width="1.4" opacity=".45">
<line x1="92" y1="182" x2="134" y2="182"/><line x1="92" y1="182" x2="113" y2="218.4"/>
<line x1="92" y1="182" x2="71" y2="218.4"/><line x1="92" y1="182" x2="50" y2="182"/>
<line x1="92" y1="182" x2="71" y2="145.6"/><line x1="92" y1="182" x2="113" y2="145.6"/>
<line x1="318" y1="192" x2="350" y2="192"/><line x1="318" y1="192" x2="334" y2="219.7"/>
<line x1="318" y1="192" x2="302" y2="219.7"/><line x1="318" y1="192" x2="286" y2="192"/>
<line x1="318" y1="192" x2="302" y2="164.3"/><line x1="318" y1="192" x2="334" y2="164.3"/>
</g>
<g class="fr" fill="none" stroke="#1E4A38" stroke-linecap="round" stroke-linejoin="round" style="stroke:#1E4A38">
<line x1="168" y1="186" x2="128" y2="106" stroke-width="6"/>
<line x1="182" y1="122" x2="168" y2="186" stroke-width="6"/>
<line x1="180" y1="104" x2="132" y2="110" stroke-width="6"/>
<line x1="178" y1="98" x2="190" y2="128" stroke-width="8"/>
<line x1="174" y1="182" x2="306" y2="160" stroke-width="7"/>
<line x1="306" y1="158" x2="318" y2="192" stroke-width="5"/>
<line x1="168" y1="186" x2="92" y2="182" stroke-width="4"/>
<line x1="134" y1="122" x2="92" y2="182" stroke-width="4"/>
<line x1="192" y1="130" x2="304" y2="154" stroke-width="3" opacity=".8"/>
</g>
<path d="M 160 74 Q 176 66 188 74" fill="none" stroke="#EDE8DA" stroke-width="5" stroke-linecap="round"/>
<line x1="178" y1="98" x2="160" y2="74" stroke="#EDE8DA" stroke-width="4" stroke-linecap="round"/>
<path d="M 112 100 Q 128 92 142 98" fill="none" stroke="#EDE8DA" stroke-width="6" stroke-linecap="round"/>
<line x1="128" y1="106" x2="124" y2="98" stroke="#EDE8DA" stroke-width="4" stroke-linecap="round"/>
<polygon points="196,118 296,128 288,178 202,170" fill="#D9A05B" stroke="#EDE8DA" stroke-width="3.5" stroke-linejoin="round"/>
<line x1="198" y1="135" x2="293.4" y2="144.5" stroke="#16221D" stroke-width="1.6" opacity=".5"/>
<line x1="200" y1="152" x2="290.7" y2="161" stroke="#16221D" stroke-width="1.6" opacity=".5"/>
<circle cx="168" cy="186" r="11" fill="none" stroke="#EDE8DA" stroke-width="3"/>
<circle cx="92" cy="182" r="5" fill="#EDE8DA"/><circle cx="318" cy="192" r="4.5" fill="#EDE8DA"/>
</svg>
<p class="cfg-summary-title">Din konfiguration</p>
<p id="cfg-recap">Familie · Uden motor · 8-gear nav · Skovgrøn</p>
<div class="cfg-total-row"><span class="lbl">Total inkl. moms</span><span id="cfg-total">4.200 €</span></div>
<div class="cfg-sub"><span>Depositum (20 %)</span><strong id="cfg-deposit">840 €</strong></div>
<div class="cfg-sub"><span>Eller 36 md. via vores bankpartner</span><strong id="cfg-monthly">117 €/md</strong></div>
<a class="btn" href="#bestil">Book consultation with this build <span class="arr">→</span></a>
<p class="cfg-note">Final quote follows your fitting. Nothing is binding until you approve the drawing.</p>
</aside>
</div>
</div>
</section>
<section class="section" id="processen">
<div class="container">
<div class="section-head">
<div>
<p class="kicker reveal">Processen</p>
<h2 class="reveal d1">From first coffee to <em>first ride.</em></h2>
</div>
<p class="section-note reveal d2">Typisk 8–10 uger fra godkendt tegning</p>
</div>
<div class="process-grid">
<div class="step reveal">
<span class="step-num">01</span>
<h3>Samtale <span class="dk">— we talk</span></h3>
<p>45 minutes in the workshop or on video. How you live, what you carry, where you park. No obligation, good coffee.</p>
</div>
<div class="step reveal d1">
<span class="step-num">02</span>
<h3>Mål & tegning <span class="dk">— fitting</span></h3>
<p>We measure you — and your kids, crates or dog — and draft your geometry. You approve the drawing and quote; a 20 % deposit books your build slot.</p>
</div>
<div class="step reveal d2">
<span class="step-num">03</span>
<h3>Håndbygning <span class="dk">— the build</span></h3>
<p>Tubes are mitred and welded, the frame powder-coated in-house, wheels laced by hand. You get photo updates as your bike takes shape.</p>
</div>
<div class="step reveal d3">
<span class="step-num">04</span>
<h3>Afhentning <span class="dk">— handover</span></h3>
<p>Final fitting, a test loop around Refshaleøen, and your first free service after 100 km. Then a decade of warranty begins.</p>
</div>
</div>
</div>
</section>
<section class="section" id="vaerkstedet">
<div class="container ws-grid">
<div class="ws-copy">
<p class="kicker reveal">Værkstedet</p>
<h2 class="reveal d1">Six builders. One building. <em>No shortcuts.</em></h2>
<p class="reveal d2">Our workshop sits in an old shipyard hall on Refshaleøen, ten minutes by bike from Nyhavn. Frames are welded three metres from where boxes are oiled and wheels are trued — nothing leaves the building until it is done, and done properly.</p>
<ul class="materials reveal d2">
<li><span class="mk">Stel</span><span>Double-butted chromoly steel, TIG-welded in-house, alignment-checked twice</span></li>
<li><span class="mk">Kasse</span><span>Oiled FSC ash with stainless fittings — replaceable plank by plank</span></li>
<li><span class="mk">Lak</span><span>In-house powder coat, 40+ colours, touch-up kit included</span></li>
<li><span class="mk">Hjul</span><span>Hand-laced 36-spoke wheels on double-wall rims, tensioned by ear and gauge</span></li>
<li><span class="mk">El</span><span>250 W mid-drive, 500 Wh, EN 15194 certified, standard parts throughout</span></li>
<li><span class="mk">Lys</span><span>Integrated front and rear lights running off the main battery — always on, like us</span></li>
</ul>
</div>
<div class="ws-visual reveal d2">
<div class="ws-frame">
<svg class="stamp" viewBox="0 0 220 220" role="img" aria-label="Stamp: Handbuilt in Copenhagen — Lumen Cycles — Est. 2016">
<defs>
<path id="stamp-c" d="M110,110 m-84,0 a84,84 0 1,1 168,0 a84,84 0 1,1 -168,0"/>
</defs>
<circle cx="110" cy="110" r="104" fill="none" stroke="currentColor" stroke-width="1.5"/>
<circle cx="110" cy="110" r="58" fill="none" stroke="currentColor" stroke-width="1.5"/>
<text class="stamp-text"><textPath href="#stamp-c">HÅNDBYGGGET I KØBENHAVN · LUMEN CYCLES · EST. 2016 ·</textPath></text>
<g>
<circle cx="110" cy="110" r="12" fill="#1E4A38"/>
<g stroke="#C8842F" stroke-width="3" stroke-linecap="round">
<line x1="110" y1="88" x2="110" y2="94"/><line x1="110" y1="132" x2="110" y2="126"/>
<line x1="88" y1="110" x2="94" y2="110"/><line x1="132" y1="110" x2="126" y2="110"/>
<line x1="94.5" y1="94.5" x2="98.7" y2="98.7"/><line x1="125.5" y1="125.5" x2="121.3" y2="121.3"/>
<line x1="125.5" y1="94.5" x2="121.3" y2="98.7"/><line x1="94.5" y1="125.5" x2="98.7" y2="121.3"/>
</g>
</g>
</svg>
</div>
<span class="ws-caption">Refshalevej 167B — værksted & butik</span>
</div>
</div>
</section>
<section class="section" id="ejere">
<div class="container">
<div class="section-head" style="justify-content:center;text-align:center">
<div style="margin:0 auto">
<p class="kicker reveal" style="justify-content:center">Ejere</p>
<h2 class="reveal d1" style="margin:0 auto">People who stopped <em>needing a car.</em></h2>
</div>
</div>
<div class="quote-wrap reveal d2">
<span class="quote-mark" aria-hidden="true">”</span>
<div id="t-box" aria-live="polite">
<blockquote>
<p id="t-text">We sold our second car three months after the bike arrived. Two kids, kindergarten, the weekly shop — it simply swallows everyday life.</p>
<footer id="t-cite">Marie L. · Østerbro · Familie '24</footer>
</blockquote>
</div>
<div class="t-controls">
<button class="t-btn" id="t-prev" aria-label="Previous quote">←</button>
<div class="t-dots" id="t-dots"></div>
<button class="t-btn" id="t-next" aria-label="Next quote">→</button>
</div>
</div>
</div>
</section>
<section class="section" id="faq" style="padding-top:0">
<div class="container">
<div class="section-head" style="justify-content:center;text-align:center">
<div style="margin:0 auto">
<p class="kicker reveal" style="justify-content:center">Ofte stillede spørgsmål</p>
<h2 class="reveal d1" style="margin:0 auto">Fair questions, <em>straight answers.</em></h2>
</div>
</div>
<div class="faq-list reveal d2">
<div class="faq-item">
<button class="faq-q" aria-expanded="false">How does ordering and payment work?<span class="ic">+</span></button>
<div class="faq-a"><div class="faq-a-in"><p>Consultation first, then a drawing and a fixed quote. A 20 % deposit books your build slot; the balance is due when you pick up the bike. We accept bank transfer and MobilePay. Nothing is binding until you approve the drawing.</p></div></div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false">What is the current lead time?<span class="ic">+</span></button>
<div class="faq-a"><div class="faq-a-in"><p>Typically 8–10 weeks from your approved drawing, depending on the season. Spring slots fill fastest — a consultation in winter usually means riding by the time the light returns.</p></div></div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false">Can I test ride before deciding?<span class="ic">+</span></button>
<div class="faq-a"><div class="faq-a-in"><p>Yes — we keep demo bikes of all three models at the workshop. Book a test ride and we will have coffee ready. Bring the kids; there is room in the box and lemonade in the fridge.</p></div></div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false">Do you deliver outside Denmark?<span class="ic">+</span></button>
<div class="faq-a"><div class="faq-a-in"><p>We ship crated across the EU from 180 €, fully insured, with a video call for final assembly checks. Many owners instead make a weekend of it — pick up in Copenhagen and ride home along the coast.</p></div></div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false">What does the warranty cover?<span class="ic">+</span></button>
<div class="faq-a"><div class="faq-a-in"><p>10 years on frame and fork, 2 years on parts and electrics, and free safety checks in the workshop for as long as you own the bike. Wear parts are standard sizes, so any good mechanic anywhere can keep you rolling.</p></div></div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false">Can the box really carry 100 kg?<span class="ic">+</span></button>
<div class="faq-a"><div class="faq-a-in"><p>Rated for 100 kg in the box plus a 120 kg rider — and load-tested to twice that before any design leaves the jig. Two children, a week of groceries and a bag of dog food is an ordinary Tuesday.</p></div></div>
</div>
</div>
</div>
</section>
<section class="section" id="bestil">
<div class="container">
<div class="section-head">
<div>
<p class="kicker reveal">Besøg & bestil</p>
<h2 class="reveal d1">Come by the workshop. <em>Or write to us.</em></h2>
</div>
</div>
<div class="visit-grid">
<div class="visit-card reveal">
<h3>Værksted & butik</h3>
<div class="visit-rows">
<div><span class="vr-k">Adresse</span><span class="vr-v">Refshalevej 167B<br>1432 København K</span></div>
<div><span class="vr-k">Åbningstider</span><span class="vr-v">Tue–Fri 09–17 · Sat 10–14<br>Mon & Sun — we ride</span></div>
<div><span class="vr-k">Kontakt</span><span class="vr-v"><a href="#bestil">hej@lumencycles.dk</a><br>+45 31 42 67 08</span></div>
</div>
<p class="visit-note">Metro to Christianshavn, then 12 minutes by bike along the harbour — fittingly, the easiest way to reach us is on two wheels.</p>
</div>
<div class="order-card reveal d1" id="order-card">
<form id="order-form" novalidate>
<h3>Book a consultation</h3>
<p>45 minutes, no obligation. We reply within two working days.</p>
<div class="form-grid">
<div class="field">
<label for="f-name">Navn</label>
<input id="f-name" name="name" type="text" autocomplete="name" required>
</div>
<div class="field">
<label for="f-email">E-mail</label>
<input id="f-email" name="email" type="email" autocomplete="email" required>
</div>
<div class="field full">
<label for="f-model">Hvad drømmer du om?</label>
<select id="f-model" name="model">
<option>Familie</option>
<option>Kompakt</option>
<option>Erhverv</option>
<option>Ved ikke endnu — rådgiv mig</option>
</select>
</div>
<div class="field full">
<label for="f-msg">Fortæl kort om dit liv på hjul (valgfrit)</label>
<textarea id="f-msg" name="message" placeholder="To børn, en hund, ingen bil..."></textarea>
</div>
<div class="form-foot">
<small>We only use your details to answer you. Nothing else.</small>
<button class="btn" type="submit">Request my consultation <span class="arr">→</span></button>
</div>
</div>
</form>
<div class="form-success">
<div class="ok-ring"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#1E4A38" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 6.5"/></svg></div>
<h3>Tak — vi skriver snart.</h3>
<p>Your request is in the stand. Expect a reply from a human (probably Freja) within two working days.</p>
<span class="ref" id="order-ref">Ref. LC-2026-0000</span>
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="foot-grid">
<div class="foot-brand">
<a class="brand" href="#top" aria-label="Lumen Cycles — home">
<svg viewBox="0 0 24 24" aria-hidden="true" width="30" height="30">
<circle cx="12" cy="12" r="5" fill="#1E4A38"/>
<g stroke="#C8842F" stroke-width="1.8" stroke-linecap="round">
<line x1="12" y1="1" x2="12" y2="4.4"/><line x1="12" y1="23" x2="12" y2="19.6"/>
<line x1="1" y1="12" x2="4.4" y2="12"/><line x1="23" y1="12" x2="19.6" y2="12"/>
<line x1="4.2" y1="4.2" x2="6.6" y2="6.6"/><line x1="19.8" y1="19.8" x2="17.4" y2="17.4"/>
<line x1="19.8" y1="4.2" x2="17.4" y2="6.6"/><line x1="4.2" y1="19.8" x2="6.6" y2="17.4"/>
</g>
</svg>
<span><span class="brand-name">Lumen Cycles</span><span class="brand-sub">København</span></span>
</a>
<p>Made-to-measure cargo bikes, built by hand on Refshaleøen since 2016. Steel, ash and good light.</p>
</div>
<div class="foot-col">
<h4>Cykler</h4>
<ul>
<li><a href="#modeller">Kompakt</a></li>
<li><a href="#modeller">Familie</a></li>
<li><a href="#modeller">Erhverv</a></li>
<li><a href="#byg">Byg din egen</a></li>
</ul>
</div>
<div class="foot-col">
<h4>Værkstedet</h4>
<ul>
<li><a href="#processen">Processen</a></li>
<li><a href="#vaerkstedet">Materialer</a></li>
<li><a href="#ejere">Ejere</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div>
<div class="foot-col">
<h4>Praktisk</h4>
<ul>
<li><a href="#bestil">Book prøvetur</a></li>
<li><a href="#bestil">Refshalevej 167B</a></li>
<li><a href="#bestil">hej@lumencycles.dk</a></li>
<li><a href="#bestil">+45 31 42 67 08</a></li>
</ul>
</div>
</div>
<div class="foot-base">
<span>© 2026 Lumen Cycles ApS · CVR 38 41 22 07</span>
<span>Håndbygget i København · Priser inkl. 25 % moms</span>
</div>
</div>
</footer>
<script>
(function(){
var header=document.getElementById('site-header');
var onScroll=function(){header.classList.toggle('scrolled',window.scrollY>12);};
window.addEventListener('scroll',onScroll,{passive:true});
onScroll();
var menuBtn=document.getElementById('menu-btn');
menuBtn.addEventListener('click',function(){
var open=header.classList.toggle('nav-open');
menuBtn.setAttribute('aria-expanded',open?'true':'false');
});
header.querySelectorAll('.main-nav a').forEach(function(a){
a.addEventListener('click',function(){header.classList.remove('nav-open');menuBtn.setAttribute('aria-expanded','false');});
});
var io=new IntersectionObserver(function(entries){
entries.forEach(function(e){
if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}
});
},{threshold:.12});
document.querySelectorAll('.reveal').forEach(function(el){io.observe(el);});
var fmt=new Intl.NumberFormat('da-DK',{style:'currency',currency:'EUR',maximumFractionDigits:0});
var cfgForm=document.querySelector('.cfg-grid');
var recapEl=document.getElementById('cfg-recap');
var totalEl=document.getElementById('cfg-total');
var depEl=document.getElementById('cfg-deposit');
var monEl=document.getElementById('cfg-monthly');
var frameParts=document.querySelectorAll('#cfg-bike .fr');
function updateCfg(){
var total=0,parts=[];
cfgForm.querySelectorAll('input[type=radio]:checked').forEach(function(r){
total+=parseInt(r.dataset.price,10)||0;
parts.push(r.value);
if(r.name==='color'&&r.dataset.hex){
frameParts.forEach(function(p){p.style.stroke=r.dataset.hex;});
}
});
var extras=[];
cfgForm.querySelectorAll('input[name=extras]:checked').forEach(function(c){
total+=parseInt(c.dataset.price,10)||0;
extras.push(c.value);
});
recapEl.textContent=parts.join(' · ')+(extras.length?' + '+extras.join(', '):'');
totalEl.textContent=fmt.format(total);
depEl.textContent=fmt.format(Math.round(total*0.2));
monEl.textContent=fmt.format(Math.round(total/36))+'/md';
}
cfgForm.addEventListener('change',updateCfg);
updateCfg();
var quotes=[
{t:'We sold our second car three months after the bike arrived. Two kids, kindergarten, the weekly shop — it simply swallows everyday life.',c:"Marie L. · Østerbro · Familie '24"},
{t:'Flora roasts on Amager and delivers across the city. Our Erhverv has replaced a diesel van for two years without missing a single day.',c:"Jonas P. · Flora Kafferisteri · Erhverv '23"},
{t:'I measured everything twice and still doubted the custom geometry. On the first ride home I understood. It fits like a good jacket.',c:"Kirsten H. · Nordvest · Kompakt '25"}
];
var tBox=document.getElementById('t-box');
var tText=document.getElementById('t-text');
var tCite=document.getElementById('t-cite');
var dotsWrap=document.getElementById('t-dots');
var qi=0,timer=null;
quotes.forEach(function(_,i){
var d=document.createElement('button');
d.className='t-dot'+(i===0?' active':'');
d.setAttribute('aria-label','Quote '+(i+1));
d.addEventListener('click',function(){go(i);restart();});
dotsWrap.appendChild(d);
});
var dots=dotsWrap.querySelectorAll('.t-dot');
function go(i){
qi=(i+quotes.length)%quotes.length;
tBox.classList.add('fade');
setTimeout(function(){
tText.textContent=quotes[qi].t;
tCite.textContent=quotes[qi].c;
dots.forEach(function(d,j){d.classList.toggle('active',j===qi);});
tBox.classList.remove('fade');
},350);
}
function restart(){clearInterval(timer);timer=setInterval(function(){go(qi+1);},7000);}
document.getElementById('t-prev').addEventListener('click',function(){go(qi-1);restart();});
document.getElementById('t-next').addEventListener('click',function(){go(qi+1);restart();});
restart();
document.querySelectorAll('.faq-item').forEach(function(item){
var btn=item.querySelector('.faq-q');
btn.addEventListener('click',function(){
var open=item.classList.toggle('open');
btn.setAttribute('aria-expanded',open?'true':'false');
});
});
var form=document.getElementById('order-form');
var card=document.getElementById('order-card');
form.addEventListener('submit',function(ev){
ev.preventDefault();
if(!form.checkValidity()){form.reportValidity();return;}
var ref='LC-'+new Date().getFullYear()+'-'+(1000+Math.floor(Math.random()*9000));
document.getElementById('order-ref').textContent='Ref. '+ref;
card.classList.add('sent');
});
})();
</script>
</body>
</html>
