hypeorcode
Network offOpen alone (new tab)

Run details

Model
minimaxai/minimax-m3
Route
Command Code CLI
Reasoning
provider default
Limits
60 min
Date
2 Oct 2026
Time
2 min 43 s
Size
52 kB
Tokens
87,976 in, 17,322 out
List price
$0.047 ($0.3 in / $1.2 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

52 kB 1,038 lines Raw

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lumen Cycles — Custom cargo bikes, built to order in Copenhagen</title>
<meta name="description" content="A small workshop in Nørrebro building steel and aluminium cargo bikes to order. One frame, one rider, one weld at a time.">
<style>
  :root{
    --bg:#f4efe6;
    --bg-2:#ece5d6;
    --ink:#1a1a17;
    --ink-soft:#3a3a33;
    --line:#1a1a17;
    --line-soft:#1a1a171a;
    --rust:#b04a2a;
    --rust-deep:#8a3a1f;
    --olive:#4a5a32;
    --steel:#6a6a62;
    --warm:#e8dcc4;
    --paper:#faf6ee;
    --shadow: 0 1px 0 #1a1a17, 0 14px 30px -22px #1a1a1755;
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Hoefler Text", "Times New Roman", serif; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
  img,svg{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  .mono{font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace; letter-spacing:.02em}
  .eyebrow{font-family:"SF Mono","Menlo","Consolas",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft)}
  .display{font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; font-weight:400; letter-spacing:-.015em; line-height:1.02}
  .rule{border:0; border-top:1px solid var(--line); margin:0}
  .rule-soft{border:0; border-top:1px solid var(--line-soft); margin:0}

  /* ---------- Top bar ---------- */
  .topbar{
    position:sticky; top:0; z-index:30;
    background:rgba(244,239,230,.86);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom:1px solid var(--line);
  }
  .topbar-inner{
    max-width:1280px; margin:0 auto; padding:14px 28px;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
  }
  .brand{display:flex; align-items:center; gap:10px; font-weight:500; letter-spacing:.02em}
  .brand-mark{width:22px;height:22px}
  .brand-name{font-size:18px}
  .brand-sub{display:none}
  @media(min-width:780px){.brand-sub{display:inline; color:var(--ink-soft); font-size:13px; padding-left:10px; margin-left:10px; border-left:1px solid var(--line-soft)}}
  nav ul{list-style:none; margin:0; padding:0; display:flex; gap:22px; font-size:14px}
  nav a{position:relative; padding-bottom:2px}
  nav a:hover{border-bottom:1px solid var(--ink)}
  .cta-book{
    display:inline-flex; align-items:center; gap:8px;
    padding:9px 14px; background:var(--ink); color:var(--paper); border:1px solid var(--ink);
    font-family:"SF Mono","Menlo",monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  }
  .cta-book:hover{background:var(--rust); border-color:var(--rust)}
  .cta-ghost{
    display:inline-flex; align-items:center; gap:8px;
    padding:9px 14px; background:transparent; color:var(--ink); border:1px solid var(--ink);
    font-family:"SF Mono","Menlo",monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  }
  .cta-ghost:hover{background:var(--ink); color:var(--paper)}

  /* ---------- Hero ---------- */
  .hero{
    border-bottom:1px solid var(--line);
    background:var(--bg);
  }
  .hero-grid{
    max-width:1280px; margin:0 auto; padding:64px 28px 56px;
    display:grid; grid-template-columns: 1fr; gap:40px;
  }
  @media(min-width:980px){
    .hero-grid{grid-template-columns: 1.15fr 1fr; gap:64px; align-items:end; padding:88px 28px 72px}
  }
  .hero h1{
    font-size: clamp(44px, 7.4vw, 104px);
    margin:18px 0 22px;
  }
  .hero h1 em{font-style:italic; color:var(--rust)}
  .hero-lede{
    font-size: clamp(17px, 1.6vw, 20px);
    color:var(--ink-soft);
    max-width: 46ch;
    margin: 0 0 28px;
  }
  .hero-cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
  .hero-meta{
    display:flex; flex-wrap:wrap; gap:22px 30px; margin-top:36px;
    font-size:13px; color:var(--ink-soft);
  }
  .hero-meta b{color:var(--ink); font-weight:500}
  .hero-art{
    position:relative;
    background:var(--paper);
    border:1px solid var(--line);
    box-shadow: var(--shadow);
    padding:22px;
  }
  .hero-art .tag{
    position:absolute; top:14px; left:14px;
    background:var(--ink); color:var(--paper);
    padding:5px 9px; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
    font-family:"SF Mono","Menlo",monospace;
  }
  .hero-art .serial{
    position:absolute; bottom:14px; right:14px;
    font-family:"SF Mono","Menlo",monospace; font-size:10px; color:var(--ink-soft); letter-spacing:.1em;
  }
  .hero-art svg{width:100%; height:auto}

  /* ---------- Marquee ---------- */
  .marquee{
    border-bottom:1px solid var(--line);
    background:var(--ink); color:var(--paper);
    overflow:hidden;
  }
  .marquee-track{
    display:flex; gap:48px; white-space:nowrap;
    padding:14px 0;
    animation: slide 38s linear infinite;
    font-family:"SF Mono","Menlo",monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  }
  .marquee-track span{display:inline-flex; align-items:center; gap:48px}
  .marquee-track .dot{color:var(--rust)}
  @keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

  /* ---------- Section base ---------- */
  section.block{border-bottom:1px solid var(--line)}
  .wrap{max-width:1280px; margin:0 auto; padding: 72px 28px}
  .section-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:18px; margin-bottom:36px}
  .section-head h2{font-size: clamp(30px, 4vw, 48px); margin:8px 0 0; max-width: 22ch}
  .section-head .kicker{display:flex; align-items:center; gap:10px; color:var(--ink-soft)}
  .section-head .kicker .num{font-family:"SF Mono","Menlo",monospace; font-size:11px; color:var(--ink); background:var(--paper); border:1px solid var(--line); padding:3px 7px}

  /* ---------- Models ---------- */
  .models{background:var(--bg-2)}
  .models-grid{
    display:grid; gap:0;
    grid-template-columns: 1fr;
    border-top:1px solid var(--line); border-left:1px solid var(--line);
  }
  @media(min-width:760px){.models-grid{grid-template-columns: repeat(2, 1fr)}}
  @media(min-width:1080px){.models-grid{grid-template-columns: repeat(3, 1fr)}}
  .model{
    background:var(--paper);
    border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:28px 26px 30px; position:relative;
    display:flex; flex-direction:column; min-height: 520px;
  }
  .model .num{
    position:absolute; top:18px; right:22px;
    font-family:"SF Mono","Menlo",monospace; font-size:11px; color:var(--ink-soft); letter-spacing:.1em;
  }
  .model .swatch{
    height:8px; width:100%; background:var(--ink); margin-bottom:22px;
  }
  .model.s2 .swatch{background:var(--rust)}
  .model.s3 .swatch{background:var(--olive)}
  .model h3{font-size:28px; margin:0 0 6px; letter-spacing:-.01em}
  .model .sub{font-size:13px; color:var(--ink-soft); margin-bottom:18px}
  .model .art{flex:1; display:flex; align-items:center; justify-content:center; padding:8px 0 16px}
  .model .art svg{width:100%; height:auto; max-height:220px}
  .model dl{display:grid; grid-template-columns: auto 1fr; column-gap:18px; row-gap:6px; font-size:13px; margin:8px 0 18px; padding-top:14px; border-top:1px dashed var(--line-soft)}
  .model dt{color:var(--ink-soft); font-family:"SF Mono","Menlo",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase}
  .model dd{margin:0; color:var(--ink)}
  .model .price{display:flex; align-items:baseline; gap:8px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line)}
  .model .price b{font-size:24px; letter-spacing:-.01em}
  .model .price span{font-size:12px; color:var(--ink-soft); font-family:"SF Mono","Menlo",monospace}
  .model .actions{display:flex; gap:10px; margin-top:16px}

  /* ---------- Process ---------- */
  .process{background:var(--bg)}
  .steps{
    display:grid; gap:0;
    grid-template-columns:1fr;
    border-top:1px solid var(--line);
  }
  @media(min-width:820px){.steps{grid-template-columns: repeat(4, 1fr)}}
  .step{
    padding:28px 24px 30px; background:var(--paper);
    border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .step:last-child{border-right:0}
  .step .n{
    font-family:"SF Mono","Menlo",monospace; font-size:11px; color:var(--paper); background:var(--ink);
    display:inline-block; padding:3px 8px; margin-bottom:14px; letter-spacing:.1em;
  }
  .step h4{font-size:20px; margin:0 0 8px; letter-spacing:-.01em}
  .step p{margin:0; font-size:14px; color:var(--ink-soft)}
  .step .when{margin-top:14px; font-size:11px; color:var(--ink-soft); font-family:"SF Mono","Menlo",monospace; letter-spacing:.1em; text-transform:uppercase}

  /* ---------- Workshop ---------- */
  .workshop{background:var(--bg-2)}
  .ws-grid{display:grid; gap:40px; grid-template-columns:1fr; align-items:start}
  @media(min-width:900px){.ws-grid{grid-template-columns: 1.05fr 1fr; gap:64px}}
  .ws-grid p{font-size:17px; color:var(--ink-soft); max-width: 56ch}
  .ws-grid p + p{margin-top:14px}
  .stats{
    display:grid; grid-template-columns: repeat(2, 1fr);
    border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:24px;
  }
  .stat{padding:18px 18px 20px; background:var(--paper); border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
  .stat b{display:block; font-size:34px; letter-spacing:-.02em}
  .stat span{font-size:12px; color:var(--ink-soft); font-family:"SF Mono","Menlo",monospace; letter-spacing:.1em; text-transform:uppercase}

  .ws-photo{
    border:1px solid var(--line); background:var(--paper); box-shadow:var(--shadow);
    padding:16px; position:relative;
  }
  .ws-photo .corner{position:absolute; font-family:"SF Mono","Menlo",monospace; font-size:10px; color:var(--ink-soft); letter-spacing:.1em}
  .ws-photo .c1{top:10px; left:12px}
  .ws-photo .c2{top:10px; right:12px}
  .ws-photo .c3{bottom:10px; left:12px}
  .ws-photo .c4{bottom:10px; right:12px}

  /* ---------- Materials ---------- */
  .materials{background:var(--bg)}
  .mat-grid{display:grid; gap:0; grid-template-columns:1fr; border-top:1px solid var(--line); border-left:1px solid var(--line)}
  @media(min-width:780px){.mat-grid{grid-template-columns: repeat(3, 1fr)}}
  .mat{
    background:var(--paper); padding:26px 24px 28px;
    border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .mat .ic{width:38px; height:38px; margin-bottom:14px}
  .mat h4{font-size:18px; margin:0 0 6px}
  .mat p{margin:0; font-size:14px; color:var(--ink-soft)}

  /* ---------- Testimonials ---------- */
  .voices{background:var(--ink); color:var(--paper)}
  .voices h2{color:var(--paper)}
  .voices .section-head .kicker{color:#cdc6b6}
  .voices .section-head .kicker .num{background:transparent; color:var(--paper); border-color:#cdc6b6}
  .vgrid{display:grid; gap:0; grid-template-columns:1fr; border-top:1px solid #cdc6b655; border-left:1px solid #cdc6b655}
  @media(min-width:820px){.vgrid{grid-template-columns: repeat(3, 1fr)}}
  .vq{padding:28px 26px 30px; background:#1a1a17; border-right:1px solid #cdc6b655; border-bottom:1px solid #cdc6b655; display:flex; flex-direction:column; gap:18px}
  .vq blockquote{margin:0; font-size:18px; line-height:1.45; letter-spacing:-.005em; color:var(--paper)}
  .vq blockquote::before{content:"\201C"; color:var(--rust); font-size:32px; line-height:0; vertical-align:-12px; margin-right:6px}
  .vq .who{display:flex; align-items:center; gap:12px; font-size:12px; color:#cdc6b6; font-family:"SF Mono","Menlo",monospace; letter-spacing:.08em; text-transform:uppercase}
  .vq .who .ava{width:32px;height:32px;background:#2a2a25;border:1px solid #cdc6b655; display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; color:var(--paper); font-size:14px}

  /* ---------- FAQ ---------- */
  .faq{background:var(--bg-2)}
  .faq-list{border-top:1px solid var(--line)}
  details{border-bottom:1px solid var(--line); background:transparent}
  details summary{
    list-style:none; cursor:pointer;
    padding:22px 0; display:flex; align-items:center; justify-content:space-between; gap:18px;
    font-size:19px; letter-spacing:-.005em;
  }
  details summary::-webkit-details-marker{display:none}
  details summary .q{display:flex; align-items:baseline; gap:14px}
  details summary .q .ix{font-family:"SF Mono","Menlo",monospace; font-size:12px; color:var(--ink-soft); width:28px}
  details summary .plus{
    width:22px; height:22px; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center;
    font-family:"SF Mono","Menlo",monospace; font-size:14px; line-height:1;
    transition: transform .2s ease, background .2s ease, color .2s ease;
  }
  details[open] summary .plus{background:var(--ink); color:var(--paper); transform: rotate(45deg)}
  details .a{padding:0 0 24px 42px; color:var(--ink-soft); max-width: 70ch; font-size:15.5px}
  @media (max-width:600px){
    details .a{padding-left:0}
    details summary .q .ix{display:none}
  }

  /* ---------- Order / book ---------- */
  .order{background:var(--bg)}
  .order-grid{display:grid; gap:40px; grid-template-columns:1fr}
  @media(min-width:940px){.order-grid{grid-template-columns: 1fr 1.1fr; gap:64px; align-items:start}}
  .order-grid h2{font-size: clamp(30px, 4vw, 44px); margin:8px 0 14px; max-width: 18ch}
  .order-grid p{color:var(--ink-soft); max-width: 52ch}
  .checklist{margin:18px 0 0; padding:0; list-style:none; border-top:1px solid var(--line)}
  .checklist li{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:15px}
  .checklist li .ck{width:22px;height:22px; flex:0 0 22px; background:var(--ink); color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-family:"SF Mono","Menlo",monospace; font-size:12px; margin-top:1px}
  .checklist li b{font-weight:500}

  form.book{
    background:var(--paper); border:1px solid var(--line); box-shadow: var(--shadow);
    padding:26px;
  }
  form.book h3{margin:0 0 6px; font-size:22px; letter-spacing:-.01em}
  form.book .sub{font-size:13px; color:var(--ink-soft); margin:0 0 18px; font-family:"SF Mono","Menlo",monospace; letter-spacing:.06em; text-transform:uppercase}
  .field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
  .field label{font-family:"SF Mono","Menlo",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
  .field input, .field select, .field textarea{
    font: inherit; color: var(--ink); background:#fffdf6;
    border:1px solid var(--line); border-radius:0; padding:11px 12px; outline:none;
  }
  .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--rust); box-shadow: 0 0 0 3px #b04a2a22}
  .field textarea{min-height:90px; resize:vertical}
  .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  @media(max-width:520px){.row2{grid-template-columns:1fr}}
  .submit{
    width:100%; margin-top:8px;
    background:var(--ink); color:var(--paper); border:1px solid var(--ink);
    padding:14px 16px; cursor:pointer; font-family:"SF Mono","Menlo",monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  }
  .submit:hover{background:var(--rust); border-color:var(--rust)}
  .form-fine{font-size:12px; color:var(--ink-soft); margin-top:12px; font-family:"SF Mono","Menlo",monospace; letter-spacing:.04em}
  .form-ok{display:none; margin-top:14px; padding:12px 14px; background:#1a1a17; color:var(--paper); border:1px solid #1a1a17; font-size:14px}
  .form-ok.show{display:block}

  /* ---------- Footer ---------- */
  footer{
    background:var(--ink); color:#cdc6b6;
  }
  .foot-inner{max-width:1280px; margin:0 auto; padding:56px 28px 24px}
  .foot-grid{display:grid; gap:36px; grid-template-columns:1fr; border-bottom:1px solid #cdc6b633; padding-bottom:36px}
  @media(min-width:780px){.foot-grid{grid-template-columns: 1.4fr 1fr 1fr 1fr}}
  .foot h5{font-family:"SF Mono","Menlo",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#cdc6b6; margin:0 0 12px}
  .foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14px}
  .foot ul a:hover{color:var(--paper); border-bottom:1px solid var(--paper)}
  .foot-brand{display:flex; align-items:center; gap:10px; color:var(--paper); font-size:18px; margin-bottom:10px}
  .foot-brand .brand-mark path{stroke:var(--paper)}
  .foot p.tagline{margin:0 0 14px; color:#cdc6b6; max-width: 36ch; font-size:14px}
  .foot-bottom{display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:space-between; align-items:center; padding-top:18px; font-size:12px; color:#cdc6b6; font-family:"SF Mono","Menlo",monospace; letter-spacing:.06em}

  /* helpers */
  .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

  /* small screens niceties */
  @media(max-width:680px){
    nav ul{display:none}
    .topbar-inner{padding:12px 18px}
    .wrap{padding:56px 20px}
    .hero-grid{padding:48px 20px 40px}
  }
</style>
</head>
<body>

<!-- ===================== TOP BAR ===================== -->
<header class="topbar">
  <div class="topbar-inner">
    <a href="#top" class="brand" aria-label="Lumen Cycles home">
      <svg class="brand-mark" viewBox="0 0 32 32" fill="none" aria-hidden="true">
        <circle cx="9" cy="22" r="6" stroke="#1a1a17" stroke-width="1.5"/>
        <circle cx="25" cy="22" r="4" stroke="#1a1a17" stroke-width="1.5"/>
        <path d="M9 22 L18 10 L25 22" stroke="#1a1a17" stroke-width="1.5" fill="none"/>
        <path d="M13 10 L20 10" stroke="#1a1a17" stroke-width="1.5"/>
        <circle cx="20" cy="10" r="1.6" fill="#b04a2a"/>
      </svg>
      <span class="brand-name">Lumen Cycles</span>
      <span class="brand-sub">Custom cargo, built in Nørrebro since 2014</span>
    </a>
    <nav aria-label="Primary">
      <ul>
        <li><a href="#models">Bikes</a></li>
        <li><a href="#process">Process</a></li>
        <li><a href="#workshop">Workshop</a></li>
        <li><a href="#faq">FAQ</a></li>
      </ul>
    </nav>
    <a class="cta-book" href="#order">Book a fitting →</a>
  </div>
</header>

<!-- ===================== HERO ===================== -->
<section class="hero" id="top">
  <div class="hero-grid">
    <div>
      <span class="eyebrow">No. 001 — Made to order · Lead time 9–14 weeks</span>
      <h1 class="display">A cargo bike<br>built around <em>your</em><br>everyday.</h1>
      <p class="hero-lede">We&rsquo;re a four-person workshop in Nørrebro, Copenhagen. We design and weld each frame to fit one rider, one route, and the children, dogs, bread, or lumber it needs to carry. Nothing leaves the door without a 200&nbsp;km shakedown ride.</p>
      <div class="hero-cta">
        <a class="cta-book" href="#order">Reserve a build slot</a>
        <a class="cta-ghost" href="#models">See the three models</a>
      </div>
      <div class="hero-meta">
        <span><b>142</b> bikes on the road in DK, SE, NL, DE</span>
        <span><b>10&nbsp;year</b> frame warranty</span>
        <span><b>4&nbsp;weeks</b> deposit, refundable until welding</span>
      </div>
    </div>

    <figure class="hero-art" aria-label="A Lumen long-tail cargo bike, hand-drawn technical illustration">
      <span class="tag">DRAWING · 01 / 03</span>
      <svg viewBox="0 0 560 360" role="img" aria-label="Long-tail cargo bike, side view, technical drawing">
        <defs>
          <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#1a1a1710" stroke-width="0.5"/>
          </pattern>
        </defs>
        <rect x="0" y="0" width="560" height="360" fill="url(#grid)"/>
        <!-- ground -->
        <line x1="20" y1="298" x2="540" y2="298" stroke="#1a1a17" stroke-width="1"/>
        <line x1="20" y1="302" x2="540" y2="302" stroke="#1a1a171a" stroke-width="0.6" stroke-dasharray="2 6"/>
        <!-- frame: long-tail -->
        <g fill="none" stroke="#1a1a17" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
          <!-- main tube -->
          <path d="M150 298 L150 165 L235 110 L335 110"/>
          <!-- top tube / rack base -->
          <path d="M150 165 L470 165"/>
          <!-- seat tube to rear axle -->
          <path d="M150 165 L455 298"/>
          <!-- chainstay -->
          <path d="M455 298 L235 110"/>
          <!-- seat stay -->
          <path d="M150 165 L455 298"/>
          <!-- rack rails -->
          <path d="M260 165 L460 165 L460 250 L260 250 Z"/>
          <path d="M285 250 L300 298"/>
          <path d="M420 250 L430 298"/>
          <!-- fork -->
          <path d="M150 165 L95 298"/>
          <line x1="150" y1="165" x2="118" y2="220"/>
          <!-- headtube area -->
          <line x1="150" y1="165" x2="160" y2="148"/>
          <line x1="150" y1="165" x2="138" y2="150"/>
        </g>
        <!-- handlebar + saddle -->
        <g fill="none" stroke="#1a1a17" stroke-width="2.2" stroke-linecap="round">
          <line x1="150" y1="148" x2="125" y2="135"/>
          <line x1="115" y1="135" x2="135" y2="135"/>
          <line x1="150" y1="148" x2="175" y2="135"/>
          <line x1="165" y1="135" x2="185" y2="135"/>
          <line x1="150" y1="110" x2="150" y2="92"/>
          <path d="M132 92 Q150 82 168 92"/>
        </g>
        <!-- wheels -->
        <g>
          <circle cx="95" cy="298" r="28" fill="none" stroke="#1a1a17" stroke-width="2.2"/>
          <circle cx="95" cy="298" r="22" fill="none" stroke="#1a1a1715" stroke-width="0.8"/>
          <circle cx="95" cy="298" r="3" fill="#1a1a17"/>
          <circle cx="455" cy="298" r="28" fill="none" stroke="#1a1a17" stroke-width="2.2"/>
          <circle cx="455" cy="298" r="22" fill="none" stroke="#1a1a1715" stroke-width="0.8"/>
          <circle cx="455" cy="298" r="3" fill="#1a1a17"/>
          <g stroke="#1a1a17" stroke-width="0.7">
            <line x1="95" y1="270" x2="95" y2="326"/>
            <line x1="67" y1="298" x2="123" y2="298"/>
            <line x1="75" y1="278" x2="115" y2="318"/>
            <line x1="115" y1="278" x2="75" y2="318"/>
            <line x1="455" y1="270" x2="455" y2="326"/>
            <line x1="427" y1="298" x2="483" y2="298"/>
            <line x1="435" y1="278" x2="475" y2="318"/>
            <line x1="475" y1="278" x2="435" y2="318"/>
          </g>
        </g>
        <!-- chain -->
        <path d="M95 298 L455 298" stroke="#1a1a1755" stroke-width="1" stroke-dasharray="3 3"/>
        <!-- motor -->
        <rect x="320" y="170" width="40" height="22" fill="#1a1a17"/>
        <text x="340" y="185" text-anchor="middle" font-family="Menlo, monospace" font-size="8" fill="#f4efe6" letter-spacing="1">250W</text>
        <!-- dimension lines -->
        <g stroke="#b04a2a" stroke-width="0.8" fill="none">
          <line x1="95" y1="338" x2="455" y2="338"/>
          <line x1="95" y1="333" x2="95" y2="343"/>
          <line x1="455" y1="333" x2="455" y2="343"/>
        </g>
        <text x="275" y="354" text-anchor="middle" font-family="Menlo, monospace" font-size="10" fill="#b04a2a" letter-spacing="2">WHEELBASE · 1800mm</text>
        <!-- callouts -->
        <g font-family="Menlo, monospace" font-size="9" fill="#3a3a33" letter-spacing="1">
          <line x1="455" y1="298" x2="500" y2="240" stroke="#1a1a17" stroke-width="0.6"/>
          <text x="500" y="234" text-anchor="end">REAR 26" · HUB GEARED</text>
          <line x1="235" y1="110" x2="270" y2="60" stroke="#1a1a17" stroke-width="0.6"/>
          <text x="270" y="54" text-anchor="middle">4130 CR-MO MAIN TRIANGLE</text>
          <line x1="360" y1="250" x2="430" y2="220" stroke="#1a1a17" stroke-width="0.6"/>
          <text x="430" y="214" text-anchor="middle">60kg RATED RACK</text>
        </g>
      </svg>
      <span class="serial">SN LUM-2026-0142 · L.TAIL MK II</span>
    </figure>
  </div>
</section>

<!-- ===================== MARQUEE ===================== -->
<div class="marquee" aria-hidden="true">
  <div class="marquee-track">
    <span>
      Hand welded in Nørrebro <span class="dot">●</span> TÜV tested frames <span class="dot">●</span> Shimano, Bafang &amp; Bosch drivetrains <span class="dot">●</span> Powder coat in any RAL <span class="dot">●</span> 10-year frame warranty <span class="dot">●</span> Free lifetime tune-ups at the workshop <span class="dot">●</span>
    </span>
    <span>
      Hand welded in Nørrebro <span class="dot">●</span> TÜV tested frames <span class="dot">●</span> Shimano, Bafang &amp; Bosch drivetrains <span class="dot">●</span> Powder coat in any RAL <span class="dot">●</span> 10-year frame warranty <span class="dot">●</span> Free lifetime tune-ups at the workshop <span class="dot">●</span>
    </span>
  </div>
</div>

<!-- ===================== MODELS ===================== -->
<section class="block models" id="models">
  <div class="wrap">
    <div class="section-head">
      <div>
        <span class="eyebrow">§ 01 — The Lineup</span>
        <h2 class="display">Three frames. Everything else is up to you.</h2>
      </div>
      <span class="kicker"><span class="num">03</span> Models · Built in-house</span>
    </div>

    <div class="models-grid">

      <!-- Model 1 -->
      <article class="model s1">
        <div class="swatch"></div>
        <span class="num">MK I · 001</span>
        <h3>The Short</h3>
        <p class="sub">Compact front-loader, ideal for one child and a weekly shop.</p>
        <div class="art">
          <svg viewBox="0 0 520 260" aria-hidden="true">
            <g fill="none" stroke="#1a1a17" stroke-width="2.2" stroke-linecap="round">
              <!-- box -->
              <path d="M260 95 L420 95 L420 200 L260 200 Z"/>
              <path d="M275 110 L405 110 L405 185 L275 185 Z" stroke-dasharray="3 4"/>
              <!-- frame -->
              <path d="M210 200 L210 130 L260 95"/>
              <path d="M210 200 L120 200"/>
              <path d="M210 130 L100 200"/>
              <path d="M210 130 L260 95"/>
              <!-- fork -->
              <path d="M210 130 L160 200"/>
              <!-- bar + seat -->
              <path d="M210 110 L185 95 L170 95"/>
              <path d="M210 110 L235 95 L250 95"/>
              <line x1="210" y1="95" x2="210" y2="72"/>
            </g>
            <circle cx="160" cy="200" r="26" fill="none" stroke="#1a1a17" stroke-width="2.2"/>
            <circle cx="380" cy="200" r="26" fill="none" stroke="#1a1a17" stroke-width="2.2"/>
            <circle cx="160" cy="200" r="3" fill="#1a1a17"/>
            <circle cx="380" cy="200" r="3" fill="#1a1a17"/>
            <g stroke="#1a1a17" stroke-width="0.7">
              <line x1="160" y1="174" x2="160" y2="226"/>
              <line x1="134" y1="200" x2="186" y2="200"/>
              <line x1="380" y1="174" x2="380" y2="226"/>
              <line x1="354" y1="200" x2="406" y2="200"/>
            </g>
            <text x="260" y="68" font-family="Menlo,monospace" font-size="10" fill="#3a3a33" letter-spacing="2">FRONT BOX · 80L</text>
          </svg>
        </div>
        <dl>
          <dt>Wheelbase</dt><dd>1,260 mm</dd>
          <dt>Payload</dt><dd>120 kg (rider + cargo)</dd>
          <dt>Box</dt><dd>Baltic birch plywood, oiled</dd>
          <dt>From</dt><dd>€3,890</dd>
        </dl>
        <div class="actions">
          <a class="cta-ghost" href="#order">Configure →</a>
        </div>
      </article>

      <!-- Model 2 -->
      <article class="model s2">
        <div class="swatch"></div>
        <span class="num">MK II · 002</span>
        <h3>The Long Tail</h3>
        <p class="sub">Our most-asked-for frame. Two kids, a dog, or a week of groceries.</p>
        <div class="art">
          <svg viewBox="0 0 520 260" aria-hidden="true">
            <g fill="none" stroke="#1a1a17" stroke-width="2.2" stroke-linecap="round">
              <path d="M120 200 L120 130 L195 95 L320 95"/>
              <path d="M120 130 L430 130"/>
              <path d="M120 200 L420 200"/>
              <path d="M120 130 L420 200"/>
              <path d="M195 95 L120 200"/>
              <path d="M220 130 L420 130 L420 195 L220 195 Z"/>
              <path d="M120 130 L75 200"/>
              <path d="M120 110 L95 95"/>
              <line x1="120" y1="95" x2="120" y2="72"/>
            </g>
            <circle cx="75" cy="200" r="26" fill="none" stroke="#1a1a17" stroke-width="2.2"/>
            <circle cx="420" cy="200" r="26" fill="none" stroke="#1a1a17" stroke-width="2.2"/>
            <circle cx="75" cy="200" r="3" fill="#1a1a17"/>
            <circle cx="420" cy="200" r="3" fill="#1a1a17"/>
            <g stroke="#1a1a17" stroke-width="0.7">
              <line x1="75" y1="174" x2="75" y2="226"/>
              <line x1="49" y1="200" x2="101" y2="200"/>
              <line x1="420" y1="174" x2="420" y2="226"/>
              <line x1="394" y1="200" x2="446" y2="200"/>
            </g>
            <text x="260" y="240" text-anchor="middle" font-family="Menlo,monospace" font-size="10" fill="#3a3a33" letter-spacing="2">REAR RACK · 60 KG</text>
          </svg>
        </div>
        <dl>
          <dt>Wheelbase</dt><dd>1,800 mm</dd>
          <dt>Payload</dt><dd>160 kg (rider + cargo)</dd>
          <dt>Drivetrain</dt><dd>Shimano Alfine 8 / Enviolo</dd>
          <dt>From</dt><dd>€4,290</dd>
        </dl>
        <div class="actions">
          <a class="cta-ghost" href="#order">Configure →</a>
        </div>
      </article>

      <!-- Model 3 -->
      <article class="model s3">
        <div class="swatch"></div>
        <span class="num">MK III · 003</span>
        <h3>The Trike</h3>
        <p class="sub">Tilt-kingpin three-wheeler for a flat-load deck, no balance needed.</p>
        <div class="art">
          <svg viewBox="0 0 520 260" aria-hidden="true">
            <g fill="none" stroke="#1a1a17" stroke-width="2.2" stroke-linecap="round">
              <path d="M150 200 L150 130 L235 95"/>
              <path d="M150 130 L260 130 L380 130"/>
              <path d="M260 130 L260 200"/>
              <path d="M380 200 L150 130"/>
              <!-- deck -->
              <path d="M260 165 L460 165 L460 200 L260 200 Z"/>
              <!-- fork -->
              <path d="M150 130 L100 200"/>
              <path d="M150 110 L125 95"/>
              <line x1="150" y1="95" x2="150" y2="72"/>
            </g>
            <circle cx="100" cy="200" r="26" fill="none" stroke="#1a1a17" stroke-width="2.2"/>
            <circle cx="100" cy="200" r="3" fill="#1a1a17"/>
            <circle cx="410" cy="200" r="22" fill="none" stroke="#1a1a17" stroke-width="2.2"/>
            <circle cx="350" cy="200" r="22" fill="none" stroke="#1a1a17" stroke-width="2.2"/>
            <circle cx="410" cy="200" r="3" fill="#1a1a17"/>
            <circle cx="350" cy="200" r="3" fill="#1a1a17"/>
            <g stroke="#1a1a17" stroke-width="0.7">
              <line x1="100" y1="174" x2="100" y2="226"/>
              <line x1="74" y1="200" x2="126" y2="200"/>
              <line x1="410" y1="178" x2="410" y2="222"/>
              <line x1="350" y1="178" x2="350" y2="222"/>
              <line x1="333" y1="200" x2="367" y2="200"/>
            </g>
            <text x="410" y="245" text-anchor="middle" font-family="Menlo,monospace" font-size="10" fill="#3a3a33" letter-spacing="2">DECK · 900×600mm</text>
          </svg>
        </div>
        <dl>
          <dt>Wheelbase</dt><dd>1,420 mm</dd>
          <dt>Payload</dt><dd>200 kg</dd>
          <dt>Length</dt><dd>1,980 mm overall</dd>
          <dt>From</dt><dd>€5,490</dd>
        </dl>
        <div class="actions">
          <a class="cta-ghost" href="#order">Configure →</a>
        </div>
      </article>

    </div>
  </div>
</section>

<!-- ===================== PROCESS ===================== -->
<section class="block process" id="process">
  <div class="wrap">
    <div class="section-head">
      <div>
        <span class="eyebrow">§ 02 — The Build</span>
        <h2 class="display">From the first coffee to the first ride: ten to fourteen weeks.</h2>
      </div>
      <span class="kicker"><span class="num">04</span> Steps · One welder, one frame</span>
    </div>

    <div class="steps">
      <div class="step">
        <span class="n">STEP 01</span>
        <h4>Fitting &amp; brief</h4>
        <p>Sixty minutes at the workshop. We measure you, your cargo, your usual route, and the doorways you actually need to fit through.</p>
        <span class="when">Week 1</span>
      </div>
      <div class="step">
        <span class="n">STEP 02</span>
        <h4>Geometry drawing</h4>
        <p>Mette draws the frame to scale, signs it by hand, and emails a PDF. You sign back. Nothing is welded until that signature.</p>
        <span class="when">Week 2–3</span>
      </div>
      <div class="step">
        <span class="n">STEP 03</span>
        <h4>Welding &amp; finish</h4>
        <p>Jonas cuts, TIGs and powder-coats the frame in the colour of your choice. Components sourced from Shimano, Schwalbe, Ergon.</p>
        <span class="when">Week 4–10</span>
      </div>
      <div class="step">
        <span class="n">STEP 04</span>
        <h4>Shakedown &amp; handover</h4>
        <p>A 200 km road test, brake bedding, a free first service at six months, and a folder with every torque value written down.</p>
        <span class="when">Week 11–14</span>
      </div>
    </div>
  </div>
</section>

<!-- ===================== WORKSHOP ===================== -->
<section class="block workshop" id="workshop">
  <div class="wrap">
    <div class="section-head">
      <div>
        <span class="eyebrow">§ 03 — The Workshop</span>
        <h2 class="display">A small shop on Jægersborggade. We make the bikes we want to ride.</h2>
      </div>
      <span class="kicker"><span class="num">04</span> People · 142 frames · 1 city</span>
    </div>

    <div class="ws-grid">
      <div>
        <p>Jonas welds. Mette draws. Kasper tunes. Sofie keeps the books and answers your email within a working day. We are not a brand in the usual sense — we are four people, two dogs, a 90&nbsp;m² workshop and a stubborn belief that a bicycle is something you should be able to walk back into the shop with, in twenty years, and have someone recognise it.</p>
        <p>Every Lumen frame is signed and dated on the underside of the bottom bracket. We keep the build sheet on file. We will always have the parts.</p>
        <div class="stats">
          <div class="stat"><b>2014</b><span>Workshop opened</span></div>
          <div class="stat"><b>142</b><span>Frames on the road</span></div>
          <div class="stat"><b>10 yr</b><span>Frame warranty</span></div>
          <div class="stat"><b>20 yr</b><span>Spare parts promise</span></div>
        </div>
      </div>

      <figure class="ws-photo" aria-label="The Lumen Cycles workshop, technical illustration of a bench, vise and frame jig">
        <span class="corner c1">FIG. 04 / WORKSHOP</span>
        <span class="corner c2">JBG 47 · 2200 KBH N</span>
        <span class="corner c3">N 55°41′27″</span>
        <span class="corner c4">E 12°32′36″</span>
        <svg viewBox="0 0 560 420" role="img" aria-label="Workshop interior, frame on a jig">
          <defs>
            <pattern id="brick" width="40" height="20" patternUnits="userSpaceOnUse">
              <path d="M0 20 L40 20 M20 0 L20 20" stroke="#1a1a1722" stroke-width="0.6"/>
            </pattern>
          </defs>
          <rect width="560" height="280" fill="url(#brick)"/>
          <rect y="280" width="560" height="140" fill="#e8dcc4"/>
          <line x1="0" y1="280" x2="560" y2="280" stroke="#1a1a17" stroke-width="1.2"/>
          <!-- window -->
          <rect x="60" y="40" width="160" height="180" fill="none" stroke="#1a1a17" stroke-width="2"/>
          <line x1="140" y1="40" x2="140" y2="220" stroke="#1a1a17" stroke-width="1.5"/>
          <line x1="60" y1="130" x2="220" y2="130" stroke="#1a1a17" stroke-width="1.5"/>
          <!-- bike on jig -->
          <g fill="none" stroke="#1a1a17" stroke-width="2.2" stroke-linecap="round">
            <path d="M310 280 L310 200 L370 175"/>
            <path d="M310 200 L500 200"/>
            <path d="M500 280 L310 200"/>
            <path d="M500 200 L500 280"/>
            <path d="M310 280 L500 280"/>
            <path d="M310 200 L255 280"/>
            <line x1="310" y1="175" x2="310" y2="160"/>
            <line x1="280" y1="160" x2="340" y2="160"/>
          </g>
          <circle cx="255" cy="280" r="22" fill="none" stroke="#1a1a17" stroke-width="2"/>
          <circle cx="500" cy="280" r="22" fill="none" stroke="#1a1a17" stroke-width="2"/>
          <!-- tools -->
          <g stroke="#1a1a17" stroke-width="1.4" fill="none">
            <!-- bench -->
            <rect x="40" y="290" width="160" height="50" stroke-width="1.8"/>
            <line x1="40" y1="290" x2="200" y2="290"/>
            <!-- vise -->
            <rect x="160" y="270" width="36" height="22"/>
            <rect x="160" y="266" width="14" height="6" fill="#1a1a17"/>
            <!-- wrench -->
            <circle cx="80" cy="318" r="10"/>
            <line x1="88" y1="320" x2="120" y2="335"/>
            <line x1="120" y1="335" x2="125" y2="340"/>
          </g>
          <!-- hanging frames on wall -->
          <g fill="none" stroke="#1a1a17" stroke-width="1.2">
            <circle cx="380" cy="100" r="18"/>
            <circle cx="420" cy="100" r="18"/>
            <line x1="380" y1="100" x2="420" y2="100"/>
            <circle cx="460" cy="100" r="18"/>
            <circle cx="500" cy="100" r="18"/>
            <line x1="460" y1="100" x2="500" y2="100"/>
          </g>
          <!-- welder -->
          <g fill="#1a1a17">
            <rect x="468" y="240" width="40" height="30"/>
            <rect x="478" y="220" width="20" height="20"/>
            <circle cx="500" cy="270" r="2" fill="#b04a2a"/>
          </g>
          <text x="40" y="405" font-family="Menlo,monospace" font-size="9" fill="#3a3a33" letter-spacing="1.5">BENCH · VISE · FRAME JIG · HANGING BUILDS</text>
        </svg>
      </figure>
    </div>
  </div>
</section>

<!-- ===================== MATERIALS ===================== -->
<section class="block materials" id="materials">
  <div class="wrap">
    <div class="section-head">
      <div>
        <span class="eyebrow">§ 04 — Materials</span>
        <h2 class="display">Honest materials, chosen for the next twenty winters.</h2>
      </div>
      <span class="kicker"><span class="num">06</span> Components, all named</span>
    </div>
    <div class="mat-grid">
      <div class="mat">
        <svg class="ic" viewBox="0 0 32 32" fill="none" stroke="#1a1a17" stroke-width="1.5"><path d="M4 22 L4 10 L16 4 L28 10 L28 22 L16 28 Z"/><path d="M16 4 L16 28"/><path d="M4 10 L28 10"/></svg>
        <h4>4130 chromoly steel</h4>
        <p>The main triangle. Welded by hand, air-hardened, then powder-coated. Repairable by any frame builder on earth.</p>
      </div>
      <div class="mat">
        <svg class="ic" viewBox="0 0 32 32" fill="none" stroke="#1a1a17" stroke-width="1.5"><circle cx="16" cy="16" r="12"/><circle cx="16" cy="16" r="6"/><line x1="16" y1="4" x2="16" y2="28"/><line x1="4" y1="16" x2="28" y2="16"/></svg>
        <h4>Schwalbe Marathon</h4>
        <p>Plus or Pickup, depending on terrain. We size them up one level for a softer ride over cobbles.</p>
      </div>
      <div class="mat">
        <svg class="ic" viewBox="0 0 32 32" fill="none" stroke="#1a1a17" stroke-width="1.5"><path d="M6 22 L26 22 L22 10 L10 10 Z"/><line x1="12" y1="10" x2="12" y2="22"/><line x1="20" y1="10" x2="20" y2="22"/></svg>
        <h4>Baltic birch ply</h4>
        <p>12&nbsp;mm, void-free, linseed-oiled. Made in Riga, carried home in a friend's van. We will rebuild your box if it cracks.</p>
      </div>
      <div class="mat">
        <svg class="ic" viewBox="0 0 32 32" fill="none" stroke="#1a1a17" stroke-width="1.5"><rect x="4" y="10" width="24" height="14" rx="2"/><line x1="4" y1="16" x2="28" y2="16"/><circle cx="10" cy="20" r="1.5" fill="#1a1a17"/></svg>
        <h4>Shimano, Enviolo, Bafang</h4>
        <p>You choose. Alfine 8 belt-drive for low maintenance, Enviolo for hills, Bafang M420 mid-drive for the heaviest loads.</p>
      </div>
      <div class="mat">
        <svg class="ic" viewBox="0 0 32 32" fill="none" stroke="#1a1a17" stroke-width="1.5"><path d="M8 24 L8 8 L24 8 L24 24 Z"/><line x1="8" y1="14" x2="24" y2="14"/><line x1="14" y1="8" x2="14" y2="24"/></svg>
        <h4>RAL powder coat</h4>
        <p>Pick from 213 stock colours or send us a swatch. Baked at 200&nbsp;°C, with anti-chip treatment on the rear triangle.</p>
      </div>
      <div class="mat">
        <svg class="ic" viewBox="0 0 32 32" fill="none" stroke="#1a1a17" stroke-width="1.5"><circle cx="16" cy="16" r="12"/><path d="M16 6 L16 16 L24 20"/></svg>
        <h4>Twenty-year parts</h4>
        <p>We hold a record of every component on every bike, and we stock the spares for the lifetime of the frame.</p>
      </div>
    </div>
  </div>
</section>

<!-- ===================== VOICES ===================== -->
<section class="block voices">
  <div class="wrap">
    <div class="section-head">
      <div>
        <span class="eyebrow">§ 05 — On the Road</span>
        <h2 class="display">Three owners, three cities, one workshop they can name.</h2>
      </div>
      <span class="kicker"><span class="num">142</span> Frames · 9 countries</span>
    </div>
    <div class="vgrid">
      <article class="vq">
        <blockquote>I sold my second car for a Lumen long-tail and have not regretted it once in four winters. It is the most considered object I own.</blockquote>
        <div class="who"><span class="ava">A</span> Astrid · Vesterbro, KBH · MK II, 2022</div>
      </article>
      <article class="vq">
        <blockquote>They flew to Amsterdam to fit me, then came back twice for free adjustments. The bike is a decade old and rides like new.</blockquote>
        <div class="who"><span class="ava">T</span> Thijs · Amsterdam · MK I, 2018</div>
      </article>
      <article class="vq">
        <blockquote>We move a half-tonne of bread a week on the trike. It is the quietest, calmest tool in the bakery.</blockquote>
        <div class="who"><span class="ava">M</span> Marta · Juno Bageri, Malmö · MK III, 2021</div>
      </article>
    </div>
  </div>
</section>

<!-- ===================== FAQ ===================== -->
<section class="block faq" id="faq">
  <div class="wrap">
    <div class="section-head">
      <div>
        <span class="eyebrow">§ 06 — Questions</span>
        <h2 class="display">What people ask before they book.</h2>
      </div>
      <span class="kicker"><span class="num">08</span> Common answers</span>
    </div>
    <div class="faq-list">
      <details>
        <summary><span class="q"><span class="ix">01</span>How much does a Lumen cost?</span><span class="plus">+</span></summary>
        <div class="a">From €3,890 for a Short, €4,290 for a Long Tail, €5,490 for the Trike. The final price depends on drivetrain, colour and accessories — the configurator below gives you a real number.</div>
      </details>
      <details>
        <summary><span class="q"><span class="ix">02</span>How long is the wait?</span><span class="plus">+</span></summary>
        <div class="a">Nine to fourteen weeks from signed drawing to handover. We do not start welding until week three or four, so the deposit is fully refundable right up to that point.</div>
      </details>
      <details>
        <summary><span class="q"><span class="ix">03</span>Can I see one before I order?</span><span class="plus">+</span></summary>
        <div class="a">Yes. The workshop on Jægersborggade is open Tuesday to Saturday, 10–17. You can ride three of our demo bikes and we can fit you in the same visit. Bring your helmet and a heavy bag.</div>
      </details>
      <details>
        <summary><span class="q"><span class="ix">04</span>Do you ship outside Denmark?</span><span class="plus">+</span></summary>
        <div class="a">Yes — assembled and personally ridden by us before crate. We have delivered to Sweden, Norway, Germany, the Netherlands, Belgium, France, the UK and Switzerland. Shipping from €280.</div>
      </details>
      <details>
        <summary><span class="q"><span class="ix">05</span>What if my child outgrows the box?</span><span class="plus">+</span></summary>
        <div class="a">We rebuild. Baltic birch boxes are dimensioned in 40&nbsp;mm increments so we can extend them; Long Tail racks can swap to a larger deck. The price is always labour-only, not parts.</div>
      </details>
      <details>
        <summary><span class="q"><span class="ix">06</span>Electric or not?</span><span class="plus">+</span></summary>
        <div class="a">Your choice. About 70% of the bikes we ship are electric. We supply 250&nbsp;W Bafang M-series mid-drives and Bosch Performance lines, both with 500–625&nbsp;Wh removable batteries.</div>
      </details>
      <details>
        <summary><span class="q"><span class="ix">07</span>What is the warranty?</span><span class="plus">+</span></summary>
        <div class="a">Ten years on the frame, two years on the drivetrain and electrics, lifetime on the bearings. Free annual service for the first three years, then a flat €95.</div>
      </details>
      <details>
        <summary><span class="q"><span class="ix">08</span>Why no online checkout?</span><span class="plus">+</span></summary>
        <div class="a">Because the bike is wrong if it is not measured. We would rather lose a sale than ship a frame that does not fit you, your cargo, or the door to your building.</div>
      </details>
    </div>
  </div>
</section>

<!-- ===================== ORDER ===================== -->
<section class="block order" id="order">
  <div class="wrap">
    <div class="section-head">
      <div>
        <span class="eyebrow">§ 07 — Book</span>
        <h2 class="display">Reserve a build slot. We will reply within a working day.</h2>
      </div>
      <span class="kicker"><span class="num">04</span> Slots open for 2026</span>
    </div>
    <div class="order-grid">
      <div>
        <p>Tell us a little about the bike you have in mind and how you live with it. A short message is enough. We will reply with three things: the nearest available fitting date, a ballpark price, and a link to a one-page PDF that answers the questions most people ask next.</p>
        <ul class="checklist">
          <li><span class="ck">✓</span><span><b>Refundable deposit</b> — €400, returned up to the moment we start welding.</span></li>
          <li><span class="ck">✓</span><span><b>Free fitting</b> — in the workshop, on a demo bike, on us.</span></li>
          <li><span class="ck">✓</span><span><b>One welder, one frame</b> — the same person for every joint.</span></li>
          <li><span class="ck">✓</span><span><b>Annual service</b> — first three years free, then €95 flat for life.</span></li>
        </ul>
      </div>

      <form class="book" id="bookForm" novalidate>
        <h3>Reserve a build slot</h3>
        <p class="sub">04 of 2026 slots remaining</p>

        <div class="row2">
          <div class="field">
            <label for="name">Your name</label>
            <input id="name" name="name" type="text" required autocomplete="name" placeholder="Astrid Sørensen">
          </div>
          <div class="field">
            <label for="email">Email</label>
            <input id="email" name="email" type="email" required autocomplete="email" placeholder="you@somewhere.dk">
          </div>
        </div>

        <div class="row2">
          <div class="field">
            <label for="model">Model</label>
            <select id="model" name="model" required>
              <option value="">Choose a frame</option>
              <option>The Short · MK I</option>
              <option>The Long Tail · MK II</option>
              <option>The Trike · MK III</option>
              <option>Not sure yet</option>
            </select>
          </div>
          <div class="field">
            <label for="city">City</label>
            <input id="city" name="city" type="text" autocomplete="address-level2" placeholder="Copenhagen">
          </div>
        </div>

        <div class="field">
          <label for="note">What will it carry? (children, cargo, a dog, a bakery…)</label>
          <textarea id="note" name="note" placeholder="Two kids, 3 and 5, plus a weekly shop. Mostly Vesterbro, some bridge crossings."></textarea>
        </div>

        <button class="submit" type="submit">Request a fitting →</button>
        <p class="form-fine">We answer every email within one working day. We do not share your address.</p>
        <div class="form-ok" id="formOk">Thank you — your note is in. Mette will write back from the workshop by tomorrow evening.</div>
      </form>
    </div>
  </div>
</section>

<!-- ===================== FOOTER ===================== -->
<footer class="foot">
  <div class="foot-inner">
    <div class="foot-grid">
      <div class="foot">
        <div class="foot-brand">
          <svg class="brand-mark" viewBox="0 0 32 32" fill="none" aria-hidden="true">
            <circle cx="9" cy="22" r="6" stroke="#cdc6b6" stroke-width="1.5"/>
            <circle cx="25" cy="22" r="4" stroke="#cdc6b6" stroke-width="1.5"/>
            <path d="M9 22 L18 10 L25 22" stroke="#cdc6b6" stroke-width="1.5" fill="none"/>
            <path d="M13 10 L20 10" stroke="#cdc6b6" stroke-width="1.5"/>
            <circle cx="20" cy="10" r="1.6" fill="#b04a2a"/>
          </svg>
          Lumen Cycles
        </div>
        <p class="tagline">A small workshop on Jægersborggade, Nørrebro, Copenhagen. Custom cargo bikes, built to order, since 2014.</p>
      </div>
      <div class="foot">
        <h5>Workshop</h5>
        <ul>
          <li>Jægersborggade 47</li>
          <li>2200 Copenhagen N</li>
          <li>Open Tue–Sat · 10–17</li>
          <li>+45 33 14 02 18</li>
        </ul>
      </div>
      <div class="foot">
        <h5>Bikes</h5>
        <ul>
          <li><a href="#models">The Short</a></li>
          <li><a href="#models">The Long Tail</a></li>
          <li><a href="#models">The Trike</a></li>
          <li><a href="#materials">Components</a></li>
        </ul>
      </div>
      <div class="foot">
        <h5>Service</h5>
        <ul>
          <li><a href="#order">Book a fitting</a></li>
          <li><a href="#process">How we build</a></li>
          <li><a href="#faq">FAQ</a></li>
          <li><a href="mailto:hej@lumen.dk">hej@lumen.dk</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <span>© 2014–2026 Lumen Cycles ApS · CVR 36 12 47 09</span>
      <span>Made by hand, in Copenhagen.</span>
    </div>
  </div>
</footer>

<script>
  // Progressive enhancement: form submits inline, no network.
  (function(){
    var form = document.getElementById('bookForm');
    if(!form) return;
    var ok = document.getElementById('formOk');
    form.addEventListener('submit', function(e){
      e.preventDefault();
      var name = (form.querySelector('#name').value || '').trim();
      var email = (form.querySelector('#email').value || '').trim();
      var model = (form.querySelector('#model').value || '').trim();
      if(!name || !email || !model){
        var firstBad = form.querySelector(':invalid');
        if(firstBad) firstBad.focus();
        return;
      }
      if(ok){ ok.classList.add('show'); ok.textContent = 'Thank you, ' + name.split(' ')[0] + ' — your note is in. Mette will write back from the workshop by tomorrow evening.'; }
      form.reset();
    });

    // Smooth-scroll for in-page anchors (with sticky-bar offset)
    document.querySelectorAll('a[href^="#"]').forEach(function(a){
      a.addEventListener('click', function(e){
        var id = a.getAttribute('href');
        if(id.length < 2) return;
        var t = document.querySelector(id);
        if(!t) return;
        e.preventDefault();
        var y = t.getBoundingClientRect().top + window.pageYOffset - 70;
        window.scrollTo({top:y, behavior:'smooth'});
      });
    });
  })();
</script>
</body>
</html>

Compare with

MiniMax M3: other attempts