Run details
- Model
- google/gemini-4-carbon
- Route
- OpenRouter API, one user message
- Served by
- Google AI Studio
- Effort
- medium, OpenRouter's default for this model
- Limits
- 60 min · 32,768 output tokens (the model's limit)
- Date
- 10 Nov 2026
- Time
- 3 min 59 s
- Size
- 79 kB
- Tokens
- 120 in, 26,715 out
- List price
- $0.27 at today's price ($2.00 in / $10.00 out per M)
- Paid
- $0.27
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
79 kB 2,260 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 Bicycles, Hand-Built in Copenhagen</title>
<meta name="description" content="Bespoke steel and aluminum cargo bicycles brazed and assembled to order in Refshaleøen, Copenhagen." />
<style>
:root {
--bg: #f6f4ef;
--bg-alt: #ece9e1;
--bg-dark: #161817;
--ink: #161817;
--ink-muted: #585b57;
--ink-faint: #878a85;
--line: #d8d4ca;
--line-dark: #2c2f2d;
--accent: #b84a27; /* Oxide / Raw Sienna */
--accent-dark: #93381b;
--forest: #24382c;
--brass: #b08d57;
--card: #fbfaf7;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
--maxw: 1280px;
--pad: clamp(1.25rem, 4vw, 3.5rem);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
background-color: var(--bg);
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
body {
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
color: inherit;
}
/* Announcement Top Bar */
.topbar {
background: var(--bg-dark);
color: #e6e4de;
font-family: var(--mono);
font-size: 0.75rem;
letter-spacing: 0.04em;
padding: 0.55rem var(--pad);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--line-dark);
}
.topbar-status {
display: flex;
align-items: center;
gap: 0.5rem;
}
.status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #55a665;
display: inline-block;
box-shadow: 0 0 0 3px rgba(85, 166, 101, 0.2);
}
.topbar-right {
display: none;
}
@media (min-width: 768px) {
.topbar-right {
display: block;
color: #9fa39d;
}
}
/* Header / Nav */
header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(246, 244, 239, 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.nav-inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 1.05rem var(--pad);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.brand {
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.95rem;
}
.brand svg {
width: 26px;
height: 26px;
flex-shrink: 0;
}
.brand-sub {
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 400;
color: var(--ink-muted);
letter-spacing: 0.05em;
display: none;
}
@media (min-width: 960px) {
.brand-sub {
display: inline-block;
padding-left: 0.75rem;
border-left: 1px solid var(--line);
}
}
.nav-links {
display: none;
gap: 2.25rem;
font-size: 0.9rem;
color: var(--ink-muted);
}
.nav-links a {
transition: color 0.2s ease;
}
.nav-links a:hover {
color: var(--ink);
}
@media (min-width: 860px) {
.nav-links {
display: flex;
}
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.25rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: 2px;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.btn-primary {
background: var(--ink);
color: var(--bg);
}
.btn-primary:hover {
background: var(--accent);
}
.btn-outline {
background: transparent;
border-color: var(--ink);
color: var(--ink);
}
.btn-outline:hover {
background: var(--ink);
color: var(--bg);
}
.btn-accent {
background: var(--accent);
color: #fff;
}
.btn-accent:hover {
background: var(--accent-dark);
}
/* Layout Helpers */
.container {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--pad);
}
section {
padding: clamp(4rem, 8vw, 7rem) 0;
border-bottom: 1px solid var(--line);
}
.eyebrow {
font-family: var(--mono);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-muted);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.6rem;
}
.eyebrow::before {
content: "";
width: 18px;
height: 1px;
background: var(--accent);
display: inline-block;
}
h1, h2, h3 {
font-weight: 400;
line-height: 1.12;
letter-spacing: -0.02em;
}
.serif {
font-family: var(--serif);
}
/* Hero Section */
.hero {
padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3.5rem, 6vw, 5rem);
border-bottom: 1px solid var(--line);
}
.hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
}
@media (min-width: 1024px) {
.hero-grid {
grid-template-columns: 1.05fr 1.25fr;
gap: 3.5rem;
}
}
.hero h1 {
font-family: var(--serif);
font-size: clamp(2.5rem, 4.8vw, 4.35rem);
margin-bottom: 1.5rem;
color: var(--ink);
}
.hero h1 em {
font-style: italic;
color: var(--ink-muted);
}
.hero-lead {
font-size: clamp(1.05rem, 1.3vw, 1.2rem);
color: var(--ink-muted);
max-width: 52ch;
margin-bottom: 2.25rem;
line-height: 1.6;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.9rem;
margin-bottom: 2.75rem;
}
.hero-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
padding-top: 1.75rem;
border-top: 1px solid var(--line);
}
.meta-item dt {
font-family: var(--mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-faint);
margin-bottom: 0.25rem;
}
.meta-item dd {
font-size: 0.95rem;
font-weight: 500;
}
/* Hero Technical Illustration Stage */
.hero-stage {
background: var(--card);
border: 1px solid var(--line);
padding: 1.5rem;
position: relative;
border-radius: 2px;
}
.stage-header {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--mono);
font-size: 0.72rem;
color: var(--ink-muted);
padding-bottom: 1rem;
border-bottom: 1px dashed var(--line);
margin-bottom: 1rem;
}
.hero-bike-svg {
width: 100%;
height: auto;
display: block;
}
.stage-footer {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
padding-top: 1rem;
margin-top: 0.75rem;
border-top: 1px dashed var(--line);
font-family: var(--mono);
font-size: 0.72rem;
color: var(--ink-muted);
}
/* Trust Strip */
.trust-strip {
background: var(--bg-alt);
border-bottom: 1px solid var(--line);
padding: 1.75rem 0;
}
.trust-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
@media (min-width: 860px) {
.trust-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.trust-item {
display: flex;
align-items: flex-start;
gap: 0.85rem;
}
.trust-num {
font-family: var(--mono);
font-size: 0.75rem;
color: var(--accent);
padding-top: 0.15rem;
}
.trust-item strong {
display: block;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.15rem;
}
.trust-item span {
font-size: 0.82rem;
color: var(--ink-muted);
line-height: 1.4;
display: block;
}
/* Section Headings */
.section-head {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 3.5rem;
}
@media (min-width: 860px) {
.section-head {
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
}
}
.section-head h2 {
font-family: var(--serif);
font-size: clamp(2rem, 3.4vw, 3rem);
max-width: 18ch;
}
.section-head p {
color: var(--ink-muted);
max-width: 46ch;
font-size: 0.98rem;
}
/* Models Grid */
.models-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 980px) {
.models-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.model-card {
background: var(--card);
border: 1px solid var(--line);
display: flex;
flex-direction: column;
transition: border-color 0.25s ease, transform 0.25s ease;
}
.model-card:hover {
border-color: var(--ink);
transform: translateY(-2px);
}
.model-top {
padding: 1.5rem 1.5rem 1rem;
border-bottom: 1px solid var(--line);
display: flex;
justify-content: space-between;
align-items: baseline;
}
.model-code {
font-family: var(--mono);
font-size: 0.72rem;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.model-price {
font-family: var(--mono);
font-size: 0.88rem;
font-weight: 600;
}
.model-visual {
padding: 1.75rem 1.25rem;
background: linear-gradient(180deg, #fbfaf7 0%, #f2efe8 100%);
border-bottom: 1px solid var(--line);
}
.model-visual svg {
width: 100%;
height: 150px;
display: block;
}
.model-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.model-body h3 {
font-family: var(--serif);
font-size: 1.6rem;
margin-bottom: 0.4rem;
}
.model-tagline {
color: var(--ink-muted);
font-size: 0.92rem;
margin-bottom: 1.5rem;
flex-grow: 1;
}
.spec-list {
border-top: 1px solid var(--line);
margin-bottom: 1.5rem;
}
.spec-row {
display: flex;
justify-content: space-between;
padding: 0.55rem 0;
border-bottom: 1px solid var(--line);
font-size: 0.83rem;
}
.spec-row span:first-child {
color: var(--ink-muted);
}
.spec-row span:last-child {
font-family: var(--mono);
font-size: 0.78rem;
}
/* Engineering & Craft Section */
.craft-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
@media (min-width: 980px) {
.craft-grid {
grid-template-columns: 1.1fr 1fr;
gap: 4.5rem;
align-items: center;
}
}
.craft-diagram {
background: var(--bg-dark);
color: #e8e6e0;
padding: 2rem;
border-radius: 2px;
position: relative;
}
.craft-diagram-head {
display: flex;
justify-content: space-between;
font-family: var(--mono);
font-size: 0.72rem;
color: #8f948e;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--line-dark);
}
.craft-points {
display: grid;
gap: 1.75rem;
}
.craft-point {
padding-left: 1.25rem;
border-left: 2px solid var(--line);
transition: border-color 0.2s ease;
}
.craft-point:hover {
border-left-color: var(--accent);
}
.craft-point h3 {
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 0.4rem;
}
.craft-point p {
color: var(--ink-muted);
font-size: 0.94rem;
line-height: 1.6;
}
/* Interactive Configurator */
.config-section {
background: var(--bg-alt);
}
.config-wrap {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
}
@media (min-width: 1024px) {
.config-wrap {
grid-template-columns: 1.15fr 1fr;
align-items: start;
}
}
.config-preview {
background: var(--card);
border: 1px solid var(--line);
padding: 1.75rem;
position: sticky;
top: 5.5rem;
}
.preview-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
.preview-title {
font-family: var(--serif);
font-size: 1.65rem;
}
.preview-sub {
font-family: var(--mono);
font-size: 0.75rem;
color: var(--ink-muted);
}
.preview-price-box {
text-align: right;
}
.preview-price {
font-family: var(--mono);
font-size: 1.5rem;
font-weight: 600;
color: var(--ink);
}
.preview-vat {
font-family: var(--mono);
font-size: 0.7rem;
color: var(--ink-muted);
}
.preview-canvas {
padding: 1.5rem 0.5rem;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin: 1rem 0 1.25rem;
}
.preview-canvas svg {
width: 100%;
height: auto;
display: block;
}
.preview-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
font-family: var(--mono);
font-size: 0.75rem;
}
.preview-stats div span {
display: block;
color: var(--ink-faint);
font-size: 0.68rem;
margin-bottom: 0.15rem;
}
.config-controls {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.control-group {
background: var(--card);
border: 1px solid var(--line);
padding: 1.35rem 1.5rem;
}
.control-label {
display: flex;
justify-content: space-between;
font-family: var(--mono);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-muted);
margin-bottom: 1rem;
}
.option-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.65rem;
}
.option-btn {
text-align: left;
padding: 0.85rem 1rem;
border: 1px solid var(--line);
background: var(--bg);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.15s ease;
border-radius: 2px;
}
.option-btn:hover {
border-color: var(--ink-muted);
}
.option-btn.active {
border-color: var(--ink);
background: #fff;
box-shadow: inset 3px 0 0 var(--accent);
}
.opt-name {
font-weight: 500;
font-size: 0.92rem;
display: block;
}
.opt-desc {
font-size: 0.78rem;
color: var(--ink-muted);
}
.opt-delta {
font-family: var(--mono);
font-size: 0.8rem;
color: var(--ink-muted);
margin-left: 1rem;
white-space: nowrap;
}
.swatch-row {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
}
.swatch-btn {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.85rem;
border: 1px solid var(--line);
background: var(--bg);
cursor: pointer;
border-radius: 2px;
font-size: 0.85rem;
}
.swatch-btn.active {
border-color: var(--ink);
background: #fff;
}
.swatch-dot {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.2);
}
.config-summary-bar {
background: var(--ink);
color: var(--bg);
padding: 1.35rem 1.5rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.config-summary-bar small {
display: block;
font-family: var(--mono);
font-size: 0.72rem;
color: #a5a8a3;
}
/* Process Timeline */
.process-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 860px) {
.process-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.step-card {
border-top: 2px solid var(--ink);
padding-top: 1.25rem;
}
.step-num {
font-family: var(--mono);
font-size: 0.75rem;
color: var(--accent);
margin-bottom: 0.75rem;
display: block;
}
.step-card h3 {
font-family: var(--serif);
font-size: 1.35rem;
margin-bottom: 0.6rem;
}
.step-card p {
font-size: 0.9rem;
color: var(--ink-muted);
line-height: 1.6;
}
/* Owner Notes / Testimonials */
.notes-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
}
@media (min-width: 900px) {
.notes-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.note-card {
background: var(--card);
border: 1px solid var(--line);
padding: 1.75rem;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.5rem;
}
.note-quote {
font-family: var(--serif);
font-size: 1.12rem;
line-height: 1.55;
color: var(--ink);
}
.note-meta {
border-top: 1px solid var(--line);
padding-top: 1rem;
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.82rem;
}
.note-meta strong {
display: block;
font-weight: 600;
}
.note-meta span {
color: var(--ink-muted);
}
.note-km {
font-family: var(--mono);
font-size: 0.74rem;
color: var(--accent);
}
/* FAQ Accordion */
.faq-layout {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
}
@media (min-width: 900px) {
.faq-layout {
grid-template-columns: 0.85fr 1.35fr;
}
}
.faq-list {
border-top: 1px solid var(--line);
}
details.faq-item {
border-bottom: 1px solid var(--line);
}
details.faq-item summary {
list-style: none;
cursor: pointer;
padding: 1.25rem 0;
font-weight: 500;
font-size: 1.02rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
details.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-icon {
font-family: var(--mono);
font-size: 1.1rem;
color: var(--ink-muted);
transition: transform 0.2s ease;
}
details[open] .faq-icon {
transform: rotate(45deg);
color: var(--accent);
}
.faq-answer {
padding-bottom: 1.35rem;
color: var(--ink-muted);
font-size: 0.94rem;
line-height: 1.65;
max-width: 65ch;
}
/* Booking / Commission Section */
.commission-section {
background: var(--bg-dark);
color: #f2f0ea;
border-bottom: none;
}
.commission-section .eyebrow {
color: #9da19b;
}
.commission-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3.5rem;
}
@media (min-width: 960px) {
.commission-grid {
grid-template-columns: 1fr 1.1fr;
gap: 4.5rem;
}
}
.commission-info h2 {
font-family: var(--serif);
font-size: clamp(2.1rem, 3.5vw, 3.1rem);
margin-bottom: 1.25rem;
color: #fff;
}
.commission-info p {
color: #b0b4ae;
margin-bottom: 2rem;
line-height: 1.65;
max-width: 48ch;
}
.workshop-card {
border: 1px solid var(--line-dark);
background: #1d201e;
padding: 1.5rem;
font-size: 0.9rem;
}
.workshop-card h4 {
font-family: var(--mono);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #9da19b;
margin-bottom: 0.85rem;
}
.workshop-details {
display: grid;
gap: 0.65rem;
color: #dcdad3;
}
.commission-form {
background: #1e211f;
border: 1px solid var(--line-dark);
padding: clamp(1.5rem, 3vw, 2.5rem);
}
.form-row {
display: grid;
grid-template-columns: 1fr;
gap: 1.15rem;
margin-bottom: 1.15rem;
}
@media (min-width: 600px) {
.form-row.two {
grid-template-columns: 1fr 1fr;
}
}
.field label {
display: block;
font-family: var(--mono);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #a6aaa4;
margin-bottom: 0.45rem;
}
.field input,
.field select,
.field textarea {
width: 100%;
padding: 0.75rem 0.9rem;
background: #141615;
border: 1px solid #343835;
color: #f2f0ea;
border-radius: 2px;
font-size: 0.92rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--accent);
}
.form-note {
font-size: 0.78rem;
color: #8e928c;
margin-top: 0.9rem;
line-height: 1.5;
}
.form-success {
display: none;
padding: 1.5rem;
border: 1px solid #3f6e4a;
background: rgba(63, 110, 74, 0.15);
color: #d9f0de;
margin-top: 1rem;
font-size: 0.92rem;
line-height: 1.55;
}
/* Footer */
footer {
background: #111312;
color: #8e928c;
padding: 3rem 0;
border-top: 1px solid var(--line-dark);
font-size: 0.85rem;
}
.footer-inner {
display: flex;
flex-direction: column;
gap: 1.5rem;
justify-content: space-between;
}
@media (min-width: 800px) {
.footer-inner {
flex-direction: row;
align-items: center;
}
}
.footer-brand {
color: #e4e2dc;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
font-family: var(--mono);
font-size: 0.75rem;
}
.footer-links a:hover {
color: #e4e2dc;
}
</style>
</head>
<body>
<!-- Top Workshop Status Bar -->
<div class="topbar">
<div class="topbar-status">
<span class="status-dot"></span>
<span>REFSHALEØEN WORKSHOP: ALLOCATING BUILD SLOTS FOR NEXT MONTH (LEAD TIME: 6–8 WEEKS)</span>
</div>
<div class="topbar-right">CVR 41890244 · SHIPPED FULLY ASSEMBLED ACROSS EU & NORWAY</div>
</div>
<!-- Navigation -->
<header>
<div class="nav-inner">
<a href="#" class="brand" aria-label="Lumen Cycles Home">
<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="16" cy="16" r="13" />
<path d="M16 3v26M5 16h22" stroke-width="1.4" stroke-dasharray="2 2"/>
<circle cx="16" cy="16" r="4" fill="currentColor"/>
</svg>
<span>Lumen Cycles</span>
<span class="brand-sub">KØBENHAVN</span>
</a>
<nav class="nav-links" aria-label="Primary">
<a href="#models">Models</a>
<a href="#engineering">Frame & Craft</a>
<a href="#configurator">Build & Price</a>
<a href="#process">Commissioning</a>
<a href="#faq">FAQ</a>
</nav>
<a href="#commission" class="btn btn-primary">Reserve a Build Slot</a>
</div>
</header>
<main>
<!-- Hero -->
<section class="hero">
<div class="container">
<div class="hero-grid">
<div>
<div class="eyebrow">Hand-Built Cargo Bicycles · Refshalevej 167A</div>
<h1>Built to replace the second car, <em>and outlast the first.</em></h1>
<p class="hero-lead">
Every Lumen cargo frame is fillet-brazed from Reynolds chromoly steel, powder-coated for Baltic winters, and assembled by a single mechanic to your geometry and payload.
</p>
<div class="hero-actions">
<a href="#configurator" class="btn btn-accent">Configure Your Build</a>
<a href="#models" class="btn btn-outline">Explore Three Platforms</a>
</div>
<dl class="hero-meta">
<div class="meta-item">
<dt>Base Builds From</dt>
<dd>€3,850 incl. VAT</dd>
</div>
<div class="meta-item">
<dt>Max Gross Load</dt>
<dd>205 kg Certified</dd>
</div>
<div class="meta-item">
<dt>Frame Warranty</dt>
<dd>10 Years, Transferable</dd>
</div>
</dl>
</div>
<!-- Detailed Technical Vector Illustration -->
<div class="hero-stage" aria-label="Technical elevation of the Lumen Nordhavn Longjohn cargo bike">
<div class="stage-header">
<span>FIG 01. NORDHAVN MK III — LONGJOHN CHASSIS</span>
<span>SCALE 1:10 · WHEELBASE 1980 MM</span>
</div>
<svg class="hero-bike-svg" viewBox="0 0 780 390" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Subtle Technical Grid Lines -->
<g stroke="#e5e1d8" stroke-width="1">
<line x1="20" y1="336" x2="760" y2="336" stroke="#c8c3b8" stroke-width="1.5"/>
<line x1="145" y1="40" x2="145" y2="355" stroke-dasharray="4 4"/>
<line x1="635" y1="40" x2="635" y2="355" stroke-dasharray="4 4"/>
<!-- Wheelbase Dimension Line -->
<line x1="145" y1="365" x2="635" y2="365" stroke="#878a85"/>
<path d="M145 360v10M635 360v10" stroke="#878a85"/>
</g>
<text x="390" y="379" text-anchor="middle" fill="#585b57" font-family="monospace" font-size="10">1980 MM WHEELBASE · LOW-CG LOAD BED</text>
<!-- Rear Wheel (27.5" / 650B) -->
<g transform="translate(635, 250)">
<circle r="84" stroke="#1d1f1e" stroke-width="11"/>
<circle r="77" stroke="#505450" stroke-width="1.5"/>
<circle r="73" stroke="#1d1f1e" stroke-width="2.5"/>
<!-- Spokes -->
<g stroke="#9a9d98" stroke-width="1">
<line x1="-72" y1="0" x2="72" y2="0"/><line x1="0" y1="-72" x2="0" y2="72"/>
<line x1="-51" y1="-51" x2="51" y2="51"/><line x1="-51" y1="51" x2="51" y2="-51"/>
<line x1="-66" y1="-28" x2="66" y2="28"/><line x1="-28" y1="-66" x2="28" y2="66"/>
<line x1="-66" y1="28" x2="66" y2="-28"/><line x1="-28" y1="66" x2="28" y2="-66"/>
</g>
<!-- Rear Disc Rotor & Hub -->
<circle r="22" stroke="#787b76" stroke-width="2" stroke-dasharray="5 3"/>
<circle r="11" fill="#161817"/>
<circle r="4" fill="#b08d57"/>
</g>
<!-- Rear Mudguard -->
<path d="M542 250 A 93 93 0 0 1 726 230" stroke="#2a2d2b" stroke-width="4" stroke-linecap="round"/>
<!-- Front Wheel (20" Cargo Spec) -->
<g transform="translate(145, 272)">
<circle r="62" stroke="#1d1f1e" stroke-width="11"/>
<circle r="55" stroke="#505450" stroke-width="1.5"/>
<circle r="51" stroke="#1d1f1e" stroke-width="2.5"/>
<g stroke="#9a9d98" stroke-width="1">
<line x1="-50" y1="0" x2="50" y2="0"/><line x1="0" y1="-50" x2="0" y2="50"/>
<line x1="-35" y1="-35" x2="35" y2="35"/><line x1="-35" y1="35" x2="35" y2="-35"/>
<line x1="-46" y1="-19" x2="46" y2="19"/><line x1="-19" y1="-46" x2="19" y2="46"/>
</g>
<circle r="19" stroke="#787b76" stroke-width="2" stroke-dasharray="4 3"/>
<circle r="9" fill="#161817"/>
<circle r="3.5" fill="#b08d57"/>
</g>
<!-- Front Mudguard -->
<path d="M80 255 A 70 70 0 0 1 214 282" stroke="#2a2d2b" stroke-width="3.5" stroke-linecap="round"/>
<!-- Marine Plywood / Anodized Cargo Box -->
<g>
<polygon points="188,162 428,150 408,266 205,266" fill="#d8c39e" stroke="#8c6d3f" stroke-width="2"/>
<!-- Slat lines -->
<line x1="194" y1="195" x2="420" y2="186" stroke="#a68654" stroke-width="1.5"/>
<line x1="200" y1="228" x2="414" y2="223" stroke="#a68654" stroke-width="1.5"/>
<!-- Top protective rail -->
<path d="M184 162 L432 149" stroke="#161817" stroke-width="4.5" stroke-linecap="round"/>
<!-- Child bench silhouette inside -->
<path d="M375 162 L362 230 L325 230" stroke="#70552d" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" opacity="0.65"/>
</g>
<!-- Steel Longjohn Frame (Oxide Sienna) -->
<g stroke="#b84a27" stroke-linecap="round" stroke-linejoin="round">
<!-- Main Low-Step Keel Boom -->
<path d="M145 212 L205 272 L478 272" stroke-width="10"/>
<!-- Front Fork -->
<path d="M145 202 L145 272" stroke="#24382c" stroke-width="8"/>
<!-- Headtube / Front Steerer -->
<path d="M145 182 L145 214" stroke-width="10"/>
<!-- Cargo Bed Truss Support -->
<path d="M205 272 L434 152" stroke-width="6.5"/>
<!-- Rear Steerer Column -->
<path d="M430 112 L462 272" stroke-width="9"/>
<!-- Seat Tube -->
<path d="M532 135 L478 272" stroke-width="8.5"/>
<!-- Top Brace Tube (Step-through twin) -->
<path d="M444 185 L515 180" stroke-width="6.5"/>
<!-- Chainstay & Seatstay -->
<path d="M478 272 L635 250" stroke-width="7"/>
<path d="M523 158 L635 250" stroke-width="5.5"/>
</g>
<!-- Steering Linkage Rod -->
<path d="M452 260 L158 256" stroke="#161817" stroke-width="3"/>
<circle cx="158" cy="256" r="4" fill="#b08d57"/>
<circle cx="452" cy="260" r="4" fill="#b08d57"/>
<!-- Mid-Drive Motor / Bottom Bracket Unit & Gates Belt -->
<g>
<path d="M478 272 L635 250" stroke="#2b2d2b" stroke-width="3"/>
<ellipse cx="478" cy="272" rx="22" ry="17" fill="#232624" stroke="#111" stroke-width="2"/>
<circle cx="478" cy="272" r="7" fill="#b08d57"/>
</g>
<!-- Cockpit, Stem, Swept Handlebars & Saddle -->
<g stroke="#161817" stroke-linecap="round" stroke-linejoin="round">
<!-- Seatpost -->
<line x1="532" y1="135" x2="544" y2="104" stroke-width="5"/>
<!-- Leather Saddle -->
<path d="M518 102 Q546 97 572 105 Q555 113 522 109 Z" fill="#3a2618" stroke="#24170e" stroke-width="2"/>
<!-- Steerer Stem & Swept Bar -->
<path d="M430 112 L423 82 L452 76" stroke-width="5" fill="none"/>
<!-- Cork/Leather Grip -->
<line x1="444" y1="77" x2="466" y2="79" stroke="#6b442a" stroke-width="7"/>
</g>
<!-- Supernova Dynamo Front Lamp -->
<g>
<rect x="122" y="188" width="14" height="10" rx="2" fill="#161817"/>
<polygon points="122,190 78,176 78,212 122,196" fill="url(#beamGrad)" opacity="0.55"/>
</g>
<!-- Rear Pannier Rack -->
<path d="M538 170 L662 170 L635 250 M585 170 L635 250" stroke="#161817" stroke-width="3.5"/>
<!-- Callout Annotations -->
<g font-family="monospace" font-size="9.5" fill="#585b57">
<line x1="305" y1="156" x2="305" y2="95" stroke="#878a85" stroke-dasharray="2 2"/>
<circle cx="305" cy="156" r="3" fill="#b84a27"/>
<text x="235" y="88">BIRCH MARINE PLY / ISOFIX READY</text>
<line x1="478" y1="289" x2="478" y2="322" stroke="#878a85" stroke-dasharray="2 2"/>
<text x="415" y="332">GATES CDX CARBON BELT</text>
</g>
<defs>
<linearGradient id="beamGrad" x1="122" y1="193" x2="78" y2="193" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#f3c65f" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#f3c65f" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
<div class="stage-footer">
<span>TUBING: REYNOLDS 725 / DEDACCIAI CrMo</span>
<span>BRAKES: MAGURA MT5 CARGO 4-PISTON</span>
<span>WEIGHT: 24.8 KG (ACOUSTIC) / 29.4 KG (E-ASSIST)</span>
</div>
</div>
</div>
</div>
</section>
<!-- Trust Pillars -->
<div class="trust-strip">
<div class="container">
<div class="trust-grid">
<div class="trust-item">
<span class="trust-num">01</span>
<div>
<strong>Brazed in Copenhagen</strong>
<span>Every frame mitered, brazed, and aligned in our Refshaleøen jig room—never imported blank.</span>
</div>
</div>
<div class="trust-item">
<span class="trust-num">02</span>
<div>
<strong>Standardized Parts Only</strong>
<span>Zero proprietary headsets, stems, or locked batteries. Any competent bike shop in Europe can service it.</span>
</div>
</div>
<div class="trust-item">
<span class="trust-num">03</span>
<div>
<strong>Nordic Salt Protection</strong>
<span>Internal ED-coating, zinc-rich primer, and architectural-grade matte powder coat inside and out.</span>
</div>
</div>
<div class="trust-item">
<span class="trust-num">04</span>
<div>
<strong>Stamped Frame Registry</strong>
<span>Dansk Stelnummer engraved in the bottom bracket shell, insured & delivered ready to ride to your door.</span>
</div>
</div>
</div>
</div>
</div>
<!-- Three Platforms Section -->
<section id="models">
<div class="container">
<div class="section-head">
<div>
<div class="eyebrow">Three Base Architectures</div>
<h2>Engineered around what you carry every morning.</h2>
</div>
<p>
Each Lumen starts with one of three proven chassis geometries. From there, we size the cockpit reach, drivetrain gearing, and cargo bay hardware to your household or trade.
</p>
</div>
<div class="models-grid">
<!-- Model 1: Nordhavn -->
<article class="model-card">
<div class="model-top">
<span class="model-code">Model 01 · Family Longjohn</span>
<span class="model-price">From €4,150</span>
</div>
<div class="model-visual">
<svg viewBox="0 0 360 150" fill="none">
<line x1="15" y1="132" x2="345" y2="132" stroke="#d8d4ca"/>
<circle cx="72" cy="104" r="26" stroke="#161817" stroke-width="5"/>
<circle cx="292" cy="94" r="36" stroke="#161817" stroke-width="5"/>
<polygon points="92,58 198,52 190,102 98,102" fill="#dfc9a3" stroke="#8c6d3f" stroke-width="1.5"/>
<path d="M72 76 L98 104 L220 104 L292 94 M200 44 L214 104 M246 48 L220 104 L240 62 L292 94" stroke="#b84a27" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M72 72 L72 104" stroke="#24382c" stroke-width="4"/>
<path d="M238 40 L256 40" stroke="#161817" stroke-width="4" stroke-linecap="round"/>
</svg>
</div>
<div class="model-body">
<h3>Nordhavn</h3>
<p class="model-tagline">Our flagship front-loader. Carries two children under a storm canopy or four Euro-crates with effortless one-handed stability.</p>
<div class="spec-list">
<div class="spec-row"><span>Cargo Bed Length</span><span>740 mm</span></div>
<div class="spec-row"><span>Box Payload</span><span>100 kg max</span></div>
<div class="spec-row"><span>Overall Length</span><span>246 cm</span></div>
<div class="spec-row"><span>Drivetrain</span><span>Gates Belt · Enviolo / Rohloff</span></div>
</div>
<button class="btn btn-outline select-model-btn" data-model="nordhavn">Configure Nordhavn</button>
</div>
</article>
<!-- Model 2: Vesterbro -->
<article class="model-card">
<div class="model-top">
<span class="model-code">Model 02 · Compact Short-John</span>
<span class="model-price">From €3,850</span>
</div>
<div class="model-visual">
<svg viewBox="0 0 360 150" fill="none">
<line x1="15" y1="132" x2="345" y2="132" stroke="#d8d4ca"/>
<circle cx="88" cy="104" r="26" stroke="#161817" stroke-width="5"/>
<circle cx="276" cy="94" r="36" stroke="#161817" stroke-width="5"/>
<rect x="64" y="48" width="66" height="24" rx="2" fill="#dfc9a3" stroke="#8c6d3f" stroke-width="1.5"/>
<path d="M126 54 L208 102 L276 94 M126 54 L88 104 M126 54 L228 56 M232 46 L208 102 M226 60 L276 94" stroke="#24382c" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M126 42 L136 36" stroke="#161817" stroke-width="4" stroke-linecap="round"/>
<path d="M225 42 L242 42" stroke="#161817" stroke-width="4" stroke-linecap="round"/>
</svg>
</div>
<div class="model-body">
<h3>Vesterbro</h3>
<p class="model-tagline">Fits into courtyard bike racks and apartment elevators. Rides with the agility of a commuter, hauls 55 kg over the front axle.</p>
<div class="spec-list">
<div class="spec-row"><span>Rack Footprint</span><span>520 × 420 mm</span></div>
<div class="spec-row"><span>Front + Rear Load</span><span>55 kg + 25 kg</span></div>
<div class="spec-row"><span>Overall Length</span><span>192 cm</span></div>
<div class="spec-row"><span>Drivetrain</span><span>Shimano Alfine 11 / Belt</span></div>
</div>
<button class="btn btn-outline select-model-btn" data-model="vesterbro">Configure Vesterbro</button>
</div>
</article>
<!-- Model 3: Kastrup -->
<article class="model-card">
<div class="model-top">
<span class="model-code">Model 03 · Heavy Flatbed</span>
<span class="model-price">From €4,450</span>
</div>
<div class="model-visual">
<svg viewBox="0 0 360 150" fill="none">
<line x1="15" y1="132" x2="345" y2="132" stroke="#d8d4ca"/>
<circle cx="66" cy="104" r="26" stroke="#161817" stroke-width="5"/>
<circle cx="296" cy="94" r="36" stroke="#161817" stroke-width="5"/>
<!-- Airline L-Track Flatbed -->
<rect x="82" y="88" width="124" height="8" fill="#585b57"/>
<rect x="92" y="54" width="96" height="34" stroke="#585b57" stroke-width="1.5" stroke-dasharray="3 2"/>
<path d="M66 76 L90 102 L226 102 L296 94 M206 44 L218 102 M252 48 L226 102 M246 62 L296 94" stroke="#2c3e50" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M66 72 L66 104" stroke="#161817" stroke-width="4"/>
<path d="M244 42 L262 42" stroke="#161817" stroke-width="4" stroke-linecap="round"/>
</svg>
</div>
<div class="model-body">
<h3>Kastrup</h3>
<p class="model-tagline">Built for bakeries, florists, toolmakers, and expedition dogs. Reinforced twin-keel chromoly frame with CNC airline L-track deck.</p>
<div class="spec-list">
<div class="spec-row"><span>Flatbed Deck</span><span>860 × 600 mm</span></div>
<div class="spec-row"><span>Deck Payload</span><span>125 kg max</span></div>
<div class="spec-row"><span>Overall Length</span><span>258 cm</span></div>
<div class="spec-row"><span>Drivetrain</span><span>Shimano EP801 Cargo / Rohloff</span></div>
</div>
<button class="btn btn-outline select-model-btn" data-model="kastrup">Configure Kastrup</button>
</div>
</article>
</div>
</div>
</section>
<!-- Frame & Engineering Craft -->
<section id="engineering">
<div class="container">
<div class="craft-grid">
<div class="craft-diagram">
<div class="craft-diagram-head">
<span>DETAIL 04 · BRASS FILLET JOINT & CABLE STEERING</span>
<span>TOLERANCE ±0.2 MM</span>
</div>
<svg viewBox="0 0 520 320" width="100%" fill="none">
<!-- Dark Blueprint Grid -->
<g stroke="#242826" stroke-width="1">
<line x1="0" y1="64" x2="520" y2="64"/><line x1="0" y1="128" x2="520" y2="128"/>
<line x1="0" y1="192" x2="520" y2="192"/><line x1="0" y1="256" x2="520" y2="256"/>
<line x1="104" y1="0" x2="104" y2="320"/><line x1="208" y1="0" x2="208" y2="320"/>
<line x1="312" y1="0" x2="312" y2="320"/><line x1="416" y1="0" x2="416" y2="320"/>
</g>
<!-- Cross-section of Double-Butted Tube & Brass Fillet -->
<g transform="translate(40, 30)">
<!-- Main Steerer Tube -->
<path d="M130 15 L175 245" stroke="#d8d4ca" stroke-width="36"/>
<path d="M130 15 L175 245" stroke="#161817" stroke-width="26"/>
<!-- Keel Boom Tube Intersecting -->
<path d="M162 178 L420 178" stroke="#d8d4ca" stroke-width="42"/>
<path d="M162 178 L420 178" stroke="#161817" stroke-width="32"/>
<!-- Diagonal Truss Tube -->
<path d="M152 135 L390 35" stroke="#d8d4ca" stroke-width="28"/>
<path d="M152 135 L390 35" stroke="#161817" stroke-width="20"/>
<!-- Hand-filed Silver/Brass Fillet Highlights -->
<path d="M165 112 Q182 122 195 117 L180 124 Q168 130 165 112 Z" fill="#b08d57"/>
<path d="M174 156 Q195 156 205 157 L190 162 Q178 164 174 156 Z" fill="#b08d57"/>
<path d="M180 199 Q202 199 212 199 L195 204 Q184 206 180 199 Z" fill="#b08d57"/>
<!-- Internal Drainage & ED Coat Callout -->
<circle cx="190" cy="158" r="4" fill="#b84a27"/>
<line x1="190" y1="158" x2="265" y2="112" stroke="#b84a27" stroke-width="1.2"/>
<text x="272" y="110" fill="#e8e6e0" font-family="monospace" font-size="10">SILVER-NICKEL BRAZE FILLET</text>
<text x="272" y="123" fill="#8f948e" font-family="monospace" font-size="9">LOW-TEMP 780°C PRESERVES GRAIN</text>
<circle cx="320" cy="196" r="4" fill="#55a665"/>
<line x1="320" y1="196" x2="320" y2="236" stroke="#55a665" stroke-width="1.2"/>
<text x="220" y="252" fill="#e8e6e0" font-family="monospace" font-size="10">0.9 - 0.6 - 0.9 MM BUTTED WALL</text>
</g>
</svg>
</div>
<div>
<div class="eyebrow">Why Steel Matters Under Load</div>
<h2 class="serif" style="font-size: clamp(2rem, 3.2vw, 2.85rem); margin-bottom: 1.75rem;">
Stiff laterally when loaded. Forgiving vertically over cobblestones.
</h2>
<div class="craft-points">
<div class="craft-point">
<h3>Fillet-Brazed Reynolds Chromoly</h3>
<p>Mass-market aluminum cargo frames transmit harsh road chatter straight into sleeping passengers—and fatigue over decades. Our thin-wall chromoly tubing damps vibration naturally and can be repaired for life.</p>
</div>
<div class="craft-point">
<h3>Sealed Marine Rod & Pulley Steering</h3>
<p>No twitchy geometry at low speed. We tune front trail specifically for loaded stability and fit stainless-steel sealed angular contact bearings in both headtubes.</p>
</div>
<div class="craft-point">
<h3>Acoustic or Open-System E-Assist</h3>
<p>Ride pure mechanical efficiency with a Rohloff 14-speed hub, or add a Shimano EP801 Cargo drive. Even with electric assist, the bike pedals cleanly past the 25 km/h threshold with zero drag.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Interactive Build & Price Configurator -->
<section id="configurator" class="config-section">
<div class="container">
<div class="section-head">
<div>
<div class="eyebrow">Transparent Pricing</div>
<h2>Configure your build & estimate.</h2>
</div>
<p>
No hidden dealer markups or surprise freight fees. Configure a baseline specification below—your final geometry and accessory list are refined one-on-one before brazing begins.
</p>
</div>
<div class="config-wrap">
<!-- Sticky Live Preview -->
<div class="config-preview">
<div class="preview-top">
<div>
<div class="preview-title" id="cfg-title">Nordhavn Family</div>
<div class="preview-sub" id="cfg-subtitle">Oxide Sienna · Acoustic Gates Belt</div>
</div>
<div class="preview-price-box">
<div class="preview-price" id="cfg-price">€4,150</div>
<div class="preview-vat">Incl. 25% VAT · €500 deposit</div>
</div>
</div>
<div class="preview-canvas">
<svg id="cfg-svg" viewBox="0 0 640 280" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Ground line -->
<line x1="20" y1="246" x2="620" y2="246" stroke="#d8d4ca" stroke-width="1.5"/>
<!-- Rear Wheel -->
<g id="svg-rear-wheel" transform="translate(520, 180)">
<circle r="64" stroke="#1a1c1b" stroke-width="9"/>
<circle r="56" stroke="#7d807b" stroke-width="1.5"/>
<line x1="-55" y1="0" x2="55" y2="0" stroke="#b5b8b2"/>
<line x1="0" y1="-55" x2="0" y2="55" stroke="#b5b8b2"/>
<line x1="-39" y1="-39" x2="39" y2="39" stroke="#b5b8b2"/>
<line x1="-39" y1="39" x2="39" y2="-39" stroke="#b5b8b2"/>
<circle r="12" fill="#161817"/>
</g>
<!-- Front Wheel -->
<g id="svg-front-wheel" transform="translate(125, 198)">
<circle r="46" stroke="#1a1c1b" stroke-width="9"/>
<circle r="39" stroke="#7d807b" stroke-width="1.5"/>
<line x1="-38" y1="0" x2="38" y2="0" stroke="#b5b8b2"/>
<line x1="0" y1="-38" x2="0" y2="38" stroke="#b5b8b2"/>
<line x1="-27" y1="-27" x2="27" y2="27" stroke="#b5b8b2"/>
<line x1="-27" y1="27" x2="27" y2="-27" stroke="#b5b8b2"/>
<circle r="9" fill="#161817"/>
</g>
<!-- Rain Canopy (Toggled dynamically) -->
<g id="svg-canopy" opacity="0" style="transition: opacity 0.25s ease">
<path d="M162 114 Q255 34 352 98 L342 112 L162 116 Z" fill="rgba(36, 56, 44, 0.16)" stroke="#24382c" stroke-width="2.5"/>
<path d="M235 65 L230 112 M300 68 L296 110" stroke="#24382c" stroke-width="1.5" stroke-dasharray="3 2"/>
</g>
<!-- Cargo Box / Flatbed / Short Rack (Updated dynamically) -->
<g id="svg-cargo-module">
<polygon points="158,114 352,104 338,194 172,194" fill="#dfc9a3" stroke="#8c6d3f" stroke-width="2"/>
<line x1="164" y1="142" x2="346" y2="135" stroke="#a88958" stroke-width="1.5"/>
<line x1="168" y1="168" x2="342" y2="164" stroke="#a88958" stroke-width="1.5"/>
<line x1="155" y1="114" x2="355" y2="104" stroke="#161817" stroke-width="4" stroke-linecap="round"/>
</g>
<!-- Dynamic Frame Tubing -->
<g id="svg-frame" stroke="#b84a27" stroke-linecap="round" stroke-linejoin="round" style="transition: stroke 0.25s ease">
<path id="svg-frame-path" d="M125 152 L172 198 L395 198 L520 180 M172 198 L356 106 M352 78 L382 198 M438 96 L395 198 M365 132 L424 128 M430 114 L520 180" stroke-width="8"/>
<path id="svg-fork-path" d="M125 144 L125 198" stroke-width="7"/>
</g>
<!-- E-Motor Pod (Toggled dynamically) -->
<g id="svg-motor" opacity="0" style="transition: opacity 0.25s ease">
<rect x="372" y="136" width="16" height="48" rx="4" transform="rotate(-14 372 136)" fill="#1f2220" stroke="#454946" stroke-width="1.5"/>
<ellipse cx="395" cy="198" rx="22" ry="16" fill="#1c1e1d"/>
</g>
<!-- Standard Crank / Belt -->
<g>
<line x1="395" y1="198" x2="520" y2="180" stroke="#232624" stroke-width="2.5"/>
<circle cx="395" cy="198" r="11" fill="#232624"/>
<circle cx="395" cy="198" r="4" fill="#b08d57"/>
</g>
<!-- Cockpit & Saddle -->
<g stroke="#161817" stroke-linecap="round">
<line id="svg-stem" x1="352" y1="78" x2="346" y2="56" stroke-width="4.5"/>
<line id="svg-bar" x1="346" y1="56" x2="370" y2="52" stroke-width="5"/>
<line x1="438" y1="96" x2="446" y2="74" stroke-width="4.5"/>
<path d="M428 72 Q448 68 468 74 Q454 80 430 77 Z" fill="#3a2618" stroke="none"/>
</g>
</svg>
</div>
<div class="preview-stats">
<div>
<span>EST. BUILD WEIGHT</span>
<strong id="cfg-weight">24.8 kg</strong>
</div>
<div>
<span>MAX PAYLOAD</span>
<strong id="cfg-payload">100 kg box + rider</strong>
</div>
<div>
<span>EST. COMPLETION</span>
<strong>6–8 Weeks</strong>
</div>
</div>
</div>
<!-- Right Side Controls -->
<div class="config-controls">
<!-- Step 1: Platform -->
<div class="control-group">
<div class="control-label">
<span>01 · Select Chassis Platform</span>
<span>Reynolds 725 Steel</span>
</div>
<div class="option-grid" id="opt-platform">
<button type="button" class="option-btn active" data-val="nordhavn" data-price="4150" data-weight="24.8" data-payload="100 kg box + rider">
<div>
<span class="opt-name">Nordhavn Longjohn</span>
<span class="opt-desc">740 mm marine plywood box · Family & daily cargo</span>
</div>
<span class="opt-delta">€4,150</span>
</button>
<button type="button" class="option-btn" data-val="vesterbro" data-price="3850" data-weight="20.4" data-payload="55 kg front + 25 kg rear">
<div>
<span class="opt-name">Vesterbro Compact</span>
<span class="opt-desc">Short-wheelbase front carrier · Apartment friendly</span>
</div>
<span class="opt-delta">€3,850</span>
</button>
<button type="button" class="option-btn" data-val="kastrup" data-price="4450" data-weight="26.2" data-payload="125 kg L-track deck">
<div>
<span class="opt-name">Kastrup Heavy Flatbed</span>
<span class="opt-desc">860 mm twin-keel flatbed · Commercial & expedition</span>
</div>
<span class="opt-delta">€4,450</span>
</button>
</div>
</div>
<!-- Step 2: Drivetrain -->
<div class="control-group">
<div class="control-label">
<span>02 · Drivetrain & Assist</span>
<span>Gates Carbon Belt Standard</span>
</div>
<div class="option-grid" id="opt-drive">
<button type="button" class="option-btn active" data-val="Alfine 11 Acoustic" data-delta="0" data-wdelta="0" data-motor="0">
<div>
<span class="opt-name">Shimano Alfine 11-Speed + Gates CDX Belt</span>
<span class="opt-desc">Pure mechanical, silent sealed internal gear hub</span>
</div>
<span class="opt-delta">Included</span>
</button>
<button type="button" class="option-btn" data-val="Rohloff Speedhub 14" data-delta="980" data-wdelta="0.4" data-motor="0">
<div>
<span class="opt-name">Rohloff Speedhub 500/14 + Gates CDX Belt</span>
<span class="opt-desc">526% gear range, hand-built in Germany, 100,000 km rated</span>
</div>
<span class="opt-delta">+ €980</span>
</button>
<button type="button" class="option-btn" data-val="Shimano EP801 Cargo E-Assist" data-delta="1650" data-wdelta="4.6" data-motor="1">
<div>
<span class="opt-name">Shimano EP801 Cargo (85 Nm) + 630Wh Battery</span>
<span class="opt-desc">Paired with heavy-duty Enviolo stepless cargo hub</span>
</div>
<span class="opt-delta">+ €1,650</span>
</button>
</div>
</div>
<!-- Step 3: Powder Coat Finish -->
<div class="control-group">
<div class="control-label">
<span>03 · Architectural Powder Coat</span>
<span id="color-label-display">Oxide Sienna</span>
</div>
<div class="swatch-row" id="opt-color">
<button type="button" class="swatch-btn active" data-color="#b84a27" data-name="Oxide Sienna">
<span class="swatch-dot" style="background:#b84a27"></span>
<span>Oxide Sienna</span>
</button>
<button type="button" class="swatch-btn" data-color="#24382c" data-name="Øresund Pine">
<span class="swatch-dot" style="background:#24382c"></span>
<span>Øresund Pine</span>
</button>
<button type="button" class="swatch-btn" data-color="#263342" data-name="Baltic Slate">
<span class="swatch-dot" style="background:#263342"></span>
<span>Baltic Slate</span>
</button>
<button type="button" class="swatch-btn" data-color="#6e6a63" data-name="Raw Clear-Over-Braze">
<span class="swatch-dot" style="background:#6e6a63"></span>
<span>Raw Clear-Braze</span>
</button>
</div>
</div>
<!-- Step 4: Cargo & Weather Fit-Out -->
<div class="control-group">
<div class="control-label">
<span>04 · Cargo & Weather Kit</span>
<span>Handmade in Denmark</span>
</div>
<div class="option-grid" id="opt-kit">
<button type="button" class="option-btn active" data-val="Standard Utility Deck" data-delta="0" data-wdelta="0" data-canopy="0">
<div>
<span class="opt-name">Standard Tie-Down & Non-Slip Deck</span>
<span class="opt-desc">Stainless lashing rings & recycled rubber floor mat</span>
</div>
<span class="opt-delta">Included</span>
</button>
<button type="button" class="option-btn" data-val="Two-Child Bench + Storm Canopy" data-delta="440" data-wdelta="2.4" data-canopy="1">
<div>
<span class="opt-name">Dual Child Bench, 5-Point Harnesses & Storm Hood</span>
<span class="opt-desc">Solution-dyed Sunbrella canvas with YKK marine zips</span>
</div>
<span class="opt-delta">+ €440</span>
</button>
<button type="button" class="option-btn" data-val="Supernova Dynamo + Brooks Kit" data-delta="310" data-wdelta="0.5" data-canopy="0">
<div>
<span class="opt-name">SON28 Hub Dynamo, Supernova M99 Light & Brooks C17</span>
<span class="opt-desc">Always-on battery-free beam + vulcanized rubber saddle</span>
</div>
<span class="opt-delta">+ €310</span>
</button>
</div>
</div>
<div class="config-summary-bar">
<div>
<small>YOUR CONFIGURED SPECIFICATION</small>
<strong id="summary-line">Nordhavn · Alfine 11 · €4,150</strong>
</div>
<a href="#commission" id="transfer-spec-btn" class="btn btn-accent">Send to Build Sheet →</a>
</div>
</div>
</div>
</div>
</section>
<!-- Commissioning Process -->
<section id="process">
<div class="container">
<div class="section-head">
<div>
<div class="eyebrow">How Commissioning Works</div>
<h2>Built to your measurements in four deliberate stages.</h2>
</div>
<p>
We build 140 bicycles per year. Ordering directly from the people holding the torch means we can adjust top-tube reach for shared family riders or wire custom lighting before paint.
</p>
</div>
<div class="process-grid">
<div class="step-card">
<span class="step-num">STEP 01 · CONSULTATION</span>
<h3>Fit & Payload Review</h3>
<p>Visit us on Refshaleøen for a loaded test ride, or join a 25-minute video call from anywhere in Europe. We review rider heights (including partners sharing the bike), hill grades, and storage doors.</p>
</div>
<div class="step-card">
<span class="step-num">STEP 02 · €500 DEPOSIT</span>
<h3>CAD Sign-Off & Slot</h3>
<p>A refundable €500 build deposit locks your production week. You receive a 1:1 CAD drawing and itemized build sheet to sign off before a single tube is mitered.</p>
</div>
<div class="step-card">
<span class="step-num">STEP 03 · WEEKS 3–6</span>
<h3>Braze, Coat & Wheelbuild</h3>
<p>Your frame is fillet-brazed, stamped with your initials and serial number, zinc-primed, and powder-coated. Meanwhile, we hand-lace your cargo wheels in-house.</p>
</div>
<div class="step-card">
<span class="step-num">STEP 04 · DELIVERY</span>
<h3>Shakedown & Handover</h3>
<p>Every bike undergoes a 15 km weighted shakedown ride along Copenhagen harbor. Pick up over coffee at the workshop, or receive it fully assembled on a custom pallet at your curb.</p>
</div>
</div>
</div>
</section>
<!-- Field Reports / Owner Notes -->
<section style="background: var(--bg-alt);">
<div class="container">
<div class="section-head">
<div>
<div class="eyebrow">High-Mileage Logbook</div>
<h2>Tested in headwinds, sleet, and rush hour.</h2>
</div>
<p>Most of our commissions come from neighbors talking at traffic lights. Here are three bikes currently in daily service.</p>
</div>
<div class="notes-grid">
<div class="note-card">
<p class="note-quote">“We sold our station wagon the week the Nordhavn arrived. Two winters of salted Østerbro slush later, there isn't a speck of rust on a single bolt, and both kids still fall asleep under the canopy.”</p>
<div class="note-meta">
<div>
<strong>Mikkel & Astrid H.</strong>
<span>Østerbro, København · Nordhavn EP801</span>
</div>
<span class="note-km">9,400 KM</span>
</div>
</div>
<div class="note-card">
<p class="note-quote">“Our bakery runs 90 kg of sourdough loaves across bridges six mornings a week. An aluminum fleet bike cracked on us in 14 months; the Lumen Kastrup feels tighter today than day one.”</p>
<div class="note-meta">
<div>
<strong>Søren Lindqvist</strong>
<span>Malmö, Sweden · Kastrup Rohloff</span>
</div>
<span class="note-km">16,800 KM</span>
</div>
</div>
<div class="note-card">
<p class="note-quote">“I needed a bike my 162 cm wife and 191 cm self could swap in five seconds without tools, and still fit down our narrow Berlin courtyard cellar ramp. Worth every euro.”</p>
<div class="note-meta">
<div>
<strong>Jonas K.</strong>
<span>Prenzlauer Berg, Berlin · Vesterbro</span>
</div>
<span class="note-km">6,150 KM</span>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq">
<div class="container">
<div class="faq-layout">
<div>
<div class="eyebrow">Practical Questions</div>
<h2 class="serif" style="font-size: clamp(2rem, 3vw, 2.6rem); margin-bottom: 1rem;">Ownership, service & cross-border delivery.</h2>
<p style="color: var(--ink-muted); font-size: 0.95rem;">
Spending €4,000+ on a bicycle requires clarity on long-term maintenance, insurance compliance, and resale value.
</p>
</div>
<div class="faq-list">
<details class="faq-item" open>
<summary>
<span>How is my bike serviced if I live outside Copenhagen?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-answer">
We intentionally avoid proprietary electronics, custom stems, or oddball brake mounts. Every bearing, Shimano/Rohloff hub, Magura brake pad, and Gates belt on a Lumen is stocked by standard European bike shops. We also include a printed torque & bearing reference booklet for your local mechanic.
</div>
</details>
<details class="faq-item">
<summary>
<span>Can two riders of very different heights share one frame?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-answer">
Yes. Over 70% of our family builds are shared. We braze a slackened seat-tube angle so that as the quick-release seatpost rises, the cockpit reach lengthens proportionally—accommodating riders from 158 cm to 196 cm in seconds.
</div>
</details>
<details class="faq-item">
<summary>
<span>How does EU & Norwegian shipping work?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-answer">
Your bike ships upright, 100% assembled and tuned, strapped to a custom wooden freight sled via insured DACHSER cargo. Flat-rate curbside delivery is €140 across Germany, Benelux, and Sweden, and €210 for the rest of the EU. For Norway and Switzerland, we deduct 25% Danish VAT at invoice so you only pay local import VAT.
</div>
</details>
<details class="faq-item">
<summary>
<span>Do you work with JobRad, BusinessBike, or Danish employer leasing?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-answer">
Yes. We are registered direct partners with JobRad (DE), Lease a Bike, and Danish gross-salary commuter programs. Select "Employer Leasing" in the inquiry form below and we will issue the formal leasing quote.
</div>
</details>
<details class="faq-item">
<summary>
<span>What does the 10-year warranty cover?</span>
<span class="faq-icon">+</span>
</summary>
<div class="faq-answer">
We warrant the frame, fork, and steering linkage against structural or workmanship defects for 10 years—and unlike most brands, our warranty transfers to the second owner if you ever sell the bike. In the event of crash damage, we offer at-cost workshop frame repair and re-coating.
</div>
</details>
</div>
</div>
</div>
</section>
<!-- Commission / Booking Form -->
<section id="commission" class="commission-section">
<div class="container">
<div class="commission-grid">
<div class="commission-info">
<div class="eyebrow">Start Your Build Sheet</div>
<h2>Book a workshop test ride or request a build slot.</h2>
<p>
No automated sales funnel. Your inquiry goes straight to Kasper and Freja on the shop floor. We reply within one working day with current lead dates and geometry recommendations.
</p>
<div class="workshop-card">
<h4>Lumen Cycles Værksted & Showroom</h4>
<div class="workshop-details">
<div><strong>Address:</strong> Refshalevej 167A, Hal 4, 1432 København K</div>
<div><strong>Open Bench Hours:</strong> Tue–Fri 10:00–17:30 · Sat 10:00–14:00</div>
<div><strong>Direct Telephone:</strong> +45 31 44 88 12</div>
<div><strong>Ferry Access:</strong> 4 min walk from Refshaleøen Havnebus 991/992</div>
</div>
</div>
</div>
<div class="commission-form">
<form id="build-form">
<div class="form-row two">
<div class="field">
<label for="f-name">Full Name</label>
<input type="text" id="f-name" name="name" required placeholder="e.g. Anders Lind" />
</div>
<div class="field">
<label for="f-email">Email Address</label>
<input type="email" id="f-email" name="email" required placeholder="anders@domain.dk" />
</div>
</div>
<div class="form-row two">
<div class="field">
<label for="f-city">City & Country</label>
<input type="text" id="f-city" name="city" required placeholder="e.g. København / Hamburg" />
</div>
<div class="field">
<label for="f-intent">How Would You Like to Begin?</label>
<select id="f-intent" name="intent">
<option value="workshop">Test ride at Refshaleøen Workshop</option>
<option value="video">25-min Video Consultation & Sizing</option>
<option value="quote">Written Build Quote / JobRad Leasing</option>
</select>
</div>
</div>
<div class="form-row">
<div class="field">
<label for="f-spec">Configured Baseline Specification</label>
<input type="text" id="f-spec" name="spec" value="Nordhavn Longjohn · Shimano Alfine 11 + Gates Belt · Oxide Sienna (€4,150)" />
</div>
</div>
<div class="form-row">
<div class="field">
<label for="f-notes">Rider Height(s) & Typical Cargo</label>
<textarea id="f-notes" rows="3" placeholder="e.g. Riders 168 cm and 184 cm. Carrying two kids (ages 2 & 5) roughly 14 km daily, parked in covered courtyard."></textarea>
</div>
</div>
<button type="submit" class="btn btn-accent" style="width: 100%; padding: 0.9rem;">
Request Build Consultation
</button>
<p class="form-note">
No payment is required today. Build slots are only invoiced once you review and sign your 1:1 CAD drawing.
</p>
<div class="form-success" id="form-success" role="status">
<strong>Tak — your build inquiry (#LC-2084) has been logged.</strong><br/>
Kasper from our frame shop will review your notes and write back within 1 business day with available test-ride times and next month's production calendar.
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-inner">
<div>
<div class="footer-brand">Lumen Cycles ApS</div>
<div style="margin-top: 0.35rem;">Refshalevej 167A · 1432 København K · Denmark · CVR 41890244</div>
</div>
<div class="footer-links">
<a href="#models">Platforms</a>
<a href="#engineering">Tubing & Spec</a>
<a href="#configurator">Configurator</a>
<a href="#faq">Warranty (10 Yr)</a>
<a href="#commission">Book Test Ride</a>
</div>
</div>
</div>
</footer>
<script>
(function () {
const state = {
platform: 'nordhavn',
platformName: 'Nordhavn Longjohn',
basePrice: 4150,
baseWeight: 24.8,
payload: '100 kg box + rider',
driveName: 'Alfine 11 Acoustic',
driveDelta: 0,
driveWeight: 0,
hasMotor: false,
colorHex: '#b84a27',
colorName: 'Oxide Sienna',
kitName: 'Standard Utility Deck',
kitDelta: 0,
kitWeight: 0,
hasCanopy: false
};
// Elements
const elTitle = document.getElementById('cfg-title');
const elSubtitle = document.getElementById('cfg-subtitle');
const elPrice = document.getElementById('cfg-price');
const elWeight = document.getElementById('cfg-weight');
const elPayload = document.getElementById('cfg-payload');
const elSummary = document.getElementById('summary-line');
const elFormSpec = document.getElementById('f-spec');
const elColorDisplay = document.getElementById('color-label-display');
// SVG parts
const svgFrame = document.getElementById('svg-frame');
const svgFramePath = document.getElementById('svg-frame-path');
const svgForkPath = document.getElementById('svg-fork-path');
const svgFrontWheel = document.getElementById('svg-front-wheel');
const svgCargo = document.getElementById('svg-cargo-module');
const svgCanopy = document.getElementById('svg-canopy');
const svgMotor = document.getElementById('svg-motor');
const svgStem = document.getElementById('svg-stem');
const svgBar = document.getElementById('svg-bar');
function formatEuro(num) {
return '€' + num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
function renderGeometry() {
if (state.platform === 'nordhavn') {
svgFrontWheel.setAttribute('transform', 'translate(125, 198)');
svgFramePath.setAttribute('d', 'M125 152 L172 198 L395 198 L520 180 M172 198 L356 106 M352 78 L382 198 M438 96 L395 198 M365 132 L424 128 M430 114 L520 180');
svgForkPath.setAttribute('d', 'M125 144 L125 198');
svgStem.setAttribute('x1', '352'); svgStem.setAttribute('y1', '78');
svgStem.setAttribute('x2', '346'); svgStem.setAttribute('y2', '56');
svgBar.setAttribute('x1', '346'); svgBar.setAttribute('y1', '56');
svgBar.setAttribute('x2', '370'); svgBar.setAttribute('y2', '52');
svgCargo.innerHTML = `
<polygon points="158,114 352,104 338,194 172,194" fill="#dfc9a3" stroke="#8c6d3f" stroke-width="2"/>
<line x1="164" y1="142" x2="346" y2="135" stroke="#a88958" stroke-width="1.5"/>
<line x1="168" y1="168" x2="342" y2="164" stroke="#a88958" stroke-width="1.5"/>
<line x1="155" y1="114" x2="355" y2="104" stroke="#161817" stroke-width="4" stroke-linecap="round"/>
`;
} else if (state.platform === 'vesterbro') {
svgFrontWheel.setAttribute('transform', 'translate(225, 198)');
svgFramePath.setAttribute('d', 'M278 96 L395 198 L520 180 M278 108 L428 112 M438 96 L395 198 M430 114 L520 180');
svgForkPath.setAttribute('d', 'M278 96 L225 198');
svgStem.setAttribute('x1', '278'); svgStem.setAttribute('y1', '96');
svgStem.setAttribute('x2', '284'); svgStem.setAttribute('y2', '66');
svgBar.setAttribute('x1', '284'); svgBar.setAttribute('y1', '66');
svgBar.setAttribute('x2', '308'); svgBar.setAttribute('y2', '64');
svgCargo.innerHTML = `
<rect x="176" y="92" width="92" height="34" rx="2" fill="#dfc9a3" stroke="#8c6d3f" stroke-width="2"/>
<line x1="176" y1="108" x2="268" y2="108" stroke="#a88958" stroke-width="1.5"/>
<line x1="205" y1="126" x2="225" y2="198" stroke="#161817" stroke-width="3"/>
`;
} else if (state.platform === 'kastrup') {
svgFrontWheel.setAttribute('transform', 'translate(108, 198)');
svgFramePath.setAttribute('d', 'M108 152 L154 198 L395 198 L520 180 M154 188 L378 188 M352 78 L382 198 M438 96 L395 198 M365 132 L424 128 M430 114 L520 180');
svgForkPath.setAttribute('d', 'M108 144 L108 198');
svgStem.setAttribute('x1', '352'); svgStem.setAttribute('y1', '78');
svgStem.setAttribute('x2', '346'); svgStem.setAttribute('y2', '56');
svgBar.setAttribute('x1', '346'); svgBar.setAttribute('y1', '56');
svgBar.setAttribute('x2', '370'); svgBar.setAttribute('y2', '52');
svgCargo.innerHTML = `
<rect x="144" y="174" width="212" height="10" fill="#434744" stroke="#161817" stroke-width="1.5"/>
<rect x="158" y="114" width="176" height="60" fill="rgba(216, 212, 202, 0.35)" stroke="#585b57" stroke-width="1.8" stroke-dasharray="5 3"/>
<text x="246" y="148" text-anchor="middle" fill="#585b57" font-family="monospace" font-size="10">EURO-CRATE L-TRACK DECK</text>
`;
}
}
function updateUI() {
const total = state.basePrice + state.driveDelta + state.kitDelta;
const weight = (state.baseWeight + state.driveWeight + state.kitWeight).toFixed(1);
elTitle.textContent = state.platformName;
elSubtitle.textContent = `${state.colorName} · ${state.driveName}`;
elPrice.textContent = formatEuro(total);
elWeight.textContent = `${weight} kg`;
elPayload.textContent = state.payload;
elColorDisplay.textContent = state.colorName;
const summaryText = `${state.platformName} · ${state.driveName} · ${state.colorName} (${formatEuro(total)})`;
elSummary.textContent = `${state.platformName} · ${state.driveName} · ${formatEuro(total)}`;
elFormSpec.value = `${summaryText} — ${state.kitName}`;
// Update SVG color & toggles
svgFrame.setAttribute('stroke', state.colorHex);
svgMotor.style.opacity = state.hasMotor ? '1' : '0';
svgCanopy.style.opacity = (state.hasCanopy && state.platform === 'nordhavn') ? '1' : '0';
renderGeometry();
}
// Bind Platform Buttons
document.querySelectorAll('#opt-platform .option-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('#opt-platform .option-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
state.platform = btn.dataset.val;
state.platformName = btn.querySelector('.opt-name').textContent;
state.basePrice = parseInt(btn.dataset.price, 10);
state.baseWeight = parseFloat(btn.dataset.weight);
state.payload = btn.dataset.payload;
updateUI();
});
});
// Bind Model Cards shortcut buttons
document.querySelectorAll('.select-model-btn').forEach(btn => {
btn.addEventListener('click', () => {
const targetModel = btn.dataset.model;
const matchingOpt = document.querySelector(`#opt-platform .option-btn[data-val="${targetModel}"]`);
if (matchingOpt) matchingOpt.click();
document.getElementById('configurator').scrollIntoView({ behavior: 'smooth' });
});
});
// Bind Drivetrain Buttons
document.querySelectorAll('#opt-drive .option-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('#opt-drive .option-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
state.driveName = btn.dataset.val;
state.driveDelta = parseInt(btn.dataset.delta, 10);
state.driveWeight = parseFloat(btn.dataset.wdelta);
state.hasMotor = btn.dataset.motor === '1';
updateUI();
});
});
// Bind Color Swatches
document.querySelectorAll('#opt-color .swatch-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('#opt-color .swatch-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
state.colorHex = btn.dataset.color;
state.colorName = btn.dataset.name;
updateUI();
});
});
// Bind Cargo Kit Buttons
document.querySelectorAll('#opt-kit .option-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('#opt-kit .option-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
state.kitName = btn.dataset.val;
state.kitDelta = parseInt(btn.dataset.delta, 10);
state.kitWeight = parseFloat(btn.dataset.wdelta);
state.hasCanopy = btn.dataset.canopy === '1';
updateUI();
});
});
// Form Submission
const form = document.getElementById('build-form');
const successBox = document.getElementById('form-success');
form.addEventListener('submit', function (e) {
e.preventDefault();
successBox.style.display = 'block';
form.querySelector('button[type="submit"]').textContent = 'Build Inquiry Sent ✓';
form.querySelector('button[type="submit"]').disabled = true;
});
updateUI();
})();
</script>
</body>
</html>

