• Updated 13 Nov, 19:18 UTC
  • Next run 14 Nov, 05:17 UTCNext 14 Nov 05:17
  • Last 7 days: 9 new models · 81 runs7 d: 9 models · 81 runs
Landing page for a cargo bike workshop

Ling 3.2 FlashinclusionAI

Network offOpen alone (new tab)

Run details

Model
inclusionai/ling-3.2-flash:free
Route
OpenRouter API, one user message
Served by
Ant Digital
Effort
the model's default
Limits
60 min · 262,144 output tokens (the model's limit)
Date
13 Nov 2026
Time
19 min 43 s
Size
72 kB
Tokens
110 in, 56,365 out (28,574 of them thinking)
List price
free at today's price ($0, free route only)
Paid
$0 (free route)

Raw files: output · meta.json

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). Reply with the file in a single ```html code block.

Source

72 kB 1,050 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, handbuilt in Copenhagen</title>
<meta name="description" content="Lumen Cycles is a two-builder workshop on Nørrebro, Copenhagen. We TIG-weld steel cargo bikes to your body, route and cargo. 6–10 week lead time, 3-year frame warranty.">
<meta name="theme-color" content="#F3EFE4">
<meta property="og:title" content="Lumen Cycles — Custom cargo bikes, handbuilt in Copenhagen">
<meta property="og:description" content="One bike at a time. Steel, belts, honest pricing. Book a free fitting at our Nørrebro workshop.">
<meta property="og:type" content="website">
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BikeStore","name":"Lumen Cycles","description":"Copenhagen workshop building custom cargo bikes to order.","address":{"@type":"PostalAddress","streetAddress":"Jægersborggade 14","postalCode":"2200","addressLocality":"København N","addressCountry":"DK"},"telephone":"+45 33 12 40 90","email":"hello@lumencycles.dk","openingHours":"Tu-Fr 10:00-17:00","priceRange":"€€€","areaServed":"Copenhagen"}
</script>
<style>
/* ============ TOKENS ============ */
:root{
  --bone:#F3EFE4; --paper:#FBF8F0; --ink:#1B1D18; --ink2:#575A4E;
  --line:#DCD4BF; --amber:#C2801E; --amber-d:#96620F; --amber-soft:#F2E4C4;
  --green:#3E7C4F; --red:#B3402E;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,"Liberation Mono",monospace;
  --hdr:68px; --r:14px;
  --sh:0 18px 40px -18px rgba(27,29,24,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font:400 16.5px/1.65 var(--sans);color:var(--ink);background:var(--bone);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--amber-soft)}
body::after{content:"";position:fixed;inset:0;z-index:999;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' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%} a{color:inherit} button{font:inherit;cursor:pointer}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{scroll-margin-top:calc(var(--hdr) + 14px)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(40px,6vw,74px);line-height:1.03}
h2{font-size:clamp(28px,3.4vw,40px)}
h1 em,h2 em{font-style:italic;color:var(--amber-d)}
.eyebrow{font:600 11.5px/1.4 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--amber-d);display:flex;align-items:center;gap:12px;margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--amber)}
.lede{color:var(--ink2);font-size:17.5px;max-width:56ch}
.ic{width:1em;height:1em;flex:none}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}

/* ============ BUTTONS / CHIPS ============ */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  padding:16px 24px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--amber);border-color:var(--amber);color:var(--ink);transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(194,128,30,.7)}
.btn .ic{transition:transform .25s}
.btn:hover .ic{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--amber-soft);border-color:var(--amber-d);color:var(--ink);box-shadow:none}
.btn.small{padding:11px 18px}
.chip{display:inline-flex;align-items:center;gap:7px;font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:7px 12px;color:var(--ink2);background:transparent}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(62,124,79,.45)}70%{box-shadow:0 0 0 9px rgba(62,124,79,0)}100%{box-shadow:0 0 0 0 rgba(62,124,79,0)}}

/* ============ HEADER ============ */
header.site{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,box-shadow .3s,border-color .3s;border-bottom:1px solid transparent}
header.site.scrolled{background:rgba(243,239,228,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:var(--line)}
.hd{height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand svg{width:30px;height:30px;color:var(--ink)}
.brand .word{font:600 19px/1 var(--serif);letter-spacing:.01em}
.brand .sub{display:block;font:600 9px/1 var(--mono);letter-spacing:.3em;color:var(--ink2);margin-top:3px}
nav.desk{display:flex;gap:30px}
nav.desk a{font:600 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink2);position:relative;padding:6px 0}
nav.desk a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--amber);transition:width .3s}
nav.desk a:hover{color:var(--ink)} nav.desk a:hover::after{width:100%}
.hd-r{display:flex;align-items:center;gap:14px}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--paper);position:relative}
.burger span{position:absolute;left:11px;right:11px;height:1.8px;background:var(--ink);transition:.3s}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:20px}.burger span:nth-child(3){top:26px}
body.menu-open .burger span:nth-child(1){top:20px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:20px;transform:rotate(-45deg)}
.mnav{position:fixed;inset:var(--hdr) 0 auto 0;z-index:49;background:var(--paper);border-bottom:1px solid var(--line);
  transform:translateY(-110%);transition:transform .4s cubic-bezier(.22,1,.36,1);padding:26px 24px 32px;display:flex;flex-direction:column;gap:4px}
body.menu-open .mnav{transform:none}
.mnav a{font:600 22px/1.3 var(--serif);text-decoration:none;padding:12px 0;border-bottom:1px dashed var(--line);display:flex;justify-content:space-between;align-items:center}
.mnav a .n{font:600 10px var(--mono);color:var(--amber-d);letter-spacing:.15em}

/* ============ HERO ============ */
.hero{position:relative;padding:calc(var(--hdr) + 64px) 0 84px;overflow:hidden}
.hero::before{content:"";position:absolute;top:-260px;right:-180px;width:720px;height:720px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(194,128,30,.16),rgba(194,128,30,0));pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{margin:0 0 22px}
.hero .lede{margin-bottom:30px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.trust{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font:600 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.trust .stars{display:flex;align-items:center;gap:7px;color:var(--ink)}
.trust .stars svg{width:13px;height:13px;color:var(--amber)}
.trust b{color:var(--ink)}
.tsep{width:3px;height:3px;border-radius:50%;background:var(--line)}
.queue{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:var(--paper)}
/* technical plate */
.plate-wrap{position:relative}
.plate{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);overflow:hidden}
.plate .grid-bg{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(27,29,24,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(27,29,24,.045) 1px,transparent 1px);
  background-size:22px 22px}
.plate svg.fig{position:relative;width:100%;height:auto;display:block}
.plate-cap{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:13px 20px;
  font:600 10px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.badge{position:absolute;top:-34px;right:-14px;width:118px;height:118px;z-index:2;filter:drop-shadow(0 10px 18px rgba(27,29,24,.16))}
.badge .ring{animation:spin 26s linear infinite;transform-origin:60px 60px}
@keyframes spin{to{transform:rotate(360deg)}}
/* marquee */
.marquee{background:var(--ink);color:var(--bone);overflow:hidden;border-block:1px solid var(--ink)}
.mq-track{display:flex;width:max-content;animation:mq 34s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-group{display:flex;align-items:center}
.mq-item{display:flex;align-items:center;gap:26px;padding:13px 26px 13px 0;font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.mq-item svg{width:11px;height:11px;color:var(--amber)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
.sec{padding:clamp(72px,9vw,116px) 0}
.sec.alt{background:var(--paper);border-block:1px solid var(--line)}
.s-head{max-width:680px;margin-bottom:52px}
.s-head h2{margin-bottom:14px}
.s-head .lede{font-size:16.5px}

/* models */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .35s,box-shadow .35s,border-color .35s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:#C9BFA4}
.m-fig{background:var(--bone);border-bottom:1px solid var(--line);padding:26px 22px 10px;position:relative}
.m-fig svg{width:100%;height:auto;display:block;color:var(--ink)}
.m-fig .figtag{position:absolute;top:14px;left:16px;font:600 10px var(--mono);letter-spacing:.18em;color:var(--ink2)}
.m-flag{position:absolute;top:12px;right:14px;font:600 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber-d);
  border:1px solid var(--amber);border-radius:999px;padding:6px 10px;background:var(--amber-soft)}
.m-body{padding:22px;display:flex;flex-direction:column;gap:14px;flex:1}
.m-body h3{font-size:23px}
.m-body p{color:var(--ink2);font-size:14.5px;flex:1}
.m-chips{display:flex;gap:8px;flex-wrap:wrap}
.m-foot{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px dashed var(--line);padding-top:16px;margin-top:2px}
.price small{display:block;font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.price b{font:600 25px/1.1 var(--serif)}
.lead{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);text-align:right}
.m-link{display:inline-flex;align-items:center;gap:9px;font:600 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.m-link svg{width:13px;height:13px;transition:transform .25s}
.m-link:hover{color:var(--amber-d)} .m-link:hover svg{transform:translateX(4px)}
.m-note{margin-top:26px;font:500 12.5px var(--mono);letter-spacing:.06em;color:var(--ink2);text-align:center;text-transform:uppercase}

/* configurator */
.conf-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:start}
.conf-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:30px}
.fld{margin-bottom:20px}
.fld label{display:block;font:600 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);margin-bottom:9px}
.sel{position:relative}
.sel select{appearance:none;-webkit-appearance:none;width:100%;padding:14px 42px 14px 15px;border:1px solid var(--line);border-radius:9px;
  background:var(--bone);font:500 15px var(--sans);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.sel select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(194,128,30,.18)}
.sel::after{content:"";position:absolute;right:17px;top:50%;width:8px;height:8px;border-right:1.6px solid var(--ink2);border-bottom:1.6px solid var(--ink2);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.summary{position:sticky;top:calc(var(--hdr) + 20px);background:var(--ink);color:var(--bone);border-radius:var(--r);padding:30px;box-shadow:var(--sh)}
.summary h3{font-size:21px;margin-bottom:18px}
.bd-row{display:flex;justify-content:space-between;gap:16px;padding:9.5px 0;border-bottom:1px dashed rgba(243,239,228,.22);font-size:14px}
.bd-row .k{color:rgba(243,239,228,.72)}
.bd-row .v{font:600 12.5px var(--mono);letter-spacing:.04em;white-space:nowrap}
.bd-row .v.free{color:#9DBE8E}
.bd-total{display:flex;justify-content:space-between;align-items:baseline;margin:20px 0 4px}
.bd-total .t{font:600 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(243,239,228,.65)}
.bd-total .a{font:600 38px/1 var(--serif);color:#EFC87E}
.bd-note{font:500 11.5px var(--mono);letter-spacing:.06em;color:rgba(243,239,228,.55);margin-bottom:20px}
.summary .btn{width:100%;justify-content:center;background:var(--amber);border-color:var(--amber);color:var(--ink)}
.summary .btn:hover{background:var(--paper);border-color:var(--paper)}
.bd-meta{margin-top:16px;text-align:center;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(243,239,228,.6)}
.conf-foot{margin-top:18px;font-size:13px;color:var(--ink2);text-align:center}
.flash{animation:flash 1.4s ease}
@keyframes flash{0%,60%{box-shadow:0 0 0 3px rgba(194,128,30,.55)}100%{box-shadow:0 0 0 0 rgba(194,128,30,0)}}

/* process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;border-top:1px solid var(--line);padding-top:34px}
.step .num{font:italic 600 38px/1 var(--serif);color:var(--amber);display:block;margin-bottom:12px}
.step h3{font:600 16.5px/1.3 var(--sans);letter-spacing:.01em;margin-bottom:8px}
.step p{font-size:13.5px;color:var(--ink2)}

/* craft */
.craft-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.mats{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px;margin-top:34px}
.mat svg{width:26px;height:26px;color:var(--amber-d);margin-bottom:12px}
.mat h3{font:600 15px/1.3 var(--sans);margin-bottom:6px}
.mat p{font-size:13.5px;color:var(--ink2)}
.passport{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);transform:rotate(-1.2deg);max-width:400px;margin-left:auto}
.pp-hd{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);
  font:600 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase}
.pp-hd svg{width:22px;height:22px}
.pp-body{padding:20px}
.pp-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px}
.pp-row .k{font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);padding-top:3px}
.pp-row .v{text-align:right;font-weight:600}
.pp-sig{margin-top:16px;display:flex;justify-content:space-between;align-items:flex-end}
.pp-sig .who{font:italic 400 26px var(--serif);transform:rotate(-3deg)}
.pp-sig .lbl{font:600 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.pp-foot{margin-top:16px;background:var(--amber-soft);border-top:1px solid var(--line);padding:12px 20px;font:600 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--amber-d)}
.pp-note{margin-top:22px;font-size:13px;color:var(--ink2);max-width:380px;margin-left:auto}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:16px;transition:transform .35s,box-shadow .35s}
.quote:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.quote .stars{display:flex;gap:3px;color:var(--amber)}
.quote .stars svg{width:13px;height:13px}
.quote blockquote{font:400 17px/1.55 var(--serif);flex:1}
.quote .who{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);border-top:1px dashed var(--line);padding-top:14px}
.quote .who b{color:var(--ink)}

/* visit */
.visit-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start}
.v-list{display:flex;flex-direction:column;gap:0;margin-top:28px;border-top:1px solid var(--line)}
.v-row{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.v-row svg{width:18px;height:18px;color:var(--amber-d);margin-top:3px}
.v-row .k{font:600 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);margin-bottom:3px}
.v-row .v{font-size:15px;font-weight:500}
.map-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.map-card svg{display:block;width:100%;height:auto}
.map-cap{padding:13px 18px;border-top:1px solid var(--line);font:600 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);display:flex;justify-content:space-between;gap:10px}
.pin-pulse{animation:pin 2.4s ease-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes pin{0%{opacity:.7;transform:scale(.4)}100%{opacity:0;transform:scale(2.2)}}

/* faq */
.faq{max-width:760px;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%;background:none;border:0;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 4px;text-align:left;font:600 17px/1.35 var(--sans);color:var(--ink)}
.faq-q .pl{width:30px;height:30px;flex:none;border:1px solid var(--line);border-radius:50%;position:relative;transition:transform .35s,background .35s}
.faq-q .pl::before,.faq-q .pl::after{content:"";position:absolute;background:var(--ink);left:50%;top:50%;transition:.35s}
.faq-q .pl::before{width:11px;height:1.6px;transform:translate(-50%,-50%)}
.faq-q .pl::after{width:1.6px;height:11px;transform:translate(-50%,-50%)}
.faq-item.open .pl{transform:rotate(45deg);background:var(--amber-soft);border-color:var(--amber)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.22,1,.36,1)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden;min-height:0}
.faq-a p{padding:0 44px 24px 4px;color:var(--ink2);font-size:15px;max-width:62ch}

/* book */
.book-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start}
.book-list{list-style:none;margin:26px 0 0;display:flex;flex-direction:column;gap:14px}
.book-list li{display:flex;gap:13px;align-items:flex-start;font-size:15px;color:var(--ink2)}
.book-list svg{width:18px;height:18px;color:var(--amber-d);flex:none;margin-top:3px}
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:32px;box-shadow:var(--sh)}
.form-card h3{font-size:22px;margin-bottom:6px}
.form-card .fs{font-size:13.5px;color:var(--ink2);margin-bottom:24px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
input,textarea{width:100%;border:1px solid var(--line);border-radius:9px;background:var(--bone);padding:13px 14px;font:500 15px var(--sans);color:var(--ink);transition:border-color .2s,box-shadow .2s}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(194,128,30,.18)}
.field.err input,.field.err textarea{border-color:var(--red)}
.hint{display:none;font:600 10.5px var(--mono);letter-spacing:.08em;color:var(--red);margin-top:6px;text-transform:uppercase}
.field.err .hint{display:block}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ink2);margin:4px 0 20px}
.consent input{width:17px;height:17px;margin-top:2px;accent-color:var(--amber)}
.done{text-align:center;padding:26px 8px}
.done .ok{width:58px;height:58px;border-radius:50%;background:var(--amber-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.done .ok svg{width:24px;height:24px;color:var(--amber-d)}
.done h3{font-size:26px;margin-bottom:10px}
.done p{color:var(--ink2);font-size:14.5px;max-width:38ch;margin:0 auto 8px}
.done .ref{font:600 13px var(--mono);letter-spacing:.12em;color:var(--amber-d);margin:14px 0 22px}
.fineprint{margin-top:18px;font-size:12px;color:var(--ink2);text-align:center}

/* footer */
footer{background:var(--ink);color:#B9B4A2;padding:64px 0 30px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(243,239,228,.14)}
.f-brand svg{width:30px;height:30px;color:var(--amber);margin-bottom:14px}
.f-brand .w{font:600 19px var(--serif);color:var(--paper)}
.f-brand p{font-size:13.5px;margin-top:10px;max-width:30ch}
footer h4{font:600 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#8E8A79;margin-bottom:16px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px}
footer a{text-decoration:none;transition:color .2s}
footer a:hover{color:#EFC87E}
.f-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8E8A79}
.f-bot a{color:#B9B4A2}

/* reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

/* ============ RESPONSIVE ============ */
@media(max-width:1020px){
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .cards3,.quotes{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr);row-gap:34px}
  .conf-grid,.craft-grid,.visit-grid,.book-grid{grid-template-columns:1fr}
  .summary{position:static}
  .passport{margin:0 auto}
  .pp-note{margin-left:0}
}
@media(max-width:860px){
  nav.desk{display:none}
  .hd .btn{display:none}
  .burger{display:block}
}
@media(max-width:640px){
  .cards3,.quotes,.mats,.frow{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .badge{width:92px;height:92px;top:-24px;right:2px}
  .plate-cap{flex-direction:column;gap:4px}
  .hero{padding-top:calc(var(--hdr) + 44px)}
  .f-grid{grid-template-columns:1fr 1fr}
}
@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>

<!-- SVG SYMBOL LIBRARY -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <symbol id="i-star" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2.6l2.85 6.1 6.65.72-4.95 4.5 1.35 6.55L12 17.1l-5.9 3.37 1.35-6.55-4.95-4.5 6.65-.72z"/></symbol>
  <symbol id="i-arrow" viewBox="0 0 24 24"><path d="M4 12h15M13 5.5L19.5 12 13 18.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
  <symbol id="i-check" viewBox="0 0 24 24"><path d="M4.5 12.5l5 5L19.5 6.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></symbol>
  <symbol id="i-pin" viewBox="0 0 24 24"><path d="M12 21s-7-5.6-7-11a7 7 0 1 1 14 0c0 5.4-7 11-7 11z" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="10" r="2.6" fill="none" stroke="currentColor" stroke-width="1.8"/></symbol>
  <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M12 7.5V12l3.2 2" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></symbol>
  <symbol id="i-mail" viewBox="0 0 24 24"><rect x="3" y="5.5" width="18" height="13" rx="2" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M3.5 7l8.5 6 8.5-6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></symbol>
  <symbol id="i-phone" viewBox="0 0 24 24"><path d="M6.5 3.5h3l1.5 4.5-2 1.5a12 12 0 0 0 5.5 5.5l1.5-2 4.5 1.5v3a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 4.5 5.7a2 2 0 0 1 2-2.2z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></symbol>
  <symbol id="i-tube" viewBox="0 0 24 24"><rect x="2.5" y="9.5" width="19" height="5" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M6 9.5v5M18 9.5v5" stroke="currentColor" stroke-width="1.4"/></symbol>
  <symbol id="i-belt" viewBox="0 0 24 24"><circle cx="6.5" cy="12" r="3.4" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="17.5" cy="12" r="3.4" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M6.5 8.6h11M6.5 15.4h11" stroke="currentColor" stroke-width="1.8"/></symbol>
  <symbol id="i-disc" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="12" r="2.4" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M12 5.5v2M12 16.5v2M5.5 12h2M16.5 12h2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></symbol>
  <symbol id="i-drop" viewBox="0 0 24 24"><path d="M12 3.2c3 4.4 5 6.9 5 9.6a5 5 0 1 1-10 0c0-2.7 2-5.2 5-9.6z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></symbol>
</svg>

<a href="#models" style="position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:100" onfocus="this.style.left='10px'" onblur="this.style.left='-9999px'">Skip to content</a>

<!-- ============ HEADER ============ -->
<header class="site" id="siteHeader">
  <div class="wrap hd">
    <a class="brand" href="#top" aria-label="Lumen Cycles — home">
      <svg viewBox="0 0 32 32" fill="none" aria-hidden="true"><circle cx="16" cy="16" r="12.5" stroke="currentColor" stroke-width="2.2"/><path d="M3.5 16h25M16 3.5v25M7.2 7.2l17.6 17.6M24.8 7.2L7.2 24.8" stroke="currentColor" stroke-width="1.4"/><circle cx="16" cy="16" r="3.2" fill="#C2801E"/></svg>
      <span><span class="word">Lumen</span><span class="sub">CYCLES · KØBENHAVN</span></span>
    </a>
    <nav class="desk" aria-label="Primary">
      <a href="#models">Models</a><a href="#configure">Configure</a><a href="#process">Process</a><a href="#craft">Craft</a><a href="#faq">FAQ</a><a href="#visit">Visit</a>
    </nav>
    <div class="hd-r">
      <a class="btn small" href="#book">Book a fitting</a>
      <button class="burger" id="burger" aria-label="Open menu" aria-expanded="false" aria-controls="mnav"><span></span><span></span><span></span></button>
    </div>
  </div>
</header>
<nav class="mnav" id="mnav" aria-label="Mobile">
  <a href="#models">Models <span class="n">01</span></a>
  <a href="#configure">Configure <span class="n">02</span></a>
  <a href="#process">Process <span class="n">03</span></a>
  <a href="#craft">Craft <span class="n">04</span></a>
  <a href="#faq">FAQ <span class="n">05</span></a>
  <a href="#visit">Visit <span class="n">06</span></a>
  <a href="#book" style="color:var(--amber-d)">Book a fitting <span class="n">→</span></a>
</nav>

<main id="top">

<!-- ============ HERO ============ -->
<section class="hero">
  <div class="wrap hero-grid">
    <div>
      <p class="eyebrow reveal">Custom cargo bikes · Nørrebro, København</p>
      <h1 class="reveal d1">The cargo bike,<br><em>built around your life.</em></h1>
      <p class="lede reveal d2" style="margin-top:22px">Lumen Cycles is a two-builder workshop in Copenhagen. We TIG-weld steel cargo bikes to your body, your route and your cargo — specified with you, signed by the builder who made it. Six to ten weeks from first fitting to first ride.</p>
      <div class="cta-row reveal d3">
        <a class="btn" href="#book">Book a free fitting <svg class="ic" aria-hidden="true"><use href="#i-arrow"/></svg></a>
        <a class="btn ghost" href="#configure">Configure your build</a>
      </div>
      <div class="trust reveal d3">
        <span class="stars" aria-label="Rated 4.9 out of 5">
          <svg aria-hidden="true"><use href="#i-star"/></svg><svg aria-hidden="true"><use href="#i-star"/></svg><svg aria-hidden="true"><use href="#i-star"/></svg><svg aria-hidden="true"><use href="#i-star"/></svg><svg aria-hidden="true"><use href="#i-star"/></svg>
          <b>4.9</b>&nbsp;· 312 build reviews
        </span>
        <span class="tsep" aria-hidden="true"></span><span>EST. 2016</span>
        <span class="tsep" aria-hidden="true"></span><span>CVR 38 14 20 16</span>
        <span class="queue"><span class="dot" aria-hidden="true"></span>Build queue ≈ 7 weeks</span>
      </div>
    </div>
    <div class="plate-wrap reveal d1">
      <div class="badge" aria-hidden="true">
        <svg viewBox="0 0 120 120">
          <circle cx="60" cy="60" r="58" fill="#FBF8F0" stroke="#DCD4BF"/>
          <g class="ring" style="transform-origin:60px 60px">
            <defs><path id="bpath" d="M60,60 m-45,0 a45,45 0 1,1 90,0 a45,45 0 1,1 -90,0"/></defs>
            <text font-family="ui-monospace,Menlo,monospace" font-size="8.6" letter-spacing="2.4" fill="#575A4E" font-weight="600"><textPath href="#bpath">HANDBUILT IN COPENHAGEN · LUMEN CYCLES · EST. 2016 · </textPath></text>
          </g>
          <g transform="translate(60 60) scale(1.15) translate(-16 -16)"><circle cx="16" cy="16" r="12.5" fill="none" stroke="#1B1D18" stroke-width="2.2"/><path d="M3.5 16h25M16 3.5v25M7.2 7.2l17.6 17.6M24.8 7.2L7.2 24.8" stroke="#1B1D18" stroke-width="1.4"/><circle cx="16" cy="16" r="3.2" fill="#C2801E"/></g>
        </svg>
      </div>
      <figure class="plate">
        <div class="grid-bg" aria-hidden="true"></div>
        <svg class="fig" viewBox="0 0 720 470" role="img" aria-label="Technical drawing of the Lumen Carrier cargo bike">
          <style>
            .sv text{font-family:ui-monospace,Menlo,Consolas,monospace;fill:#575A4E}
            .sv .ink{stroke:#1B1D18;fill:none;stroke-linecap:round;stroke-linejoin:round}
            .sv .thin{stroke:#8a8672;fill:none}
            .sv .amb{stroke:#C2801E;fill:none}
          </style>
          <g class="sv" stroke-linecap="round" stroke-linejoin="round">
            <!-- ground -->
            <line x1="40" y1="396" x2="680" y2="396" stroke="#1B1D18" stroke-width="1.6"/>
            <g stroke="#8a8672" stroke-width="1" opacity=".55">
              <line x1="80" y1="396" x2="72" y2="404"/><line x1="130" y1="396" x2="122" y2="404"/><line x1="180" y1="396" x2="172" y2="404"/><line x1="230" y1="396" x2="222" y2="404"/><line x1="280" y1="396" x2="272" y2="404"/><line x1="330" y1="396" x2="322" y2="404"/><line x1="380" y1="396" x2="372" y2="404"/><line x1="430" y1="396" x2="422" y2="404"/><line x1="480" y1="396" x2="472" y2="404"/><line x1="530" y1="396" x2="522" y2="404"/><line x1="580" y1="396" x2="572" y2="404"/><line x1="630" y1="396" x2="622" y2="404"/>
            </g>
            <!-- dimension: wheelbase -->
            <g class="thin" stroke-width="1.2">
              <line x1="180" y1="436" x2="540" y2="436" stroke-dasharray="1 4"/>
              <line x1="180" y1="429" x2="180" y2="443"/><line x1="540" y1="429" x2="540" y2="443"/>
            </g>
            <text x="360" y="428" font-size="12" letter-spacing="2" text-anchor="middle">1,290 MM WHEELBASE</text>
            <!-- rear wheel -->
            <g>
              <circle cx="180" cy="330" r="66" fill="none" stroke="#1B1D18" stroke-width="7"/>
              <circle cx="180" cy="330" r="52" fill="none" stroke="#1B1D18" stroke-width="2.4"/>
              <g class="ink" stroke-width="1.6" opacity=".8"><line x1="232" y1="330" x2="128" y2="330"/><line x1="206" y1="375" x2="154" y2="285"/><line x1="154" y1="375" x2="206" y2="285"/></g>
              <circle cx="180" cy="330" r="6" fill="#1B1D18"/>
              <circle cx="180" cy="330" r="12" fill="none" stroke="#8a8672" stroke-width="1.3" stroke-dasharray="3 3"/>
            </g>
            <!-- front wheel -->
            <g>
              <circle cx="540" cy="342" r="54" fill="none" stroke="#1B1D18" stroke-width="7"/>
              <circle cx="540" cy="342" r="42" fill="none" stroke="#1B1D18" stroke-width="2.4"/>
              <g class="ink" stroke-width="1.6" opacity=".8"><line x1="582" y1="342" x2="498" y2="342"/><line x1="567" y1="378" x2="513" y2="306"/><line x1="513" y1="378" x2="567" y2="306"/></g>
              <circle cx="540" cy="342" r="6" fill="#1B1D18"/>
              <circle cx="540" cy="342" r="13" fill="none" stroke="#8a8672" stroke-width="1.3" stroke-dasharray="3 3"/>
            </g>
            <!-- frame -->
            <g class="ink" stroke-width="5">
              <line x1="238" y1="172" x2="286" y2="336"/>
              <line x1="238" y1="172" x2="438" y2="186"/>
              <line x1="286" y1="336" x2="430" y2="222"/>
              <line x1="438" y1="186" x2="430" y2="222"/>
              <line x1="180" y1="330" x2="246" y2="186"/>
              <line x1="286" y1="336" x2="180" y2="330"/>
              <line x1="430" y1="222" x2="540" y2="342"/>
              <line x1="438" y1="186" x2="458" y2="140"/>
            </g>
            <g class="ink" stroke-width="5"><line x1="458" y1="140" x2="486" y2="132"/><line x1="486" y1="132" x2="500" y2="138" stroke-width="6"/></g>
            <!-- saddle -->
            <line x1="212" y1="166" x2="250" y2="166" stroke="#1B1D18" stroke-width="9" stroke-linecap="round"/>
            <!-- crank + belt -->
            <circle cx="286" cy="336" r="18" fill="none" stroke="#1B1D18" stroke-width="3.4"/>
            <circle cx="286" cy="336" r="4" fill="#1B1D18"/>
            <line x1="286" y1="336" x2="309" y2="353" stroke="#1B1D18" stroke-width="5" stroke-linecap="round"/>
            <line x1="286" y1="336" x2="263" y2="319" stroke="#1B1D18" stroke-width="5" stroke-linecap="round"/>
            <line x1="283" y1="319" x2="180" y2="327" stroke="#C2801E" stroke-width="2.4"/>
            <!-- fork tip (under box) -->
            <line x1="516" y1="316" x2="540" y2="342" stroke="#1B1D18" stroke-width="5" stroke-linecap="round"/>
            <!-- cargo box -->
            <polygon points="424,240 548,248 544,332 420,328" fill="#FBF8F0" stroke="#1B1D18" stroke-width="3.6"/>
            <line x1="426" y1="254" x2="546" y2="262" stroke="#1B1D18" stroke-width="1.6" opacity=".55"/>
            <line x1="470" y1="330" x2="540" y2="342" stroke="#1B1D18" stroke-width="2.2"/>
            <text x="486" y="298" font-size="15" letter-spacing="3" fill="#96620F" text-anchor="middle" font-weight="700">60 L</text>
            <!-- annotations -->
            <g font-size="11.5" letter-spacing="1.2">
              <text x="330" y="96">REYNOLDS-GRADE CHROMOLY</text>
              <line x1="352" y1="102" x2="358" y2="268" stroke="#8a8672" stroke-width="1"/><circle cx="358" cy="272" r="2.6" fill="#C2801E"/>
              <text x="64" y="124">SADDLE 62–82 CM</text>
              <line x1="150" y1="130" x2="212" y2="162" stroke="#8a8672" stroke-width="1"/><circle cx="214" cy="164" r="2.6" fill="#C2801E"/>
              <text x="66" y="240">GATES CDX BELT</text>
              <line x1="126" y1="246" x2="226" y2="318" stroke="#8a8672" stroke-width="1"/><circle cx="228" y1="320" r="2.6" fill="#C2801E"/>
              <text x="584" y="286">HYDRAULIC DISC · 180 MM</text>
              <line x1="582" y1="292" x2="548" y2="334" stroke="#8a8672" stroke-width="1"/><circle cx="546" cy="336" r="2.6" fill="#C2801E"/>
            </g>
            <!-- sun mark -->
            <g transform="translate(656 44) scale(.8)" opacity=".85">
              <circle cx="16" cy="16" r="12.5" fill="none" stroke="#1B1D18" stroke-width="2.2"/>
              <path d="M3.5 16h25M16 3.5v25M7.2 7.2l17.6 17.6M24.8 7.2L7.2 24.8" stroke="#1B1D18" stroke-width="1.4"/>
              <circle cx="16" cy="16" r="3.2" fill="#C2801E"/>
            </g>
            <!-- title block -->
            <text x="40" y="460" font-size="10.5" letter-spacing="2">LUMEN CYCLES · FIG. 01 — THE CARRIER · SCALE 1:8</text>
            <text x="680" y="460" font-size="10.5" letter-spacing="2" text-anchor="end">S/N LC-25-0147</text>
          </g>
        </svg>
        <figcaption class="plate-cap"><span>FIG. 01 — THE CARRIER, OUR SIGNATURE PLATFORM</span><span>STEEL · BELT DRIVE · 250 KG PAYLOAD</span></figcaption>
      </figure>
    </div>
  </div>
</section>

<!-- marquee -->
<div class="marquee" aria-hidden="true">
  <div class="mq-track">
    <div class="mq-group">
      <span class="mq-item">TIG-welded chromoly steel <svg><use href="#i-star"/></svg></span>
      <span class="mq-item">Gates CDX belt drive <svg><use href="#i-star"/></svg></span>
      <span class="mq-item">Hydraulic disc brakes <svg><use href="#i-star"/></svg></span>
      <span class="mq-item">3-year frame warranty <svg><use href="#i-star"/></svg></span>
      <span class="mq-item">Built to order in København <svg><use href="#i-star"/></svg></span>
      <span class="mq-item">Free first service <svg><use href="#i-star"/></svg></span>
    </div>
    <div class="mq-group">
      <span class="mq-item">TIG-welded chromoly steel <svg><use href="#i-star"/></svg></span>
      <span class="mq-item">Gates CDX belt drive <svg><use href="#i-star"/></svg></span>
      <span class="mq-item">Hydraulic disc brakes <svg><use href="#i-star"/></svg></span>
      <span class="mq-item">3-year frame warranty <svg><use href="#i-star"/></svg></span>
      <span class="mq-item">Built to order in København <svg><use href="#i-star"/></svg></span>
      <span class="mq-item">Free first service <svg><use href="#i-star"/></svg></span>
    </div>
  </div>
</div>

<!-- ============ MODELS ============ -->
<section class="sec" id="models">
  <div class="wrap">
    <div class="s-head reveal">
      <p class="eyebrow">01 — The range</p>
      <h2>Three platforms.<br><em>Infinite combinations.</em></h2>
      <p class="lede">Every Lumen starts as one of three platforms — then we lengthen, lower, widen and re-spec it until it fits your life. No two builds leave the workshop alike.</p>
    </div>
    <div class="cards3">
      <article class="card reveal">
        <div class="m-fig">
          <span class="figtag">FIG. 02</span><span class="m-flag">Most built</span>
          <svg viewBox="0 0 480 240" fill="none" aria-hidden="true">
            <line x1="30" y1="204" x2="450" y2="204" stroke="currentColor" stroke-width="1.5" opacity=".3"/>
            <g stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="120" cy="176" r="28"/><circle cx="368" cy="186" r="18"/>
              <line x1="120" y1="148" x2="120" y2="204"/><line x1="96" y1="190" x2="144" y2="162"/><line x1="96" y1="162" x2="144" y2="190"/>
              <line x1="368" y1="168" x2="368" y2="204"/><line x1="354" y1="195" x2="382" y2="177"/><line x1="354" y1="177" x2="382" y2="195"/>
              <line x1="164" y1="96" x2="196" y2="180"/><line x1="164" y1="96" x2="300" y2="104"/><line x1="196" y1="180" x2="294" y2="126"/>
              <line x1="120" y1="176" x2="170" y2="110"/><line x1="196" y1="180" x2="120" y2="176"/>
              <line x1="300" y1="104" x2="294" y2="126"/><line x1="294" y1="126" x2="368" y2="186"/>
              <line x1="300" y1="104" x2="312" y2="80"/><line x1="312" y1="80" x2="334" y2="76"/><line x1="334" y1="76" x2="344" y2="80"/>
              <line x1="148" y1="92" x2="172" y2="92" stroke-width="7"/>
            </g>
            <circle cx="196" cy="180" r="11" stroke="#C2801E" stroke-width="3.4"/>
            <line x1="194" y1="170" x2="122" y2="174" stroke="#C2801E" stroke-width="2.4"/>
            <polygon points="306,130 384,136 382,190 306,188" fill="#F2E4C4" stroke="currentColor" stroke-width="4"/>
            <line x1="308" y1="142" x2="382" y2="148" stroke="currentColor" stroke-width="1.6" opacity=".5"/>
            <circle cx="120" cy="176" r="3.4" fill="#C2801E"/><circle cx="368" cy="186" r="3.4" fill="#C2801E"/>
          </svg>
        </div>
        <div class="m-body">
          <h3>Lumen Carrier</h3>
          <p>The front-box long john. Two kids, a week of groceries, or sixty litres of almost anything — with a low, stable ride.</p>
          <div class="m-chips"><span class="chip">Front box 60 L</span><span class="chip">250 kg payload</span><span class="chip">Belt drive</span></div>
          <div class="m-foot">
            <div class="price"><small>From</small><b>€3,350</b></div>
            <div class="lead">Lead ≈ 8 wks</div>
          </div>
          <a class="m-link cfg-link" href="#configure" data-model="carrier">Configure this build <svg aria-hidden="true"><use href="#i-arrow"/></svg></a>
        </div>
      </article>

      <article class="card reveal d1">
        <div class="m-fig">
          <span class="figtag">FIG. 03</span>
          <svg viewBox="0 0 480 240" fill="none" aria-hidden="true">
            <line x1="30" y1="204" x2="450" y2="204" stroke="currentColor" stroke-width="1.5" opacity=".3"/>
            <g stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="118" cy="172" r="32"/><circle cx="372" cy="178" r="26"/>
              <line x1="118" y1="140" x2="118" y2="204"/><line x1="92" y1="188" x2="144" y2="156"/><line x1="92" y1="156" x2="144" y2="188"/>
              <line x1="372" y1="152" x2="372" y2="204"/><line x1="356" y1="191" x2="388" y2="165"/><line x1="356" y1="165" x2="388" y2="191"/>
              <line x1="196" y1="92" x2="224" y2="176"/><line x1="196" y1="92" x2="306" y2="100"/><line x1="224" y1="176" x2="300" y2="122"/>
              <line x1="118" y1="172" x2="224" y2="176"/><line x1="118" y1="172" x2="202" y2="108"/>
              <line x1="306" y1="100" x2="300" y2="122"/><line x1="300" y1="122" x2="372" y2="178"/>
              <line x1="306" y1="100" x2="318" y2="74"/><line x1="318" y1="74" x2="340" y2="70"/><line x1="340" y1="70" x2="350" y2="74"/>
              <line x1="180" y1="88" x2="204" y2="88" stroke-width="7"/>
            </g>
            <circle cx="224" cy="176" r="10" stroke="#C2801E" stroke-width="3.2"/>
            <line x1="222" y1="167" x2="122" y2="170" stroke="#C2801E" stroke-width="2.2"/>
            <g stroke="currentColor" stroke-width="4">
              <line x1="74" y1="150" x2="182" y2="150"/><line x1="80" y1="150" x2="118" y2="172"/><line x1="172" y1="150" x2="198" y2="116"/>
              <rect x="84" y="112" width="72" height="38" rx="3"/>
              <line x1="84" y1="125" x2="156" y2="125" stroke-width="2" opacity=".5"/>
            </g>
            <circle cx="118" cy="172" r="3.4" fill="#C2801E"/><circle cx="372" cy="178" r="3.4" fill="#C2801E"/>
          </svg>
        </div>
        <div class="m-body">
          <h3>Lumen Long</h3>
          <p>A longtail for school runs and light freight. Narrow enough for the cycle superhighway, strong enough for the workshop.</p>
          <div class="m-chips"><span class="chip">Longtail rack</span><span class="chip">200 kg payload</span><span class="chip">Assist-ready</span></div>
          <div class="m-foot">
            <div class="price"><small>From</small><b>€3,750</b></div>
            <div class="lead">Lead ≈ 9 wks</div>
          </div>
          <a class="m-link cfg-link" href="#configure" data-model="long">Configure this build <svg aria-hidden="true"><use href="#i-arrow"/></svg></a>
        </div>
      </article>

      <article class="card reveal d2">
        <div class="m-fig">
          <span class="figtag">FIG. 04</span>
          <svg viewBox="0 0 480 240" fill="none" aria-hidden="true">
            <line x1="30" y1="204" x2="450" y2="204" stroke="currentColor" stroke-width="1.5" opacity=".3"/>
            <g stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="132" cy="176" r="28"/><circle cx="356" cy="176" r="28"/>
              <line x1="132" y1="148" x2="132" y2="204"/><line x1="110" y1="197" x2="154" y2="155"/><line x1="110" y1="155" x2="154" y2="197"/>
              <line x1="356" y1="148" x2="356" y2="204"/><line x1="334" y1="197" x2="378" y2="155"/><line x1="334" y1="155" x2="378" y2="197"/>
              <path d="M186 96 C 214 150, 250 150, 294 116"/>
              <line x1="186" y1="88" x2="228" y2="178"/><line x1="228" y1="178" x2="294" y2="116"/>
              <line x1="132" y1="176" x2="192" y2="104"/><line x1="228" y1="178" x2="132" y2="176"/>
              <line x1="294" y1="116" x2="300" y2="92"/><line x1="300" y1="92" x2="312" y2="64"/><line x1="312" y1="64" x2="334" y2="60"/><line x1="334" y1="60" x2="344" y2="64"/>
              <line x1="170" y1="84" x2="196" y2="84" stroke-width="7"/>
            </g>
            <circle cx="228" cy="178" r="10" stroke="#C2801E" stroke-width="3.2"/>
            <g stroke="currentColor" stroke-width="3">
              <rect x="318" y="96" width="48" height="38" rx="5"/>
              <line x1="334" y1="96" x2="334" y2="134" stroke-width="2" opacity=".5"/><line x1="350" y1="96" x2="350" y2="134" stroke-width="2" opacity=".5"/><line x1="318" y1="115" x2="366" y2="115" stroke-width="2" opacity=".5"/>
            </g>
            <circle cx="132" cy="176" r="3.4" fill="#C2801E"/><circle cx="356" cy="176" r="3.4" fill="#C2801E"/>
          </svg>
        </div>
        <div class="m-body">
          <h3>Lumen Compact</h3>
          <p>Small wheels, a low step-through and a big front basket. The city runabout for flats without storage and short, frequent trips.</p>
          <div class="m-chips"><span class="chip">20″ wheels</span><span class="chip">120 kg payload</span><span class="chip">Step-through</span></div>
          <div class="m-foot">
            <div class="price"><small>From</small><b>€2,950</b></div>
            <div class="lead">Lead ≈ 6 wks</div>
          </div>
          <a class="m-link cfg-link" href="#configure" data-model="compact">Configure this build <svg aria-hidden="true"><use href="#i-arrow"/></svg></a>
        </div>
      </article>
    </div>
    <p class="m-note reveal">Every Lumen · chromoly steel frame · Gates belt · hydraulic discs · 3-year frame warranty · free first service</p>
  </div>
</section>

<!-- ============ CONFIGURATOR ============ -->
<section class="sec alt" id="configure">
  <div class="wrap">
    <div class="s-head reveal">
      <p class="eyebrow">02 — Configure</p>
      <h2>Price it <em>honestly.</em></h2>
      <p class="lede">Pick what you need, see what it costs — before we ever meet. Your final quote is confirmed at the fitting, and it never changes after you approve the geometry.</p>
    </div>
    <div class="conf-grid">
      <div class="conf-form reveal">
        <div class="fld"><label for="c-model">Model</label>
          <div class="sel"><select id="c-model">
            <option value="carrier">Carrier — front-box long john (base €3,350)</option>
            <option value="long">Long — longtail (base €3,750)</option>
            <option value="compact">Compact — small-wheel runabout (base €2,950)</option>
          </select></div>
        </div>
        <div class="fld"><label for="c-drive">Drivetrain</label>
          <div class="sel"><select id="c-drive">
            <option value="belt">Gates CDX belt — included</option>
            <option value="alfine">Shimano Alfine 11 hub — +€640</option>
            <option value="rohloff">Rohloff Speedhub — +€1,150</option>
          </select></div>
        </div>
        <div class="fld"><label for="c-brakes">Brakes</label>
          <div class="sel"><select id="c-brakes">
            <option value="shimano">Shimano hydraulic discs, 180 mm — included</option>
            <option value="magura">Magura MT5e, 4-piston — +€260</option>
          </select></div>
        </div>
        <div class="fld"><label for="c-battery">Assist</label>
          <div class="sel"><select id="c-battery">
            <option value="none">None — pure legs</option>
            <option value="e500">Rear-hub assist, 500 Wh — +€850</option>
            <option value="e750">Torque-sensor assist, 750 Wh — +€1,350</option>
          </select></div>
        </div>
        <div class="fld"><label for="c-cargo">Cargo &amp; accessories</label>
          <div class="sel"><select id="c-cargo">
            <option value="none">None yet — we'll advise at the fitting</option>
            <option value="box">Front box, 60 L, powder-coated — +€420</option>
            <option value="kids">Two kid seats + rain cover — +€640</option>
            <option value="full">Full delivery fit-out — box, cover, lights, lock — +€980</option>
          </select></div>
        </div>
        <div class="fld"><label for="c-paint">Finish</label>
          <div class="sel"><select id="c-paint">
            <option value="std">Workshop graphite — included</option>
            <option value="custom">Custom powder coat, your RAL — +€180</option>
          </select></div>
        </div>
      </div>
      <aside class="summary reveal d1" aria-live="polite">
        <h3>Your build</h3>
        <div id="bdRows"></div>
        <div class="bd-total"><span class="t">Estimated total</span><span class="a" id="bdTotal">€3,350</span></div>
        <p class="bd-note">Incl. 25 % VAT · final quote confirmed at your fitting</p>
        <a class="btn" href="#book" id="sendSpec">Send this spec to the workshop <svg class="ic" aria-hidden="true"><use href="#i-arrow"/></svg></a>
        <p class="bd-meta" id="bdMonthly">≈ €140 / month over 24 · or €500 deposit</p>
        <p class="bd-meta" style="margin-top:10px;opacity:.7">Deposit fully refundable until geometry sign-off</p>
      </aside>
    </div>
    <p class="conf-foot reveal">Delivery within 15 km of København K included · payment in three interest-free instalments at handover</p>
  </div>
</section>

<!-- ============ PROCESS ============ -->
<section class="sec" id="process">
  <div class="wrap">
    <div class="s-head reveal">
      <p class="eyebrow">03 — The process</p>
      <h2>Five steps, <em>one builder.</em></h2>
      <p class="lede">No sales floor, no hand-offs. The person who welds your frame is the person who fits it to you.</p>
    </div>
    <div class="steps">
      <div class="step reveal"><span class="num">01</span><h3>Fitting</h3><p>A 45-minute conversation: your routes, your cargo, your heights. In the workshop or by video call.</p></div>
      <div class="step reveal d1"><span class="num">02</span><h3>Geometry</h3><p>We draft your frame geometry and send a CAD sketch. Nothing is cut until you sign off.</p></div>
      <div class="step reveal d2"><span class="num">03</span><h3>The build</h3><p>One builder welds, files, paints and assembles your bike, start to finish.</p></div>
      <div class="step reveal d2"><span class="num">04</span><h3>The tune</h3><p>Every bike rides 12 km through Nørrebro on our test route, then is tuned to your weight.</p></div>
      <div class="step reveal d3"><span class="num">05</span><h3>Delivery</h3><p>Handover with your first service included — and a frame passport signed by your builder.</p></div>
    </div>
  </div>
</section>

<!-- ============ CRAFT ============ -->
<section class="sec alt" id="craft">
  <div class="wrap craft-grid">
    <div class="reveal">
      <p class="eyebrow">04 — The craft</p>
      <h2>Materials you can <em>read about,</em> then feel.</h2>
      <p class="lede" style="margin-top:16px">We buy from the same European suppliers as the fine frame builders, we over-specify where it matters, and we never hide a component list. Ask us anything — we answer with datasheets, not slogans.</p>
      <div class="mats">
        <div class="mat"><svg aria-hidden="true"><use href="#i-tube"/></svg><h3>Chromoly steel</h3><p>Double-butted European chromoly, TIG-welded and stress-relieved. Rated for 250 kg gross, guaranteed for daily use.</p></div>
        <div class="mat"><svg aria-hidden="true"><use href="#i-belt"/></svg><h3>Gates CDX belt</h3><p>Carbon-belt drive: 30,000 km of silent, grease-free pedalling. No chain oil on your coat, ever.</p></div>
        <div class="mat"><svg aria-hidden="true"><use href="#i-disc"/></svg><h3>Hydraulic discs</h3><p>Shimano hydraulics with 180 mm rotors, bled and bedded in by hand before handover.</p></div>
        <div class="mat"><svg aria-hidden="true"><use href="#i-drop"/></svg><h3>In-house powder coat</h3><p>Eight workshop colours, mixed and cured here — or bring your own RAL for €180.</p></div>
      </div>
    </div>
    <div class="reveal d1">
      <div class="passport">
        <div class="pp-hd"><span>Frame passport</span>
          <svg viewBox="0 0 32 32" fill="none" aria-hidden="true"><circle cx="16" cy="16" r="12.5" stroke="currentColor" stroke-width="2.2"/><path d="M3.5 16h25M16 3.5v25M7.2 7.2l17.6 17.6M24.8 7.2L7.2 24.8" stroke="currentColor" stroke-width="1.4"/><circle cx="16" cy="16" r="3.2" fill="#C2801E"/></svg>
        </div>
        <div class="pp-body">
          <div class="pp-row"><span class="k">Model</span><span class="v">Carrier Nº 147</span></div>
          <div class="pp-row"><span class="k">Frame no.</span><span class="v">LC-25-0147</span></div>
          <div class="pp-row"><span class="k">Tubing</span><span class="v">Chromoly, d/b</span></div>
          <div class="pp-row"><span class="k">Built by</span><span class="v">Andreas K.</span></div>
          <div class="pp-row"><span class="k">Welded</span><span class="v">Nørrebro, week 12</span></div>
          <div class="pp-sig"><div><div class="who">Andreas</div><div class="lbl">Signed · builder</div></div><div class="lbl" style="text-align:right">COPENHAGEN<br>55.6761° N, 12.5683° E</div></div>
        </div>
        <div class="pp-foot">LC-25-0147 · CARRY THIS CARD FOR FREE ANNUAL CHECKS</div>
      </div>
      <p class="pp-note">Every Lumen frame carries its number inside the down tube and on this passport. Crash it, and we inspect it free — for as long as you own it.</p>
    </div>
  </div>
</section>

<!-- ============ TESTIMONIALS ============ -->
<section class="sec">
  <div class="wrap">
    <div class="s-head reveal">
      <p class="eyebrow">05 — From the street</p>
      <h2>Ridden daily.<br><em>Rattled never.</em></h2>
    </div>
    <div class="quotes">
      <article class="quote reveal">
        <div class="stars" aria-label="5 out of 5 stars"><svg><use href="#i-star"/></svg><svg><use href="#i-star"/></svg><svg><use href="#i-star"/></svg><svg><use href="#i-star"/></svg><svg><use href="#i-star"/></svg></div>
        <blockquote>“They asked what I carry on a Tuesday. Nobody had ever done that. Eight months in, it still feels drawn for me — because it was.”</blockquote>
        <p class="who"><b>Mette H.</b> · Frederiksberg — bakery run, Carrier Nº 98</p>
      </article>
      <article class="quote reveal d1">
        <div class="stars" aria-label="5 out of 5 stars"><svg><use href="#i-star"/></svg><svg><use href="#i-star"/></svg><svg><use href="#i-star"/></svg><svg><use href="#i-star"/></svg><svg><use href="#i-star"/></svg></div>
        <blockquote>“Two kids, a dog, a full weekly shop. The Long has swallowed all of it for two winters without a single rattle.”</blockquote>
        <p class="who"><b>Jonas P.</b> · Nørrebro — school run, Long Nº 212</p>
      </article>
      <article class="quote reveal d2">
        <div class="stars" aria-label="5 out of 5 stars"><svg><use href="#i-star"/></svg><svg><use href="#i-star"/></svg><svg><use href="#i-star"/></svg><svg><use href="#i-star"/></svg><svg><use href="#i-star"/></svg></div>
        <blockquote>“I compared four workshops. Lumen was the only one that showed me the geometry drawing before taking a single krone.”</blockquote>
        <p class="who"><b>Sara L.</b> · Østerbro — commuter, Compact Nº 164</p>
      </article>
    </div>
  </div>
</section>

<!-- ============ VISIT ============ -->
<section class="sec alt" id="visit">
  <div class="wrap visit-grid">
    <div class="reveal">
      <p class="eyebrow">06 — The workshop</p>
      <h2>Come smell <em>the cutting fluid.</em></h2>
      <p class="lede" style="margin-top:16px">We are a working workshop, not a showroom — you will hear the saw and the grinder, and Andreas will probably offer you coffee. Fittings by appointment; walk-ins welcome Saturday mornings.</p>
      <div class="v-list">
        <div class="v-row"><svg aria-hidden="true"><use href="#i-pin"/></svg><div><div class="k">Find us</div><div class="v">Jægersborggade 14, 2200 København N<br>55.6761° N, 12.5683° E</div></div></div>
        <div class="v-row"><svg aria-hidden="true"><use href="#i-clock"/></svg><div><div class="k">Hours</div><div class="v">Tue–Fri 10–17 · Sat 10–13 (fittings by appointment)</div></div></div>
        <div class="v-row"><svg aria-hidden="true"><use href="#i-mail"/></svg><div><div class="k">Write</div><div class="v">hello@lumencycles.dk — we reply within one working day</div></div></div>
        <div class="v-row"><svg aria-hidden="true"><use href="#i-phone"/></svg><div><div class="k">Call</div><div class="v">+45 33 12 40 90 · CVR 38 14 20 16</div></div></div>
      </div>
    </div>
    <div class="map-card reveal d1">
      <svg viewBox="0 0 480 320" role="img" aria-label="Stylised map showing Lumen Cycles on Jægersborggade, Nørrebro, Copenhagen">
        <rect width="480" height="320" fill="#EDE7D6"/>
        <path d="M-10 250 C 90 235, 150 265, 240 250 S 420 235, 490 250 L490 330 L-10 330 Z" fill="#C9D4CE"/>
        <rect x="330" y="24" width="120" height="86" rx="6" fill="#CBD3BC"/>
        <g stroke="#FBF8F0" stroke-width="10" stroke-linecap="round">
          <line x1="0" y1="96" x2="480" y2="78"/><line x1="0" y1="168" x2="480" y2="150"/><line x1="0" y1="222" x2="480" y2="212"/>
          <line x1="86" y1="0" x2="102" y2="320"/><line x1="212" y1="0" x2="224" y2="320"/><line x1="352" y1="0" x2="344" y2="320"/>
        </g>
        <g stroke="#D8D0BB" stroke-width="4">
          <line x1="0" y1="132" x2="480" y2="120"/><line x1="150" y1="0" x2="160" y2="320"/><line x1="420" y1="0" x2="412" y2="320"/>
        </g>
        <text x="20" y="70" font-family="ui-monospace,Menlo,monospace" font-size="10" letter-spacing="2" fill="#575A4E">TAGENSVEJ</text>
        <text x="196" y="140" font-family="ui-monospace,Menlo,monospace" font-size="10" letter-spacing="2" fill="#575A4E" transform="rotate(-2 196 140)">JÆGERSBORGGADE</text>
        <text x="352" y="112" font-family="ui-monospace,Menlo,monospace" font-size="9" letter-spacing="1.5" fill="#6E7A63">FOLLEKIRKEGAARDEN</text>
        <text x="24" y="290" font-family="ui-monospace,Menlo,monospace" font-size="9" letter-spacing="2" fill="#7B8A80">SØERNE · THE LAKES</text>
        <g transform="translate(212 108)">
          <circle class="pin-pulse" cx="0" cy="0" r="16" fill="#C2801E" opacity=".5"/>
          <path d="M0-26c-8 0-14 6-14 14 0 10 14 24 14 24s14-14 14-24c0-8-6-14-14-14z" fill="#C2801E" stroke="#1B1D18" stroke-width="2"/>
          <circle cx="0" cy="-12" r="5" fill="#FBF8F0"/>
        </g>
        <g font-family="ui-monospace,Menlo,monospace" font-size="10" fill="#1B1D18">
          <rect x="236" y="60" width="150" height="30" rx="6" fill="#FBF8F0" stroke="#1B1D18"/>
          <text x="248" y="73" font-size="9" letter-spacing="1.5" fill="#575A4E">LUMEN CYCLES</text>
          <text x="248" y="84" font-size="8" letter-spacing="1" fill="#96620F">Nº 14 · BACK YARD</text>
        </g>
        <g font-family="ui-monospace,Menlo,monospace" font-size="9" fill="#575A4E"><circle cx="448" cy="36" r="12" fill="none" stroke="#575A4E"/><text x="448" y="40" text-anchor="middle">N</text><path d="M448 27v-6M445 24l3-4 3 4" stroke="#575A4E" fill="none"/></g>
      </svg>
      <div class="map-cap"><span>NØRREBRO · 2.4 KM FROM RUNDETAARN</span><span>55.6761° N, 12.5683° E</span></div>
    </div>
  </div>
</section>

<!-- ============ FAQ ============ -->
<section class="sec" id="faq">
  <div class="wrap">
    <div class="s-head reveal" style="margin-left:auto;margin-right:auto;text-align:center">
      <p class="eyebrow" style="justify-content:center">07 — Questions</p>
      <h2>Asked <em>often,</em> answered honestly.</h2>
    </div>
    <div class="faq reveal">
      <div class="faq-item open">
        <button class="faq-q" aria-expanded="true">How long does a build take?<span class="pl" aria-hidden="true"></span></button>
        <div class="faq-a"><div><p>Six to ten weeks from geometry sign-off. The live queue is shown when you book, and deposits are honoured strictly in order — nobody is skipped, nobody is rushed.</p></div></div>
      </div>
      <div class="faq-item">
        <button class="faq-q" aria-expanded="false">What does the €500 deposit cover?<span class="pl" aria-hidden="true"></span></button>
        <div class="faq-a"><div><p>It reserves your place in the queue and your builder's hours. It is fully refundable until you approve the geometry drawing; after sign-off it goes toward the build price.</p></div></div>
      </div>
      <div class="faq-item">
        <button class="faq-q" aria-expanded="false">What warranty do I get?<span class="pl" aria-hidden="true"></span></button>
        <div class="faq-a"><div><p>Three years on frame and welds, two years on electrical components, and a free annual inspection for as long as you own the bike. Crash damage is always inspected free.</p></div></div>
      </div>
      <div class="faq-item">
        <button class="faq-q" aria-expanded="false">Can I try before I commit?<span class="pl" aria-hidden="true"></span></button>
        <div class="faq-a"><div><p>Yes. Ride our demo Carrier or Long during your fitting — and your test route is your actual commute, not a loop around the block we chose.</p></div></div>
      </div>
      <div class="faq-item">
        <button class="faq-q" aria-expanded="false">Do you deliver outside Denmark?<span class="pl" aria-hidden="true"></span></button>
        <div class="faq-a"><div><p>Across the EU in an insured wooden crate from €140; delivery in Greater Copenhagen is included. Worldwide shipping is quoted per build.</p></div></div>
      </div>
    </div>
  </div>
</section>

<!-- ============ BOOK ============ -->
<section class="sec alt" id="book">
  <div class="wrap book-grid">
    <div class="reveal">
      <p class="eyebrow">08 — Book</p>
      <h2>Book a free <em>fitting.</em></h2>
      <p class="lede" style="margin-top:16px">Forty-five minutes, zero obligation. We measure, we listen, we show you the queue. If a Lumen isn't right for you, we'll tell you who built the one that is.</p>
      <ul class="book-list">
        <li><svg aria-hidden="true"><use href="#i-check"/></svg>Body measurements and riding posture, taken properly</li>
        <li><svg aria-hidden="true"><use href="#i-check"/></svg>Your cargo weighed and mapped — groceries, kids, tools, dogs</li>
        <li><svg aria-hidden="true"><use href="#i-check"/></svg>An honest spec on paper, with a fixed price, before you decide</li>
        <li><svg aria-hidden="true"><use href="#i-check"/></svg>Test ride on our demo fleet, on your own route</li>
      </ul>
      <p class="fineprint">Andreas or Emil replies within one working day — usually faster.</p>
    </div>
    <div class="form-card reveal d1" id="formCard">
      <form id="bookForm" novalidate>
        <h3>Request your fitting</h3>
        <p class="fs">No payment, no newsletter. Just a conversation about your next bike.</p>
        <div class="frow">
          <div class="field" id="fw-name"><div class="fld"><label for="f-name">Full name *</label><input id="f-name" name="name" type="text" autocomplete="name" placeholder="Ingrid Møller"><p class="hint">Please tell us your name</p></div></div>
          <div class="field" id="fw-email"><div class="fld"><label for="f-email">Email *</label><input id="f-email" name="email" type="email" autocomplete="email" placeholder="ingrid@eksempel.dk"><p class="hint">A valid email, please</p></div></div>
        </div>
        <div class="frow">
          <div class="fld"><label for="f-phone">Phone (optional)</label><input id="f-phone" type="tel" autocomplete="tel" placeholder="+45 …"></div>
          <div class="fld"><label for="f-model">I'm dreaming of</label>
            <div class="sel"><select id="f-model">
              <option value="unsure">Not sure yet — advise me</option>
              <option value="carrier">Carrier — front box</option>
              <option value="long">Long — longtail</option>
              <option value="compact">Compact — city runabout</option>
            </select></div>
          </div>
        </div>
        <div class="fld"><label for="f-msg">What do you carry, and where do you ride?</label>
          <textarea id="f-msg" placeholder="School runs to Nørrebro, a very large dog, weekly market haul…"></textarea>
        </div>
        <div class="field" id="fw-consent">
          <label class="consent"><input type="checkbox" id="f-consent"><span>I agree to be contacted about my fitting. No newsletters unless I ask. *</span></label>
          <p class="hint" style="margin-top:-12px">We need your OK to reply</p>
        </div>
        <button class="btn" type="submit" style="width:100%;justify-content:center">Request my fitting <svg class="ic" aria-hidden="true"><use href="#i-arrow"/></svg></button>
        <p class="fineprint">Demo build — nothing is sent anywhere; your details stay in this browser.</p>
      </form>
      <div class="done" id="bookDone" hidden>
        <div class="ok"><svg aria-hidden="true"><use href="#i-check"/></svg></div>
        <h3>Tak, <span id="bkName">friend</span>.</h3>
        <p>Your request is logged. Andreas or Emil will reply within one working day to find your fitting time.</p>
        <p class="ref">REFERENCE <span id="bkRef">LC-2025-000</span></p>
        <a class="btn ghost" href="#top">Back to the top</a>
      </div>
    </div>
  </div>
</section>

</main>

<!-- ============ FOOTER ============ -->
<footer>
  <div class="wrap">
    <div class="f-grid">
      <div class="f-brand">
        <svg viewBox="0 0 32 32" fill="none" aria-hidden="true"><circle cx="16" cy="16" r="12.5" stroke="currentColor" stroke-width="2.2"/><path d="M3.5 16h25M16 3.5v25M7.2 7.2l17.6 17.6M24.8 7.2L7.2 24.8" stroke="currentColor" stroke-width="1.4"/><circle cx="16" cy="16" r="3.2" fill="#C2801E"/></svg>
        <div class="w">Lumen Cycles</div>
        <p>Custom cargo bikes, handbuilt in København since 2016. One bike at a time.</p>
      </div>
      <div>
        <h4>Visit</h4>
        <ul><li>Jægersborggade 14</li><li>2200 København N</li><li>Tue–Fri 10–17</li><li>Sat 10–13</li></ul>
      </div>
      <div>
        <h4>Contact</h4>
        <ul><li><a href="mailto:hello@lumencycles.dk">hello@lumencycles.dk</a></li><li><a href="tel:+4533124090">+45 33 12 40 90</a></li><li>CVR 38 14 20 16</li><li>Lumen Cycles ApS</li></ul>
      </div>
      <div>
        <h4>Explore</h4>
        <ul><li><a href="#models">Models</a></li><li><a href="#configure">Configure</a></li><li><a href="#process">Process</a></li><li><a href="#faq">FAQ</a></li><li><a href="#book">Book a fitting</a></li></ul>
      </div>
    </div>
    <div class="f-bot">
      <span>© <span id="yr">2025</span> Lumen Cycles ApS · Made in København</span>
      <span>Incl. 25 % VAT · Frames signed &amp; numbered</span>
      <a href="#top">Back to top ↑</a>
    </div>
  </div>
</footer>

<noscript><style>.reveal{opacity:1;transform:none}</style></noscript>

<script>
(function(){'use strict';
var $=function(s){return document.querySelector(s)}, $$=function(s){return Array.prototype.slice.call(document.querySelectorAll(s))};

/* year */
$('#yr').textContent=new Date().getFullYear();

/* header */
var hdr=$('#siteHeader');
function onScroll(){hdr.classList.toggle('scrolled',window.scrollY>8)}
window.addEventListener('scroll',onScroll,{passive:true}); onScroll();

/* mobile nav */
var burger=$('#burger');
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');
});
$$('#mnav a').forEach(function(a){a.addEventListener('click',function(){
  document.body.classList.remove('menu-open');burger.setAttribute('aria-expanded','false');
})});
document.addEventListener('keydown',function(e){if(e.key==='Escape'){document.body.classList.remove('menu-open');burger.setAttribute('aria-expanded','false')}});

/* reveal */
var io=new IntersectionObserver(function(es){es.forEach(function(en){if(en.isIntersecting){en.target.classList.add('in');io.unobserve(en.target)}})},{threshold:.12,rootMargin:'0px 0px -30px 0px'});
$$('.reveal').forEach(function(el){io.observe(el)});

/* faq */
$$('.faq-item').forEach(function(item){
  var q=item.querySelector('.faq-q');
  q.addEventListener('click',function(){
    var open=item.classList.contains('open');
    $$('.faq-item').forEach(function(i){i.classList.remove('open');i.querySelector('.faq-q').setAttribute('aria-expanded','false')});
    if(!open){item.classList.add('open');q.setAttribute('aria-expanded','true')}
  });
});

/* configurator */
var P={model:{carrier:3350,long:3750,compact:2950},
       drive:{belt:0,alfine:640,rohloff:1150},
       brakes:{shimano:0,magura:260},
       battery:{none:0,e500:850,e750:1350},
       cargo:{none:0,box:420,kids:640,full:980},
       paint:{std:0,custom:180}};
var N={model:{carrier:'Carrier — front box',long:'Long — longtail',compact:'Compact — small wheel'},
       drive:{belt:'Gates CDX belt',alfine:'Shimano Alfine 11 hub',rohloff:'Rohloff Speedhub'},
       brakes:{shimano:'Shimano hydraulic discs',magura:'Magura MT5e 4-piston'},
       battery:{none:'No assist — pure legs',e500:'Rear-hub assist, 500 Wh',e750:'Torque-sensor assist, 750 Wh'},
       cargo:{none:'No extras yet',box:'Front box, 60 L',kids:'Two kid seats + rain cover',full:'Full delivery fit-out'},
       paint:{std:'Workshop graphite',custom:'Custom powder coat'}};
var SEL={model:$('#c-model'),drive:$('#c-drive'),brakes:$('#c-brakes'),battery:$('#c-battery'),cargo:$('#c-cargo'),paint:$('#c-paint')};
var rows=$('#bdRows'),totEl=$('#bdTotal'),monEl=$('#bdMonthly');
var shown=0;
function fmt(n){return '€'+n.toLocaleString('en-US')}
function update(){
  var total=0,html='';
  Object.keys(SEL).forEach(function(k){
    var v=SEL[k].value,pr=P[k][v];total+=pr;
    html+='<div class="bd-row"><span class="k">'+N[k][v]+'</span><span class="v'+(pr===0?' free':'')+'">'+(pr===0?'incl.':'+'+fmt(pr))+'</span></div>';
  });
  rows.innerHTML=html;
  monEl.textContent='≈ '+fmt(Math.round(total/24))+' / month over 24 · or €500 deposit';
  var from=shown,to=total,t0=null;
  function step(t){if(!t0)t0=t;var p=Math.min((t-t0)/380,1);var e=1-Math.pow(1-p,3);
    totEl.textContent=fmt(Math.round(from+(to-from)*e));
    if(p<1)requestAnimationFrame(step);else shown=to;}
  requestAnimationFrame(step);
  return total;
}
Object.keys(SEL).forEach(function(k){SEL[k].addEventListener('change',update)});
update();

/* model links prefill configurator */
$$('.cfg-link').forEach(function(a){a.addEventListener('click',function(){
  var m=a.getAttribute('data-model'); if(m&&SEL.model){SEL.model.value=m;update()}
})});

/* send spec -> prefill booking form */
$('#sendSpec').addEventListener('click',function(){
  var lines=['Hi Lumen — I would like to reserve a build:'];
  Object.keys(SEL).forEach(function(k){var v=SEL[k].value;lines.push(N[k][v]+(P[k][v]?' (+'+fmt(P[k][v])+')':' (included)')});
  lines.push('Estimated total: '+fmt(shown)+' incl. VAT.');
  lines.push('— sent from the Lumen configurator');
  $('#f-model').value=SEL.model.value;
  $('#f-msg').value=lines.join('\n')+'\n\nMy routes / cargo: ';
  setTimeout(function(){
    var card=$('#formCard');card.classList.remove('flash');void card.offsetWidth;card.classList.add('flash');
    $('#f-name').focus({preventScroll:true});
  },650);
});

/* booking form */
$('#bookForm').addEventListener('submit',function(e){
  e.preventDefault();
  var name=$('#f-name'),email=$('#f-email'),consent=$('#f-consent'),ok=true;
  function mark(id,bad){$(id).classList.toggle('err',bad);if(bad)ok=false}
  mark('#fw-name',name.value.trim().length<2);
  mark('#fw-email',!/^\S+@\S+\.\S+$/.test(email.value.trim()));
  mark('#fw-consent',!consent.checked);
  if(!ok)return;
  var ref='LC-'+new Date().getFullYear()+'-'+Math.floor(100+Math.random()*900);
  $('#bkRef').textContent=ref;
  $('#bkName').textContent=name.value.trim().split(' ')[0];
  $('#bookForm').hidden=true;$('#bookDone').hidden=false;
});
})();
</script>
</body>
</html>

Compare with

Ling 3.2 Flash: other attempts