hypeorcode
Network offOpen alone (new tab)

Run details

Model
google/gemini-3.8-flash
Route
Command Code CLI
Reasoning
provider default
Limits
60 min
Date
2 Oct 2026
Time
2 min 45 s
Size
80 kB
Tokens
275,281 in, 28,924 out
List price
$0.35 ($0.825 in / $4.13 out per M)
Paid
Not billed per run (CLI plan)

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). Save it as index.html in the current directory, then stop. Do not ask questions.

Source

80 kB 2,291 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 | Bespoke Cargo Bicycles — Copenhagen</title>
<meta name="description" content="Handcrafted fillet-brazed cargo bicycles built to order in Copenhagen. Columbus Cromor steel, Shimano STEPS e-assist, bespoke cargo bays tailored to your life.">
<style>
  :root {
    --bg: #0f1211;
    --bg-surface: #151917;
    --bg-card: #1b211e;
    --bg-card-hover: #222a26;
    --text-main: #ecefe9;
    --text-muted: #9aa59d;
    --text-dim: #657168;
    --accent: #d2a15c;
    --accent-light: #e5be82;
    --accent-dark: #8c6530;
    --border: #26302a;
    --border-light: #36443c;
    --sage: #758e7f;
    --sage-dim: #2b3931;
    --nordic-red: #c05344;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --font-serif: "Iowan Old Style", "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", Times, serif;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "SF Mono", "Monaco", "Consolas", monospace;
  }

  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
    background-color: var(--bg);
    color: var(--text-main);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
  }

  /* Utility & Typography */
  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 400;
    color: #f7faf5;
    letter-spacing: -0.01em;
  }

  .tagline {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.76rem;
    letter-spacing: 0.22em;
    color: var(--accent);
    margin-bottom: 12px;
    display: inline-block;
  }

  p {
    color: var(--text-muted);
    font-size: 1.02rem;
  }

  a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid transparent;
    font-family: var(--font-mono);
  }

  .btn-primary {
    background: var(--accent);
    color: #121513;
    font-weight: 600;
  }
  .btn-primary:hover {
    background: var(--accent-light);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(210, 161, 92, 0.22);
  }

  .btn-outline {
    background: transparent;
    border-color: var(--border-light);
    color: var(--text-main);
  }
  .btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(210, 161, 92, 0.05);
  }

  /* Header */
  header.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(15, 18, 17, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
  }

  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 78px;
  }

  .brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: rgba(210, 161, 92, 0.08);
  }

  .brand-name {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    font-weight: 500;
    color: #fff;
    line-height: 1.1;
  }

  .brand-sub {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    color: var(--text-dim);
    text-transform: uppercase;
  }

  nav.nav-links {
    display: flex;
    gap: 32px;
    align-items: center;
  }

  nav.nav-links a {
    font-size: 0.86rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
  }
  nav.nav-links a:hover {
    color: var(--accent);
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .batch-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-dim);
    background: rgba(255,255,255,0.03);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
  }

  .pulse-dot {
    width: 7px;
    height: 7px;
    background: #68b888;
    border-radius: 50%;
    box-shadow: 0 0 8px #68b888;
  }

  /* Hero */
  section.hero {
    padding: 80px 0 60px;
    position: relative;
    border-bottom: 1px solid var(--border);
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
  }

  .hero-content h1 {
    font-size: 3.4rem;
    line-height: 1.12;
    margin-bottom: 24px;
    color: #fff;
  }

  .hero-content h1 span.serif-italic {
    font-style: italic;
    color: var(--accent-light);
  }

  .hero-lead {
    font-size: 1.18rem;
    line-height: 1.7;
    margin-bottom: 36px;
    max-width: 540px;
    color: #cbd4ce;
  }

  .hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
  }

  .metric-val {
    font-family: var(--font-serif);
    font-size: 1.9rem;
    color: #fff;
    line-height: 1.2;
  }

  .metric-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    margin-top: 4px;
  }

  .hero-visual {
    position: relative;
    background: radial-gradient(circle at 50% 50%, #1e2622 0%, #131715 80%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
  }

  .spec-stamp {
    position: absolute;
    top: 20px;
    right: 20px;
    border: 1px dashed var(--accent);
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--accent);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    background: rgba(15, 18, 17, 0.8);
  }

  .svg-bike {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 14px 18px rgba(0,0,0,0.5));
  }

  /* Trust Marquee / Pillar Bar */
  .trust-strip {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    padding: 22px 0;
  }

  .trust-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
  }

  .trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .trust-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(210, 161, 92, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 0.9rem;
  }

  .trust-title {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-main);
  }

  .trust-desc {
    font-size: 0.74rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
  }

  /* Interactive Configurator Section */
  section.configurator {
    padding: 96px 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }

  .section-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px;
  }

  .section-header h2 {
    font-size: 2.6rem;
    margin-bottom: 14px;
  }

  .config-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 44px;
    align-items: start;
  }

  .canvas-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 32px;
    position: sticky;
    top: 100px;
  }

  .canvas-stage {
    background: #0d100f;
    border-radius: var(--radius-md);
    padding: 24px 16px;
    position: relative;
    border: 1px solid var(--border);
    margin-bottom: 24px;
  }

  .live-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    padding: 4px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-muted);
  }

  .spec-matrix {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }

  .spec-cell {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    text-align: center;
  }

  .spec-cell-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-dim);
    text-transform: uppercase;
  }

  .spec-cell-val {
    font-size: 0.94rem;
    font-weight: 600;
    color: #fff;
    margin-top: 2px;
  }

  .options-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px;
  }

  .option-group {
    margin-bottom: 32px;
  }

  .option-group-title {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
  }

  .btn-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .choice-card {
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    position: relative;
  }

  .choice-card:hover {
    border-color: var(--border-light);
    background: var(--bg-card-hover);
  }

  .choice-card.active {
    border-color: var(--accent);
    background: rgba(210, 161, 92, 0.08);
  }

  .choice-card.active::after {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 12px;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: bold;
  }

  .choice-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 4px;
  }

  .choice-desc {
    font-size: 0.75rem;
    color: var(--text-dim);
    line-height: 1.35;
  }

  .choice-price {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--accent-light);
    margin-top: 8px;
  }

  /* Color picker */
  .color-swatches {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  .color-swatch-btn {
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 10px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
  }

  .color-swatch-btn:hover {
    border-color: var(--border-light);
  }

  .color-swatch-btn.active {
    border-color: var(--accent);
    background: rgba(210, 161, 92, 0.08);
  }

  .color-pip {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
  }

  .color-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
  }

  /* Price summary card inside configurator */
  .quote-summary {
    background: #0e1210;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-top: 24px;
  }

  .quote-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.86rem;
    color: var(--text-muted);
    margin-bottom: 8px;
  }

  .quote-row.total {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
  }

  .quote-row.total .price-tag {
    font-family: var(--font-serif);
    font-size: 1.55rem;
    color: var(--accent-light);
  }

  .quote-footnote {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-dim);
    margin-top: 12px;
    line-height: 1.4;
  }

  /* Craftsmanship / Philosophy Section */
  section.craft {
    padding: 96px 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
  }

  .craft-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }

  .craft-story h2 {
    font-size: 2.6rem;
    line-height: 1.2;
    margin-bottom: 22px;
  }

  .craft-pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 36px;
  }

  .pillar {
    border-left: 2px solid var(--accent);
    padding-left: 16px;
  }

  .pillar h4 {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 6px;
  }

  .pillar p {
    font-size: 0.85rem;
    color: var(--text-dim);
    line-height: 1.45;
  }

  .workshop-illustration {
    background: #0f1311;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.6);
  }

  /* Engineering / Models Lineup */
  section.models {
    padding: 96px 0;
    border-bottom: 1px solid var(--border);
  }

  .models-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  .model-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease;
    display: flex;
    flex-direction: column;
  }

  .model-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-light);
  }

  .model-head {
    padding: 24px 24px 18px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.015);
  }

  .model-sub {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    color: var(--accent);
    letter-spacing: 0.14em;
  }

  .model-name {
    font-size: 1.6rem;
    color: #fff;
    margin: 4px 0 10px;
  }

  .model-card-art {
    height: 180px;
    background: #0d100e;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-bottom: 1px solid var(--border);
  }

  .model-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
  }

  .model-spec-list {
    list-style: none;
    margin: 18px 0;
    font-size: 0.85rem;
    color: var(--text-muted);
  }

  .model-spec-list li {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px dashed var(--border);
    font-family: var(--font-mono);
    font-size: 0.78rem;
  }

  .model-spec-list li span.val {
    color: #fff;
  }

  .model-price-cta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid var(--border);
  }

  .model-price {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: #fff;
  }

  /* The Build Process (Order Journey) */
  section.process {
    padding: 96px 0;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
  }

  .process-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
    position: relative;
  }

  .process-timeline::before {
    content: "";
    position: absolute;
    top: 36px;
    left: 40px;
    right: 40px;
    height: 1px;
    background: var(--border-light);
    z-index: 1;
  }

  .process-step {
    position: relative;
    z-index: 2;
    background: var(--bg-surface);
    padding: 12px;
  }

  .step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--accent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    margin-bottom: 20px;
  }

  .step-title {
    font-size: 1.15rem;
    color: #fff;
    margin-bottom: 8px;
  }

  .step-desc {
    font-size: 0.85rem;
    color: var(--text-dim);
    line-height: 1.5;
  }

  /* Transparency & Guarantee Section */
  section.guarantee {
    padding: 80px 0;
    border-bottom: 1px solid var(--border);
  }

  .guarantee-box {
    background: radial-gradient(circle at 10% 20%, #1f2723 0%, #141916 90%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 48px;
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 40px;
    align-items: center;
  }

  .guarantee-text h3 {
    font-size: 2rem;
    margin-bottom: 14px;
    color: #fff;
  }

  .guarantee-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
  }

  .guar-item {
    font-size: 0.88rem;
    color: var(--text-muted);
  }

  .guar-item strong {
    color: #fff;
    display: block;
    margin-bottom: 4px;
    font-size: 0.92rem;
  }

  .founders-card {
    background: rgba(15, 18, 17, 0.7);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
  }

  .founders-sig {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-style: italic;
    color: var(--accent-light);
    margin: 14px 0 6px;
  }

  .founders-meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-dim);
  }

  /* Testimonials / Rider Stories */
  section.reviews {
    padding: 96px 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
  }

  .reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  .review-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .review-quote {
    font-family: var(--font-serif);
    font-size: 1.12rem;
    line-height: 1.5;
    color: #e5ece6;
    margin-bottom: 20px;
    position: relative;
  }

  .review-author {
    border-top: 1px solid var(--border);
    padding-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .author-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: #fff;
  }

  .author-location {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-dim);
  }

  .author-badge {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    padding: 3px 8px;
    background: rgba(210, 161, 92, 0.1);
    border: 1px solid rgba(210, 161, 92, 0.25);
    color: var(--accent);
    border-radius: var(--radius-sm);
  }

  /* Consultation Booking Form */
  section.booking {
    padding: 96px 0;
    background: var(--bg);
  }

  .booking-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    max-width: 860px;
    margin: 0 auto;
    overflow: hidden;
  }

  .booking-header {
    padding: 40px 48px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.015);
  }

  .booking-body {
    padding: 48px;
  }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .form-group.full {
    grid-column: span 2;
  }

  label {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
  }

  input, select, textarea {
    background: #0f1311;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.94rem;
    transition: border-color 0.2s;
  }

  input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
  }

  .deposit-terms {
    background: rgba(210, 161, 92, 0.05);
    border: 1px solid rgba(210, 161, 92, 0.2);
    border-radius: var(--radius-sm);
    padding: 16px;
    font-size: 0.82rem;
    color: #c9d5cc;
    margin-bottom: 24px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }

  .deposit-terms svg {
    flex-shrink: 0;
    margin-top: 2px;
  }

  /* Success Modal / Toast */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
  }

  .modal-overlay.active {
    display: flex;
  }

  .modal-box {
    background: var(--bg-surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    max-width: 540px;
    width: 100%;
    padding: 40px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,0.8);
    animation: modalPop 0.25s ease-out;
  }

  @keyframes modalPop {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }

  /* Footer */
  footer.site-footer {
    background: #0a0d0b;
    border-top: 1px solid var(--border);
    padding: 64px 0 32px;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 48px;
  }

  .footer-col h5 {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--accent);
    margin-bottom: 16px;
  }

  .footer-col ul {
    list-style: none;
  }

  .footer-col li {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 10px;
  }

  .footer-col li a:hover {
    color: var(--text-main);
  }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-dim);
  }

  /* Responsive Adjustments */
  @media (max-width: 960px) {
    .hero-grid, .config-layout, .craft-grid, .guarantee-box {
      grid-template-columns: 1fr;
    }
    .models-grid, .reviews-grid, .process-timeline {
      grid-template-columns: 1fr;
    }
    .process-timeline::before {
      display: none;
    }
    .canvas-panel {
      position: static;
    }
    .form-grid {
      grid-template-columns: 1fr;
    }
    .form-group.full {
      grid-column: span 1;
    }
    .footer-grid {
      grid-template-columns: 1fr 1fr;
    }
    .hero-content h1 {
      font-size: 2.6rem;
    }
    nav.nav-links {
      display: none;
    }
  }
</style>
</head>
<body>

  <!-- Header -->
  <header class="site-header">
    <div class="container nav-inner">
      <a href="#" class="brand-logo" aria-label="Lumen Cycles Homepage">
        <div class="brand-mark" aria-hidden="true">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="6" cy="17" r="4"/>
            <circle cx="18" cy="17" r="4"/>
            <path d="M6 17h6l4-8h4"/>
            <path d="M9 17l3-6h-4"/>
            <circle cx="12" cy="7" r="1" fill="currentColor"/>
          </svg>
        </div>
        <div>
          <div class="brand-name">LUMEN CYCLES</div>
          <div class="brand-sub">KØBENHAVN · EST. 2018</div>
        </div>
      </a>

      <nav class="nav-links">
        <a href="#models">The Models</a>
        <a href="#configurator">Build & Price</a>
        <a href="#craft">Craftsmanship</a>
        <a href="#process">Commission Process</a>
        <a href="#workshop">Visit Workshop</a>
      </nav>

      <div class="header-actions">
        <div class="batch-indicator" title="Limited to 36 bespoke builds per calendar year">
          <span class="pulse-dot"></span>
          <span>Batch 2026: 4 slots left</span>
        </div>
        <a href="#configurator" class="btn btn-outline" style="padding: 9px 18px; font-size: 0.78rem;">Configure</a>
      </div>
    </div>
  </header>

  <!-- Hero Section -->
  <section class="hero">
    <div class="container hero-grid">
      <div class="hero-content">
        <span class="tagline">Bespoke Copenhagen Cargo Engineering</span>
        <h1>Cargo bikes built for the next <span class="serif-italic">thirty years</span> of your life.</h1>
        <p class="hero-lead">Hand-brazed from Italian Columbus Cromor steel in our Nørrebro workshop. Tuned to your exact geometry, cargo payload, and daily transit rituals. From €4,100.</p>
        
        <div style="display: flex; gap: 16px; flex-wrap: wrap;">
          <a href="#configurator" class="btn btn-primary">Configure Your Lumen</a>
          <a href="#craft" class="btn btn-outline">Read Workshop Notes</a>
        </div>

        <div class="hero-metrics">
          <div>
            <div class="metric-val">36</div>
            <div class="metric-label">Numbered Builds / Year</div>
          </div>
          <div>
            <div class="metric-val">100%</div>
            <div class="metric-label">Fillet-Brazed Steel</div>
          </div>
          <div>
            <div class="metric-val">10-Yr</div>
            <div class="metric-label">Frame Warranty</div>
          </div>
        </div>
      </div>

      <div class="hero-visual">
        <div class="spec-stamp">Nørrebro Atelier · No. 142</div>
        <!-- High-fidelity SVG of Long-John Cargo Bike -->
        <svg class="svg-bike" viewBox="0 0 880 440">
          <defs>
            <radialGradient id="hubGrad" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stop-color="#e5be82"/>
              <stop offset="100%" stop-color="#4a3b22"/>
            </radialGradient>
            <linearGradient id="frameGrad" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" stop-color="#243329"/>
              <stop offset="100%" stop-color="#3b5243"/>
            </linearGradient>
            <linearGradient id="boxWood" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" stop-color="#a67444"/>
              <stop offset="100%" stop-color="#734d28"/>
            </linearGradient>
          </defs>

          <!-- Ground shadow -->
          <ellipse cx="440" cy="400" rx="390" ry="14" fill="#000000" opacity="0.45" />

          <!-- Rear Wheel (26") -->
          <g id="rear-wheel" transform="translate(180, 310)">
            <circle cx="0" cy="0" r="88" stroke="#333d37" stroke-width="12" fill="none"/>
            <circle cx="0" cy="0" r="82" stroke="#1a201c" stroke-width="2" fill="none"/>
            <circle cx="0" cy="0" r="74" stroke="#d2a15c" stroke-width="1.5" stroke-opacity="0.4" fill="none"/>
            <!-- Spokes -->
            <g stroke="#56635a" stroke-width="1" opacity="0.7">
              <line x1="0" y1="0" x2="74" y2="0"/>
              <line x1="0" y1="0" x2="-74" y2="0"/>
              <line x1="0" y1="0" x2="0" y2="74"/>
              <line x1="0" y1="0" x2="0" y2="-74"/>
              <line x1="0" y1="0" x2="52" y2="52"/>
              <line x1="0" y1="0" x2="-52" y2="52"/>
              <line x1="0" y1="0" x2="52" y2="-52"/>
              <line x1="0" y1="0" x2="-52" y2="-52"/>
              <line x1="0" y1="0" x2="68" y2="28"/>
              <line x1="0" y1="0" x2="-68" y2="-28"/>
              <line x1="0" y1="0" x2="-28" y2="68"/>
              <line x1="0" y1="0" x2="28" y2="-68"/>
            </g>
            <circle cx="0" cy="0" r="16" fill="url(#hubGrad)"/>
            <!-- Shimano Alfine 11 Internals plate -->
            <circle cx="0" cy="0" r="8" fill="#121714"/>
            <!-- Disc Rotor -->
            <circle cx="0" cy="0" r="32" stroke="#8da094" stroke-width="2" stroke-dasharray="6 4" fill="none"/>
          </g>

          <!-- Front Wheel (20") -->
          <g id="front-wheel" transform="translate(730, 328)">
            <circle cx="0" cy="0" r="70" stroke="#333d37" stroke-width="12" fill="none"/>
            <circle cx="0" cy="0" r="64" stroke="#1a201c" stroke-width="2" fill="none"/>
            <circle cx="0" cy="0" r="58" stroke="#d2a15c" stroke-width="1.5" stroke-opacity="0.4" fill="none"/>
            <g stroke="#56635a" stroke-width="1" opacity="0.7">
              <line x1="0" y1="0" x2="58" y2="0"/>
              <line x1="0" y1="0" x2="-58" y2="0"/>
              <line x1="0" y1="0" x2="0" y2="58"/>
              <line x1="0" y1="0" x2="0" y2="-58"/>
              <line x1="0" y1="0" x2="41" y2="41"/>
              <line x1="0" y1="0" x2="-41" y2="41"/>
              <line x1="0" y1="0" x2="41" y2="-41"/>
              <line x1="0" y1="0" x2="-41" y2="-41"/>
            </g>
            <circle cx="0" cy="0" r="14" fill="url(#hubGrad)"/>
            <circle cx="0" cy="0" r="28" stroke="#8da094" stroke-width="2" stroke-dasharray="5 3" fill="none"/>
          </g>

          <!-- Steering Linkage Rod -->
          <path d="M 338 338 L 730 354" stroke="#8da094" stroke-width="4.5" stroke-linecap="round"/>
          <circle cx="338" cy="338" r="4" fill="#d2a15c"/>
          <circle cx="730" cy="354" r="4" fill="#d2a15c"/>

          <!-- Lower Cargo Spine (Twin Gusseted Tubes) -->
          <path d="M 305 328 L 710 328" stroke="#2c3a32" stroke-width="14" stroke-linecap="round"/>
          <path d="M 305 328 L 710 328" stroke="#d2a15c" stroke-width="2" stroke-dasharray="30 18" opacity="0.6"/>

          <!-- Front Fork & Steerer Tower -->
          <path d="M 730 328 L 718 240 L 715 160" stroke="#243329" stroke-width="8" stroke-linecap="round"/>
          <circle cx="718" cy="240" r="8" fill="#1b231e" stroke="#d2a15c" stroke-width="1.5"/>

          <!-- Bespoke Cargo Box: Scandinavian Ash with Brass Hardware -->
          <g id="cargo-box">
            <!-- Box Body -->
            <polygon points="340,314 690,314 695,210 350,210" fill="url(#boxWood)" stroke="#52361b" stroke-width="2"/>
            <!-- Slats -->
            <line x1="344" y1="236" x2="692" y2="236" stroke="#442a13" stroke-width="2"/>
            <line x1="342" y1="262" x2="691" y2="262" stroke="#442a13" stroke-width="2"/>
            <line x1="340" y1="288" x2="690" y2="288" stroke="#442a13" stroke-width="2"/>
            <!-- Brass Rivets / Corner Brackets -->
            <circle cx="355" cy="218" r="3" fill="#d2a15c"/>
            <circle cx="685" cy="218" r="3" fill="#d2a15c"/>
            <circle cx="347" cy="306" r="3" fill="#d2a15c"/>
            <circle cx="683" cy="306" r="3" fill="#d2a15c"/>
            <circle cx="520" cy="218" r="2.5" fill="#d2a15c"/>
            <!-- Stamped Crest -->
            <rect x="495" y="244" width="48" height="28" rx="3" fill="#1b231e" stroke="#d2a15c" stroke-width="1"/>
            <text x="519" y="262" fill="#d2a15c" font-family="'SF Mono', monospace" font-size="7.5" text-anchor="middle" letter-spacing="1">LUMEN</text>
          </g>

          <!-- Rear Frame Triangle & Seat Mast -->
          <!-- Bottom Bracket -->
          <circle cx="305" cy="318" r="14" fill="#141a16" stroke="#d2a15c" stroke-width="2"/>
          <circle cx="305" cy="318" r="6" fill="#a87c3e"/>

          <!-- Chainstays -->
          <path d="M 180 310 L 305 318" stroke="#243329" stroke-width="7" stroke-linecap="round"/>
          <!-- Seatstays -->
          <path d="M 180 310 L 275 190" stroke="#243329" stroke-width="6" stroke-linecap="round"/>
          <!-- Seat Tube -->
          <path d="M 305 318 L 270 170" stroke="#2c3a32" stroke-width="8" stroke-linecap="round"/>
          <!-- Top Tube (Swept Down Nordic Cross) -->
          <path d="M 272 195 L 340 260" stroke="#243329" stroke-width="7" stroke-linecap="round"/>
          <!-- Down Tube / Motor Housing -->
          <path d="M 305 318 L 340 240" stroke="#2c3a32" stroke-width="12" stroke-linecap="round"/>
          
          <!-- Steerer Column for Rider Handlbars -->
          <path d="M 340 240 L 325 125" stroke="#243329" stroke-width="7" stroke-linecap="round"/>
          
          <!-- Brooks Leather Saddle -->
          <path d="M 248 160 C 265 158, 280 156, 295 163 C 285 168, 275 170, 260 170 Z" fill="#6d4626" stroke="#4a2e16" stroke-width="1.5"/>
          <path d="M 268 170 L 270 182" stroke="#8da094" stroke-width="5"/>

          <!-- Chrome Quill Stem & City Swept Handlebars -->
          <path d="M 325 125 L 322 108 L 310 114" stroke="#cdd8d1" stroke-width="5" stroke-linecap="round" fill="none"/>
          <!-- Leather Grips -->
          <rect x="296" y="110" width="16" height="6" rx="2" fill="#6d4626"/>

          <!-- Front Headlight: Busch + Müller Vintage Brass -->
          <polygon points="710,175 735,168 735,186" fill="#1b231e" stroke="#d2a15c" stroke-width="1.5"/>
          <circle cx="735" cy="177" r="9" fill="#f5eedb" opacity="0.85"/>
          <line x1="742" y1="177" x2="810" y2="177" stroke="#fae9b5" stroke-width="8" stroke-linecap="round" opacity="0.15"/>

          <!-- Crank & Gates Carbon Drive Belt -->
          <circle cx="305" cy="318" r="28" stroke="#222b26" stroke-width="3" fill="#151b18"/>
          <path d="M 180 310 L 305 318" stroke="#111613" stroke-width="4" stroke-dasharray="5 3"/>
          <line x1="305" y1="318" x2="330" y2="350" stroke="#9bb1a4" stroke-width="4.5" stroke-linecap="round"/>
          <rect x="325" y="347" width="16" height="8" rx="2" fill="#2d3831"/>

          <!-- Front Cargo Guard / Fender -->
          <path d="M 680 325 A 64 64 0 0 1 785 285" fill="none" stroke="#2c3a32" stroke-width="4" stroke-linecap="round"/>
          <path d="M 125 320 A 82 82 0 0 1 240 240" fill="none" stroke="#2c3a32" stroke-width="4" stroke-linecap="round"/>
        </svg>

        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-dim);">
          <span>FRAME: COLUMBUS CROMOR BIAXIAL</span>
          <span>WEIGHT: 21.8 KG (NON-ELECTRIC)</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Trust Verification Bar -->
  <div class="trust-strip">
    <div class="container trust-items">
      <div class="trust-item">
        <div class="trust-icon">⚖</div>
        <div>
          <div class="trust-title">Numbered Atelier Builds</div>
          <div class="trust-desc">Only 36 bicycles constructed each year</div>
        </div>
      </div>
      <div class="trust-item">
        <div class="trust-icon">🛡</div>
        <div>
          <div class="trust-title">10-Year Frame Integrity</div>
          <div class="trust-desc">Columbus steel with anti-corrosion dipping</div>
        </div>
      </div>
      <div class="trust-item">
        <div class="trust-icon">⚙</div>
        <div>
          <div class="trust-title">Direct Workshop Fit</div>
          <div class="trust-desc">Tailored stem, cockpit & cargo geometry</div>
        </div>
      </div>
      <div class="trust-item">
        <div class="trust-icon">✦</div>
        <div>
          <div class="trust-title">Deposit Protection</div>
          <div class="trust-desc">Escrow milestone structure in Danish Kroner / EUR</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Interactive Bike Configurator -->
  <section class="configurator" id="configurator">
    <div class="container">
      <div class="section-header">
        <span class="tagline">Personal Commission Configurator</span>
        <h2>Build Your Spec. Inspect Every Euro.</h2>
        <p>Choose your drive platform, front bed architecture, component groups, and finish. Your build estimate updates live with real lead times.</p>
      </div>

      <div class="config-layout">
        <!-- Sticky Preview & Spec Matrix -->
        <div class="canvas-panel">
          <div class="canvas-stage">
            <span class="live-badge" id="preview-badge">LIVE SPEC: NØRREBRO COMMUTER</span>
            <svg id="config-svg" viewBox="0 0 880 440" style="width: 100%; height: auto;">
              <!-- Dynamic Bike preview injected/updated via JS -->
              <ellipse cx="440" cy="395" rx="380" ry="12" fill="#000" opacity="0.4" />
              <!-- Rear Wheel -->
              <g transform="translate(180, 310)">
                <circle cx="0" cy="0" r="86" stroke="#2e3832" stroke-width="12" fill="none"/>
                <circle cx="0" cy="0" r="74" id="rim-rear" stroke="#d2a15c" stroke-width="1.5" stroke-opacity="0.5" fill="none"/>
                <circle cx="0" cy="0" r="16" fill="#8c6530"/>
                <!-- Spokes -->
                <line x1="-70" y1="0" x2="70" y2="0" stroke="#526156"/>
                <line x1="0" y1="-70" x2="0" y2="70" stroke="#526156"/>
                <line x1="-50" y1="-50" x2="50" y2="50" stroke="#526156"/>
                <line x1="-50" y1="50" x2="50" y2="-50" stroke="#526156"/>
              </g>
              <!-- Front Wheel -->
              <g transform="translate(730, 328)">
                <circle cx="0" cy="0" r="68" stroke="#2e3832" stroke-width="12" fill="none"/>
                <circle cx="0" cy="0" r="58" id="rim-front" stroke="#d2a15c" stroke-width="1.5" stroke-opacity="0.5" fill="none"/>
                <circle cx="0" cy="0" r="14" fill="#8c6530"/>
                <line x1="-55" y1="0" x2="55" y2="0" stroke="#526156"/>
                <line x1="0" y1="-55" x2="0" y2="55" stroke="#526156"/>
                <line x1="-40" y1="-40" x2="40" y2="40" stroke="#526156"/>
                <line x1="-40" y1="40" x2="40" y2="-40" stroke="#526156"/>
              </g>
              <!-- Main Spine -->
              <path d="M 305 328 L 710 328" id="bike-spine" stroke="#222e26" stroke-width="15" stroke-linecap="round"/>
              <!-- Cargo Bay Component -->
              <g id="box-visual-group">
                <!-- Controlled by JS selection -->
              </g>
              <!-- Frame Tubes (Dynamic Color) -->
              <g id="frame-tubes-group">
                <path d="M 180 310 L 305 318" id="frame-chainstay" stroke="#28392f" stroke-width="8" stroke-linecap="round"/>
                <path d="M 180 310 L 275 190" id="frame-seatstay" stroke="#28392f" stroke-width="7" stroke-linecap="round"/>
                <path d="M 305 318 L 270 170" id="frame-seattube" stroke="#28392f" stroke-width="9" stroke-linecap="round"/>
                <path d="M 272 195 L 340 260" id="frame-toptube" stroke="#28392f" stroke-width="8" stroke-linecap="round"/>
                <path d="M 305 318 L 340 240" id="frame-downtube" stroke="#28392f" stroke-width="12" stroke-linecap="round"/>
                <path d="M 340 240 L 325 125" id="frame-headtube" stroke="#28392f" stroke-width="8" stroke-linecap="round"/>
                <path d="M 730 328 L 718 240 L 715 160" id="frame-fork" stroke="#28392f" stroke-width="9" stroke-linecap="round"/>
              </g>
              <!-- Motor indicator if electric -->
              <g id="motor-visual" opacity="0">
                <circle cx="305" cy="318" r="22" fill="#1b211e" stroke="#68b888" stroke-width="2"/>
                <text x="305" y="322" font-family="'SF Mono', monospace" font-size="7" fill="#68b888" text-anchor="middle">EP8</text>
              </g>
              <!-- Linkage -->
              <path d="M 338 338 L 730 354" stroke="#718377" stroke-width="4"/>
              <!-- Saddle & Grips -->
              <path d="M 248 160 C 265 158, 280 156, 295 163 C 285 168, 275 170, 260 170 Z" id="saddle-art" fill="#6d4626"/>
              <path d="M 325 125 L 322 108 L 310 114" stroke="#cdd8d1" stroke-width="5" stroke-linecap="round" fill="none"/>
              <rect x="296" y="110" width="16" height="6" rx="2" id="grip-art" fill="#6d4626"/>
            </svg>
          </div>

          <div class="spec-matrix">
            <div class="spec-cell">
              <div class="spec-cell-label">Total Weight</div>
              <div class="spec-cell-val" id="spec-weight">22.4 kg</div>
            </div>
            <div class="spec-cell">
              <div class="spec-cell-label">Max Cargo</div>
              <div class="spec-cell-val" id="spec-capacity">160 kg</div>
            </div>
            <div class="spec-cell">
              <div class="spec-cell-label">Estimated Range</div>
              <div class="spec-cell-val" id="spec-range">Muscular</div>
            </div>
            <div class="spec-cell">
              <div class="spec-cell-label">Production Slot</div>
              <div class="spec-cell-val" id="spec-slot">Nov 2026</div>
            </div>
          </div>

          <div class="quote-summary">
            <div class="quote-row">
              <span>Columbus Cromor Frameset (Fillet Brazed)</span>
              <span>€2,450</span>
            </div>
            <div class="quote-row" id="row-drive">
              <span>Drive: Muscular Pure Mech (Shimano XT 11s)</span>
              <span>€750</span>
            </div>
            <div class="quote-row" id="row-cargo">
              <span>Cargo Bay: Steam-Bent Danish Ash (Two Kids)</span>
              <span>€650</span>
            </div>
            <div class="quote-row" id="row-finish">
              <span>Finish: Forest Moss Metallic & Waxed Brass</span>
              <span>€250</span>
            </div>
            <div class="quote-row total">
              <span>Total Commission (inc. 25% DK Moms / VAT)</span>
              <span class="price-tag" id="summary-total">€4,100</span>
            </div>
            <div class="quote-footnote">
              * 30% deposit (€1,230) secures fabrication tubing & queue slot. Balance upon pre-delivery inspection & test-ride in Copenhagen or insured EU crate dispatch.
            </div>
          </div>
        </div>

        <!-- Interactive Options -->
        <div class="options-panel">
          <!-- Step 1: Drive System -->
          <div class="option-group">
            <div class="option-group-title">
              <span>1. Drive Platform</span>
              <span id="title-drive-val">Muscular Pure Mech</span>
            </div>
            <div class="btn-choice-grid">
              <div class="choice-card active" onclick="selectDrive('pure', 750, 'Muscular Pure Mech (Shimano XT 11s)', '22.4 kg', 'Muscular')">
                <div class="choice-name">Pure Mechanical</div>
                <div class="choice-desc">Gates CDX Belt + Shimano Alfine 11 internal hub. Pure human power, ultralight, zero charging maintenance.</div>
                <div class="choice-price">Included in base (€750 group)</div>
              </div>
              <div class="choice-card" onclick="selectDrive('shimano', 1950, 'Shimano EP8 Cargo (85Nm, 630Wh)', '27.8 kg', '85 - 110 km')">
                <div class="choice-name">Shimano EP8 Cargo</div>
                <div class="choice-desc">85Nm high-torque mid-motor, 630Wh internal frame-battery, silent Di2 electronic automatic hub shifting.</div>
                <div class="choice-price">+ €1,200</div>
              </div>
            </div>
          </div>

          <!-- Step 2: Cargo Bed Architecture -->
          <div class="option-group">
            <div class="option-group-title">
              <span>2. Cargo Front Bed</span>
              <span id="title-cargo-val">Ash Wood Family Box</span>
            </div>
            <div class="btn-choice-grid">
              <div class="choice-card active" onclick="selectCargo('ash', 650, 'Steam-Bent Danish Ash (Two Kids)', '160 kg')">
                <div class="choice-name">Ash Wood Family Box</div>
                <div class="choice-desc">Local Danish ash, marine-varnished with 2 padded children's harnesses and rain-cover mounts.</div>
                <div class="choice-price">Standard Option (€650)</div>
              </div>
              <div class="choice-card" onclick="selectCargo('flatbed', 400, 'Aircraft Aluminum Flatbed Deck', '185 kg')">
                <div class="choice-name">Commercial Flatbed</div>
                <div class="choice-desc">T-track slotted 6061 alloy floor with anchor eyelets for Euroboxes, pelican cases, or bespoke crates.</div>
                <div class="choice-price">- €250 (Offset)</div>
              </div>
              <div class="choice-card" onclick="selectCargo('canopy', 980, 'Weatherproof Cordura Canopy Cab', '160 kg')">
                <div class="choice-name">Nordic All-Weather Cab</div>
                <div class="choice-desc">High-clearance German Cordura canopy with panoramic UV windows, rollable sides, and integrated heater sleeve.</div>
                <div class="choice-price">+ €330</div>
              </div>
              <div class="choice-card" onclick="selectCargo('courier', 520, 'Open Cordura Soft-Wall Basket', '150 kg')">
                <div class="choice-name">Courier Soft-Basket</div>
                <div class="choice-desc">Reinforced ballistic nylon wall system, fast-cinch strap, side bottle sleeves, 4.2kg ultra-low tare weight.</div>
                <div class="choice-price">- €130</div>
              </div>
            </div>
          </div>

          <!-- Step 3: Colorway & Steel Patina -->
          <div class="option-group">
            <div class="option-group-title">
              <span>3. Atelier Color & Coating</span>
              <span id="title-color-val">Forest Moss</span>
            </div>
            <div class="color-swatches">
              <button type="button" class="color-swatch-btn active" onclick="selectColor('#28392f', 'Forest Moss Metallic', 250)">
                <div class="color-pip" style="background: #28392f;"></div>
                <div class="color-label">Forest Moss</div>
              </button>
              <button type="button" class="color-swatch-btn" onclick="selectColor('#1e242a', 'Baltic Deep Navy', 250)">
                <div class="color-pip" style="background: #1e242a;"></div>
                <div class="color-label">Baltic Navy</div>
              </button>
              <button type="button" class="color-swatch-btn" onclick="selectColor('#8c4436', 'Danish Brick Rust', 250)">
                <div class="color-pip" style="background: #8c4436;"></div>
                <div class="color-label">Brick Rust</div>
              </button>
              <button type="button" class="color-swatch-btn" onclick="selectColor('#d0c8b8', 'Øresund Chalk', 320)">
                <div class="color-pip" style="background: #d0c8b8;"></div>
                <div class="color-label">Chalk Ceramic</div>
              </button>
            </div>
          </div>

          <!-- Step 4: Leather & Touchpoints -->
          <div class="option-group">
            <div class="option-group-title">
              <span>4. Brooks England Leatherwork</span>
              <span id="title-leather-val">Aged Honey Leather</span>
            </div>
            <div class="btn-choice-grid">
              <div class="choice-card active" onclick="selectLeather('#6d4626', 'Aged Honey Leather')">
                <div class="choice-name">Honey Leather (B17)</div>
                <div class="choice-desc">Brooks B17 hand-hammered copper rivets with matching slotted handlebar grips.</div>
              </div>
              <div class="choice-card" onclick="selectLeather('#1b1d1c', 'Obsidian Black Cambium')">
                <div class="choice-name">All-Weather Cambium</div>
                <div class="choice-desc">Vulcanized natural rubber and organic cotton top. Waterproof and zero maintenance in salt-slush.</div>
              </div>
            </div>
          </div>

          <div style="margin-top: 36px;">
            <a href="#consultation" class="btn btn-primary" style="width: 100%; padding: 18px;" onclick="prefillBooking()">
              Reserve This Exact Specification (€1,230 Deposit)
            </a>
            <div style="text-align: center; margin-top: 12px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim);">
              No payment charged today. We verify dimensions with you first.
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Craftsmanship / Engineering Pillars -->
  <section class="craft" id="craft">
    <div class="container craft-grid">
      <div class="craft-story">
        <span class="tagline">Materials & Metallurgy</span>
        <h2>Why we braze in steel, not weld in aluminum.</h2>
        <p>Mass-market cargo bikes rely on oversized aluminum extrusions that fatigue and crack under heavy load cycles on cobblestone roads. Aluminum frames cannot be repaired without destroying heat treatment.</p>
        <p style="margin-top: 14px;">Every Lumen is hand-fillet brazed using 45% silver rod and custom-drawn Italian Columbus Cromor double-butted chromoly tubing. The bronze fillets dissipate road vibration smoothly into the frame lattice, yielding that legendary damp "magic carpet" ride feeling while remaining infinitely repairable for generations.</p>

        <div class="craft-pillars">
          <div class="pillar">
            <h4>Biaxial Stiffener Gusset</h4>
            <p>Our patented twin-tube central truss eliminates the frame twist common in long-tail and box cargo frames under 120kg payload.</p>
          </div>
          <div class="pillar">
            <h4>Sealed Cable Routing</h4>
            <p>Internal copper sleeve liners ensure brake hydraulics and shifting cables never freeze during Scandinavian winter sub-zero slush.</p>
          </div>
          <div class="pillar">
            <h4>Zero-Maintenance Steering</h4>
            <p>Aircraft-grade spherical rod ends with needle thrust bearings provide zero-slop steering feedback even after 40,000 kilometers.</p>
          </div>
          <div class="pillar">
            <h4>Hot Cathode E-Coat</h4>
            <p>Every frame is submerged in an internal electrophoretic anti-rust bath prior to 3-stage powder coating and hand-pinstriping.</p>
          </div>
        </div>
      </div>

      <div class="workshop-illustration">
        <!-- SVG Workshop Technical Blueprint -->
        <svg viewBox="0 0 500 420" style="width:100%; height:auto;">
          <!-- Grid Background -->
          <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#1d2621" stroke-width="0.8"/>
          </pattern>
          <rect width="500" height="420" fill="url(#grid)" />

          <!-- Blueprint Schematics -->
          <g stroke="#758e7f" stroke-width="1.2" fill="none">
            <!-- Frame Lines -->
            <path d="M 60 300 L 170 300 L 420 300" stroke-dasharray="4 2"/>
            <circle cx="170" cy="300" r="18" stroke="#d2a15c" stroke-width="2"/>
            <!-- Fillet brazing joint detail callout -->
            <circle cx="210" cy="180" r="48" stroke="#d2a15c" stroke-width="1.5" stroke-dasharray="2 2"/>
            <path d="M 190 220 L 230 140" stroke="#d2a15c" stroke-width="12" stroke-linecap="round"/>
            <path d="M 170 170 L 250 190" stroke="#d2a15c" stroke-width="10" stroke-linecap="round"/>
            <!-- Bronze Fillet Accent -->
            <path d="M 200 175 Q 210 180 220 185" stroke="#e5be82" stroke-width="6" stroke-linecap="round"/>

            <!-- Annotation lines -->
            <line x1="250" y1="150" x2="330" y2="110" stroke="#d2a15c"/>
            <line x1="330" y1="110" x2="440" y2="110" stroke="#d2a15c"/>
          </g>

          <text x="335" y="102" fill="#d2a15c" font-family="'SF Mono', monospace" font-size="9" letter-spacing="1">FILLET 45% AG BRONZE JOINT</text>
          <text x="335" y="124" fill="#9aa59d" font-family="'SF Mono', monospace" font-size="8">Tension rated to 780 MPa</text>
          <text x="335" y="138" fill="#9aa59d" font-family="'SF Mono', monospace" font-size="8">Zero crystalline heat embrittlement</text>

          <!-- Headtube detail -->
          <circle cx="390" cy="270" r="32" stroke="#36443c" stroke-width="1"/>
          <line x1="390" y1="230" x2="390" y2="310" stroke="#8da094" stroke-width="2"/>
          <text x="390" y="335" fill="#758e7f" font-family="'SF Mono', monospace" font-size="8" text-anchor="middle">STEERING AXIS: 69.5° STABLE</text>

          <!-- Workshop Stamp -->
          <rect x="30" y="360" width="160" height="36" fill="#141916" stroke="#26302a"/>
          <text x="40" y="376" fill="#ecefe9" font-family="'SF Mono', monospace" font-size="8" font-weight="bold">LUMEN VERKSTED NO. 8</text>
          <text x="40" y="388" fill="#657168" font-family="'SF Mono', monospace" font-size="7">RAVNSBORGGADE 14, KBH N</text>
        </svg>
      </div>
    </div>
  </section>

  <!-- Complete Models Lineup -->
  <section class="models" id="models">
    <div class="container">
      <div class="section-header">
        <span class="tagline">Production Geometry Families</span>
        <h2>Three Architectures. Tailored to Purpose.</h2>
        <p>Each chassis shares our signature Columbus steel frame foundation, but is proportioned specifically for cargo geometry, wheelbase dynamics, and city maneuverability.</p>
      </div>

      <div class="models-grid">
        <!-- Model 1: Fjord Long-John -->
        <div class="model-card">
          <div class="model-head">
            <span class="model-sub">Classic Long-John</span>
            <h3 class="model-name">The Fjord</h3>
            <p>Our flagship front-loader. Designed for carrying two young children plus groceries, or up to 160 kg of industrial cargo with ultra-low gravity.</p>
          </div>
          <div class="model-card-art">
            <svg viewBox="0 0 260 110" style="width: 100%; height: auto;">
              <!-- Mini schematic of Fjord -->
              <circle cx="40" cy="75" r="22" stroke="#526156" stroke-width="3" fill="none"/>
              <circle cx="220" cy="80" r="17" stroke="#526156" stroke-width="3" fill="none"/>
              <path d="M 40 75 L 85 75 L 210 80" stroke="#758e7f" stroke-width="3.5"/>
              <path d="M 85 75 L 75 35 L 50 35" stroke="#758e7f" stroke-width="3"/>
              <polygon points="95,72 200,72 205,45 100,45" fill="#a67444" opacity="0.8"/>
            </svg>
          </div>
          <div class="model-body">
            <ul class="model-spec-list">
              <li><span>Platform Length</span><span class="val">2,600 mm</span></li>
              <li><span>Box Capacity</span><span class="val">220 Liters</span></li>
              <li><span>Payload Rating</span><span class="val">180 kg total</span></li>
              <li><span>Wheel Configuration</span><span class="val">26" Rear / 20" Front</span></li>
              <li><span>Brakes</span><span class="val">Magura MT5 4-Piston</span></li>
            </ul>
            <div class="model-price-cta">
              <div>
                <div style="font-size: 0.7rem; color: var(--text-dim); font-family: var(--font-mono);">STARTING COMMISSION</div>
                <div class="model-price">€4,100</div>
              </div>
              <a href="#configurator" class="btn btn-outline" style="padding: 8px 14px; font-size: 0.74rem;">Configure</a>
            </div>
          </div>
        </div>

        <!-- Model 2: Torv Short-John -->
        <div class="model-card">
          <div class="model-head">
            <span class="model-sub">Agile Urban Transporter</span>
            <h3 class="model-name">The Torv</h3>
            <p>Compact front-loader engineered for dense historic city apartments, tight courtyards, elevator storage, and standard Copenhagen train cars.</p>
          </div>
          <div class="model-card-art">
            <svg viewBox="0 0 260 110" style="width: 100%; height: auto;">
              <!-- Mini schematic of Torv -->
              <circle cx="50" cy="75" r="22" stroke="#526156" stroke-width="3" fill="none"/>
              <circle cx="190" cy="80" r="17" stroke="#526156" stroke-width="3" fill="none"/>
              <path d="M 50 75 L 90 75 L 180 80" stroke="#d2a15c" stroke-width="3.5"/>
              <path d="M 90 75 L 80 35 L 58 35" stroke="#d2a15c" stroke-width="3"/>
              <polygon points="100,72 175,72 178,50 105,50" fill="#36443c" opacity="0.8"/>
            </svg>
          </div>
          <div class="model-body">
            <ul class="model-spec-list">
              <li><span>Platform Length</span><span class="val">2,150 mm (Compact)</span></li>
              <li><span>Box Capacity</span><span class="val">130 Liters</span></li>
              <li><span>Payload Rating</span><span class="val">140 kg total</span></li>
              <li><span>Wheel Configuration</span><span class="val">24" Rear / 20" Front</span></li>
              <li><span>Brakes</span><span class="val">Magura MT5 4-Piston</span></li>
            </ul>
            <div class="model-price-cta">
              <div>
                <div style="font-size: 0.7rem; color: var(--text-dim); font-family: var(--font-mono);">STARTING COMMISSION</div>
                <div class="model-price">€3,850</div>
              </div>
              <a href="#configurator" class="btn btn-outline" style="padding: 8px 14px; font-size: 0.74rem;">Configure</a>
            </div>
          </div>
        </div>

        <!-- Model 3: Havn Heavy Cargo -->
        <div class="model-card">
          <div class="model-head">
            <span class="model-sub">Industrial Delivery Platform</span>
            <h3 class="model-name">The Havn</h3>
            <p>Engineered for urban logistics, micro-freight, tradespeople, and courier enterprises replacing diesel delivery vans in low-emission zones.</p>
          </div>
          <div class="model-card-art">
            <svg viewBox="0 0 260 110" style="width: 100%; height: auto;">
              <!-- Mini schematic of Havn -->
              <circle cx="35" cy="75" r="22" stroke="#526156" stroke-width="3" fill="none"/>
              <circle cx="230" cy="80" r="17" stroke="#526156" stroke-width="3" fill="none"/>
              <path d="M 35 75 L 80 75 L 220 80" stroke="#758e7f" stroke-width="4"/>
              <rect x="90" y="35" width="125" height="42" rx="3" fill="#1b211e" stroke="#d2a15c" stroke-width="1.5"/>
            </svg>
          </div>
          <div class="model-body">
            <ul class="model-spec-list">
              <li><span>Platform Length</span><span class="val">2,850 mm (Extended)</span></li>
              <li><span>Box Capacity</span><span class="val">380 Liters (Lockable)</span></li>
              <li><span>Payload Rating</span><span class="val">220 kg total</span></li>
              <li><span>Motor System</span><span class="val">Shimano EP8-Cargo Heavy</span></li>
              <li><span>Dual Battery</span><span class="val">1,260 Wh Available</span></li>
            </ul>
            <div class="model-price-cta">
              <div>
                <div style="font-size: 0.7rem; color: var(--text-dim); font-family: var(--font-mono);">STARTING COMMISSION</div>
                <div class="model-price">€4,950</div>
              </div>
              <a href="#configurator" class="btn btn-outline" style="padding: 8px 14px; font-size: 0.74rem;">Configure</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Commission Process Timeline -->
  <section class="process" id="process">
    <div class="container">
      <div class="section-header">
        <span class="tagline">From Order to Copenhagen Cobblestones</span>
        <h2>How We Build Your Bicycle</h2>
        <p>Commissioning a €4,000 custom vehicle requires complete visibility. Here is the structured four-stage pathway every frame undergoes in our atelier.</p>
      </div>

      <div class="process-timeline">
        <div class="process-step">
          <div class="step-number">01</div>
          <h4 class="step-title">Ergonomic Consultation</h4>
          <p class="step-desc">We review your inseam, shoulder reach, cargo requirements (child ages, dog harness, tool crates), and typical elevation gradients.</p>
        </div>

        <div class="process-step">
          <div class="step-number">02</div>
          <h4 class="step-title">Jig Fixturing & Miter</h4>
          <p class="step-desc">Tubes are hand-coped on milling fixtures and aligned on our Marchetti frame jig with laser verification down to 0.2mm tolerance.</p>
        </div>

        <div class="process-step">
          <div class="step-number">03</div>
          <h4 class="step-title">Brazing & Woodcraft</h4>
          <p class="step-desc">Silver fillet brazing by master framebuilder, followed by ash steam-bending, anti-corrosive primer dip, and powder coating.</p>
        </div>

        <div class="process-step">
          <div class="step-number">04</div>
          <h4 class="step-title">Shake-Down & Handover</h4>
          <p class="step-desc">50-kilometer test shakedown around Copenhagen harbor. Handover at our shop with espresso, or secured wooden crate dispatch across the EU.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Guarantee & Financial Security -->
  <section class="guarantee">
    <div class="container">
      <div class="guarantee-box">
        <div class="guarantee-text">
          <span class="tagline" style="color: var(--accent-light);">Financial Trust & Integrity</span>
          <h3>Your 4,000 euro investment is fully protected.</h3>
          <p>We are a registered Danish enterprise with an open atelier on Ravnsborggade. We do not gamble with customer cash flow. Every euro of your deposit is ring-fenced strictly for your bike’s raw steel, motor unit, and wheelset components.</p>
          
          <div class="guarantee-points">
            <div class="guar-item">
              <strong>14-Day Post-Delivery Buyback</strong>
              If your daily commute or family transport needs don’t match the bike, we buy it back minus fair wear and tear.
            </div>
            <div class="guar-item">
              <strong>10-Year Frame Replacement</strong>
              Guaranteed frame replacement against weld or brazing defects anywhere in the European Union.
            </div>
            <div class="guar-item">
              <strong>Transparent Build Diary</strong>
              Weekly high-resolution workshop photos of your specific frame serial number on the brazing table.
            </div>
            <div class="guar-item">
              <strong>Insured Dedicated Freight</strong>
              Dispatched fully assembled in reusable Baltic birch shipping crates with no disassembly required.
            </div>
          </div>
        </div>

        <div class="founders-card">
          <div style="width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--accent); margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; background: #19211c; color: var(--accent); font-family: var(--font-serif); font-size: 1.4rem;">
            LK
          </div>
          <div style="font-size: 0.96rem; font-weight: 600; color: #fff;">Lasse & Katrine Lindqvist</div>
          <div class="founders-meta">Co-Founders & Master Framebuilders</div>
          <div class="founders-sig">Lasse Lindqvist</div>
          <p style="font-size: 0.78rem; color: var(--text-muted); margin-top: 10px; line-height: 1.4;">
            "We build bicycles for parents who ride through January blizzards on Queen Louise's Bridge. If our frame ever lets you down, we fix it ourselves."
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- Rider Testimonials / Provenance -->
  <section class="reviews">
    <div class="container">
      <div class="section-header">
        <span class="tagline">Owners in the Wild</span>
        <h2>Over 400,000 km ridden across Europe.</h2>
        <p>From Copenhagen preschool runs to Munich architectural studios, here is what daily cargo life looks like after five winters.</p>
      </div>

      <div class="reviews-grid">
        <div class="review-card">
          <div class="review-quote">
            "Before spending €4,300 with Lumen, I was considering a factory bakfiets. The difference in ride quality is like comparing a tailored wool coat to a plastic rain poncho. The steel absorbs train track ruts like nothing else."
          </div>
          <div class="review-author">
            <div>
              <div class="author-name">Dr. Henrik Vestergaard</div>
              <div class="author-location">Nørrebro, Copenhagen · 28,000 km</div>
            </div>
            <span class="author-badge">Fjord No. 048</span>
          </div>
        </div>

        <div class="review-card">
          <div class="review-quote">
            "I haul photographic lighting gear and tripods across Stockholm cobbles. The custom flatbed deck has saved my spine. Four years in, zero mechanical issues besides replacing brake pads. Worth every crown."
          </div>
          <div class="review-author">
            <div>
              <div class="author-name">Astrid Lindgren-Holm</div>
              <div class="author-location">Södermalm, Stockholm · 19,400 km</div>
            </div>
            <span class="author-badge">Torv No. 091</span>
          </div>
        </div>

        <div class="review-card">
          <div class="review-quote">
            "We transferred our €1,200 deposit with nervous excitement. Receiving the weekly photo updates of Lasse brazing our bottom bracket tube gave us immense confidence. Outstanding customer service."
          </div>
          <div class="review-author">
            <div>
              <div class="author-name">Marcus & Sophie Weber</div>
              <div class="author-location">Kreuzberg, Berlin · 14,200 km</div>
            </div>
            <span class="author-badge">Fjord No. 114</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Workshop Visit & Booking Section -->
  <section class="booking" id="consultation">
    <div class="container">
      <div class="booking-card" id="workshop">
        <div class="booking-header">
          <span class="tagline">Copenhagen Atelier & Commission Queue</span>
          <h2 style="font-size: 2.2rem; margin-top: 4px;">Book a Build Consultation or Test Ride</h2>
          <p style="margin-top: 8px; font-size: 0.95rem;">Visit our workshop for espresso and an extended harbor test-ride, or arrange an in-depth video consultation from anywhere in Europe.</p>
        </div>

        <div class="booking-body">
          <form id="order-form" onsubmit="handleFormSubmit(event)">
            <div class="form-grid">
              <div class="form-group">
                <label for="full-name">Full Name *</label>
                <input type="text" id="full-name" required placeholder="e.g. Frederik Møller">
              </div>

              <div class="form-group">
                <label for="email">Email Address *</label>
                <input type="email" id="email" required placeholder="frederik@example.dk">
              </div>

              <div class="form-group">
                <label for="city">Location / City *</label>
                <input type="text" id="city" required placeholder="e.g. Copenhagen, Hamburg, Amsterdam">
              </div>

              <div class="form-group">
                <label for="model-interest">Model Selection</label>
                <select id="model-interest">
                  <option value="fjord">The Fjord (Classic Front-Loader) — from €4,100</option>
                  <option value="torv">The Torv (Compact Urban) — from €3,850</option>
                  <option value="havn">The Havn (Heavy Commercial) — from €4,950</option>
                </select>
              </div>

              <div class="form-group">
                <label for="drive-pref">Drive Platform Preference</label>
                <select id="drive-pref">
                  <option value="pure">Mechanical / Gates Belt (Non-Electric)</option>
                  <option value="electric" selected>Shimano EP8 Cargo Electric Assist</option>
                </select>
              </div>

              <div class="form-group">
                <label for="intended-use">Primary Cargo Use</label>
                <select id="intended-use">
                  <option value="kids">Two Children + Daily School Runs</option>
                  <option value="commercial">Commercial Freight / Professional Cargo</option>
                  <option value="mixed">Mixed Family Transport & Dog</option>
                  <option value="touring">Long-Distance Touring & Camping</option>
                </select>
              </div>

              <div class="form-group full">
                <label for="notes">Rider Heights & Custom Requests (Optional)</label>
                <textarea id="notes" rows="3" placeholder="Tell us about the rider height(s), special storage constraints, or custom rack needs..."></textarea>
              </div>
            </div>

            <div class="deposit-terms">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#d2a15c" stroke-width="2">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
              </svg>
              <div>
                <strong>Deposit Protection Commitment:</strong> Submitting this inquiry locks your position in the 2026 production batch for 14 calendar days without financial obligation. We provide full technical drawings and quote breakdown before any formal payment.
              </div>
            </div>

            <button type="submit" class="btn btn-primary" style="width: 100%; padding: 18px; font-size: 0.95rem;">
              Submit Commission Inquiry · Batch 2026
            </button>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- Confirmation Modal -->
  <div class="modal-overlay" id="success-modal">
    <div class="modal-box">
      <div style="width: 56px; height: 56px; border-radius: 50%; background: rgba(104, 184, 136, 0.15); color: #68b888; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 1.6rem; border: 1px solid #68b888;">
        ✓
      </div>
      <h3 style="font-size: 1.8rem; margin-bottom: 8px;">Tak for your inquiry.</h3>
      <p style="font-size: 0.95rem; color: var(--text-muted); margin-bottom: 20px;">
        We have reserved your place in our 2026 build ledger. Lasse Lindqvist will personally review your ergonomics and respond within 24 workshop hours with CAD geometry sketches and invoice schedule.
      </p>
      <div style="background: #0f1311; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); margin-bottom: 24px; text-align: left;">
        <div>LEDGER REFERENCE: <span id="modal-ref">LM-2026-884</span></div>
        <div>ESTIMATED DELIVERY: NOV 2026</div>
        <div>WORKSHOP LOCATION: NØRREBRO, KBH</div>
      </div>
      <button type="button" class="btn btn-outline" style="width: 100%;" onclick="closeModal()">
        Return to Workshop Overview
      </button>
    </div>
  </div>

  <!-- Footer -->
  <footer class="site-footer">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-col">
          <div class="brand-name" style="margin-bottom: 10px;">LUMEN CYCLES</div>
          <p style="font-size: 0.85rem; line-height: 1.6; max-width: 320px;">
            A bespoke framebuilding atelier dedicated to handcrafted fillet-brazed steel cargo bicycles. Built in Copenhagen to withstand thirty Scandinavian winters.
          </p>
          <div style="margin-top: 16px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim);">
            CVR / VAT: DK 39281744 · Member of Handbuilt Bicycles Guild Europe
          </div>
        </div>

        <div class="footer-col">
          <h5>The Atelier</h5>
          <ul>
            <li>Ravnsborggade 14B</li>
            <li>2200 København N</li>
            <li>Denmark</li>
            <li>atelier@lumencycles.cph</li>
            <li>+45 31 88 42 10</li>
          </ul>
        </div>

        <div class="footer-col">
          <h5>Workshop Hours</h5>
          <ul>
            <li>Tuesday – Friday: 10:00 – 17:30</li>
            <li>Saturday: 10:00 – 14:00 (Test Rides)</li>
            <li>Sunday – Monday: Metalwork & Brazing (Closed to Public)</li>
          </ul>
        </div>

        <div class="footer-col">
          <h5>Specifications</h5>
          <ul>
            <li><a href="#configurator">The Fjord Long-John</a></li>
            <li><a href="#configurator">The Torv Urban Compact</a></li>
            <li><a href="#configurator">The Havn Heavy Platform</a></li>
            <li><a href="#craft">Metallurgy & Frame Warranty</a></li>
            <li><a href="#guarantee">Financial Escrow & Deposit</a></li>
          </ul>
        </div>
      </div>

      <div class="footer-bottom">
        <div>© 2026 Lumen Cycles ApS. All rights reserved. Handcrafted in Denmark.</div>
        <div>Fillet-Brazed · Columbus Cromor · Shimano Steps · Gates CDX</div>
      </div>
    </div>
  </footer>

  <!-- Self-Contained JavaScript Logic -->
  <script>
    // State management for configurator
    const state = {
      basePrice: 2450, // Frame & core build
      driveType: 'pure',
      drivePrice: 750,
      driveLabel: 'Muscular Pure Mech (Shimano XT 11s)',
      cargoType: 'ash',
      cargoPrice: 650,
      cargoLabel: 'Steam-Bent Danish Ash (Two Kids)',
      colorHex: '#28392f',
      colorName: 'Forest Moss Metallic',
      colorPrice: 250,
      leatherHex: '#6d4626',
      leatherName: 'Aged Honey Leather',
      weight: '22.4 kg',
      capacity: '160 kg',
      range: 'Muscular'
    };

    function recalculateTotal() {
      const total = state.basePrice + state.drivePrice + state.cargoPrice + state.colorPrice;
      const formatted = '€' + total.toLocaleString();

      document.getElementById('summary-total').textContent = formatted;
      document.getElementById('row-drive').innerHTML = '<span>Drive: ' + state.driveLabel + '</span><span>€' + state.drivePrice + '</span>';
      document.getElementById('row-cargo').innerHTML = '<span>Cargo: ' + state.cargoLabel + '</span><span>€' + state.cargoPrice + '</span>';
      document.getElementById('row-finish').innerHTML = '<span>Finish: ' + state.colorName + '</span><span>€' + state.colorPrice + '</span>';
      
      document.getElementById('spec-weight').textContent = state.weight;
      document.getElementById('spec-capacity').textContent = state.capacity;
      document.getElementById('spec-range').textContent = state.range;

      updateSvgVisuals();
    }

    function selectDrive(type, price, label, weight, range) {
      state.driveType = type;
      state.drivePrice = price;
      state.driveLabel = label;
      state.weight = weight;
      state.range = range;

      // Update UI active card
      const parent = event.currentTarget.closest('.btn-choice-grid');
      parent.querySelectorAll('.choice-card').forEach(card => card.classList.remove('active'));
      event.currentTarget.classList.add('active');

      document.getElementById('title-drive-val').textContent = label.split('(')[0];
      recalculateTotal();
    }

    function selectCargo(type, price, label, capacity) {
      state.cargoType = type;
      state.cargoPrice = price;
      state.cargoLabel = label;
      state.capacity = capacity;

      const parent = event.currentTarget.closest('.btn-choice-grid');
      parent.querySelectorAll('.choice-card').forEach(card => card.classList.remove('active'));
      event.currentTarget.classList.add('active');

      document.getElementById('title-cargo-val').textContent = label.split('(')[0];
      recalculateTotal();
    }

    function selectColor(hex, name, price) {
      state.colorHex = hex;
      state.colorName = name;
      state.colorPrice = price;

      const parent = event.currentTarget.closest('.color-swatches');
      parent.querySelectorAll('.color-swatch-btn').forEach(btn => btn.classList.remove('active'));
      event.currentTarget.classList.add('active');

      document.getElementById('title-color-val').textContent = name;
      recalculateTotal();
    }

    function selectLeather(hex, name) {
      state.leatherHex = hex;
      state.leatherName = name;

      const parent = event.currentTarget.closest('.btn-choice-grid');
      parent.querySelectorAll('.choice-card').forEach(card => card.classList.remove('active'));
      event.currentTarget.classList.add('active');

      document.getElementById('title-leather-val').textContent = name;
      recalculateTotal();
    }

    function updateSvgVisuals() {
      // Update frame tubes color
      const tubeGroup = document.getElementById('frame-tubes-group');
      if (tubeGroup) {
        tubeGroup.querySelectorAll('path').forEach(p => {
          p.setAttribute('stroke', state.colorHex);
        });
      }
      const spine = document.getElementById('bike-spine');
      if (spine) spine.setAttribute('stroke', state.colorHex);

      // Motor indicator
      const motor = document.getElementById('motor-visual');
      if (motor) {
        motor.setAttribute('opacity', state.driveType === 'shimano' ? '1' : '0');
      }

      // Leather touchpoints
      const saddle = document.getElementById('saddle-art');
      if (saddle) saddle.setAttribute('fill', state.leatherHex);
      const grip = document.getElementById('grip-art');
      if (grip) grip.setAttribute('fill', state.leatherHex);

      // Cargo box rendering
      const boxGroup = document.getElementById('box-visual-group');
      if (!boxGroup) return;

      if (state.cargoType === 'ash') {
        boxGroup.innerHTML = `
          <polygon points="340,314 690,314 695,210 350,210" fill="#916439" stroke="#52361b" stroke-width="2"/>
          <line x1="344" y1="240" x2="692" y2="240" stroke="#442a13" stroke-width="2"/>
          <line x1="342" y1="270" x2="691" y2="270" stroke="#442a13" stroke-width="2"/>
          <circle cx="355" cy="220" r="3" fill="#d2a15c"/>
          <circle cx="685" cy="220" r="3" fill="#d2a15c"/>
          <circle cx="348" cy="305" r="3" fill="#d2a15c"/>
          <circle cx="682" cy="305" r="3" fill="#d2a15c"/>
          <rect x="495" y="244" width="48" height="26" rx="3" fill="#1b231e" stroke="#d2a15c" stroke-width="1"/>
          <text x="519" y="260" fill="#d2a15c" font-family="'SF Mono', monospace" font-size="7" text-anchor="middle">LUMEN</text>
        `;
      } else if (state.cargoType === 'flatbed') {
        boxGroup.innerHTML = `
          <polygon points="330,320 705,320 705,302 330,302" fill="#323b36" stroke="#8da094" stroke-width="1.5"/>
          <line x1="380" y1="302" x2="380" y2="320" stroke="#8da094" stroke-width="1"/>
          <line x1="450" y1="302" x2="450" y2="320" stroke="#8da094" stroke-width="1"/>
          <line x1="530" y1="302" x2="530" y2="320" stroke="#8da094" stroke-width="1"/>
          <line x1="620" y1="302" x2="620" y2="320" stroke="#8da094" stroke-width="1"/>
          <!-- Anchor eyelets -->
          <circle cx="350" cy="306" r="3" fill="#d2a15c"/>
          <circle cx="690" cy="306" r="3" fill="#d2a15c"/>
        `;
      } else if (state.cargoType === 'canopy') {
        boxGroup.innerHTML = `
          <polygon points="340,314 690,314 695,210 350,210" fill="#916439" opacity="0.5"/>
          <!-- Curved Weatherproof Dome -->
          <path d="M 345 220 Q 520 120 690 220 L 690 314 L 345 314 Z" fill="#202a24" stroke="#d2a15c" stroke-width="1.5"/>
          <!-- Clear Window Inset -->
          <path d="M 370 220 Q 520 145 665 220 L 665 260 Q 520 200 370 260 Z" fill="#7fa690" opacity="0.3" stroke="#8da094" stroke-width="1"/>
        `;
      } else if (state.cargoType === 'courier') {
        boxGroup.innerHTML = `
          <polygon points="342,314 688,314 690,230 348,230" fill="#1b1f1d" stroke="#526156" stroke-width="2"/>
          <line x1="345" y1="230" x2="689" y2="314" stroke="#d2a15c" stroke-width="1.5" stroke-dasharray="6 4" opacity="0.5"/>
          <line x1="345" y1="314" x2="689" y2="230" stroke="#d2a15c" stroke-width="1.5" stroke-dasharray="6 4" opacity="0.5"/>
        `;
      }
    }

    function prefillBooking() {
      const notes = document.getElementById('notes');
      if (notes) {
        notes.value = 'Configured Spec: ' + state.driveLabel + ' | ' + state.cargoLabel + ' | Finish: ' + state.colorName + ' | Total: €' + (state.basePrice + state.drivePrice + state.cargoPrice + state.colorPrice).toLocaleString();
      }
      const driveSelect = document.getElementById('drive-pref');
      if (driveSelect) {
        driveSelect.value = state.driveType === 'pure' ? 'pure' : 'electric';
      }
    }

    function handleFormSubmit(e) {
      e.preventDefault();
      const randomRef = 'LM-2026-' + Math.floor(100 + Math.random() * 900);
      const refEl = document.getElementById('modal-ref');
      if (refEl) refEl.textContent = randomRef;

      const modal = document.getElementById('success-modal');
      if (modal) modal.classList.add('active');
    }

    function closeModal() {
      const modal = document.getElementById('success-modal');
      if (modal) modal.classList.remove('active');
    }

    // Initialize display on page load
    document.addEventListener('DOMContentLoaded', () => {
      recalculateTotal();
    });
  </script>
</body>
</html>

Compare with

Gemini 3.8 Flash: other attempts

  • Gemini 3.8 Flash, Watch: Queued · #11 of 15 paid · not before 24 Oct
  • Gemini 3.8 Flash, Logo: Queued · #11 of 15 paid · not before 24 Oct
  • Gemini 3.8 Flash, About: Queued · #11 of 15 paid · not before 24 Oct