hypeorcode
Network offOpen alone (new tab)

Run details

Model
stepfun/step-5-preview
Route
OpenRouter API, one user message
Reasoning
provider default, 32,772 reasoning tokens
Limits
60 min · 64,000 output tokens
Date
21 Oct 2026
Time
4 min 7 s
Size
67 kB
Tokens
96 in, 52,764 out
List price
$0.14 ($1 in / $2.7 out per M)
Paid
$0.14

Raw files: output · meta.json

Exact prompt

Build the landing page for Lumen Cycles, a Copenhagen workshop that builds custom cargo bikes to order. Make it look like a real brand you would trust with 4,000 euros.

It must be one complete, self-contained HTML file: inline all CSS and JavaScript, and make no network requests of any kind (no CDNs, web fonts or remote images). Reply with the file in a single ```html code block.

Source

67 kB 2,173 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 in Copenhagen</title>
<meta name="description" content="Lumen Cycles builds custom cargo bikes to order in Copenhagen. Hand-welded frames, lifetime frame warranty, transparent builds from €4,180.">
<meta name="theme-color" content="#f7f4ee">
<style>
  :root{
    --paper:#f7f4ee;
    --paper-2:#efeae1;
    --card:#fffdf9;
    --ink:#14171a;
    --ink-soft:#4c5258;
    --line:#dcd5c7;
    --line-strong:#beb4a2;
    --copper:#b06135;
    --moss:#29412f;
    --signal:#d0702f;
    --shadow:0 50px 80px -60px rgba(20,23,26,.55);
  }

  *{box-sizing:border-box}

  html{
    scroll-behavior:smooth;
    scroll-padding-top:96px;
  }

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Helvetica Neue",Helvetica,Inter,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:17px;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }

  img,svg{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  h1,h2,h3,h4{margin:0;font-weight:640;letter-spacing:-.02em;line-height:1.08}
  p{margin:0}

  :focus-visible{
    outline:2px solid var(--signal);
    outline-offset:3px;
    border-radius:6px;
  }

  .shell{
    width:min(1240px,92vw);
    margin-inline:auto;
  }

  .section{
    padding:clamp(3.5rem,8vw,7rem) 0;
  }

  .eyebrow,.kicker{
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.19em;
    color:var(--ink-soft);
    margin-bottom:.8rem;
  }

  .kicker{
    color:var(--copper);
    font-weight:600;
  }

  h1{
    font-size:clamp(2.7rem,7vw,4.7rem);
    max-width:14ch;
  }

  h2{
    font-size:clamp(2rem,4.3vw,3.15rem);
  }

  h3{
    font-size:1.45rem;
  }

  .lead{
    font-size:1.1rem;
    color:var(--ink-soft);
    max-width:58ch;
  }

  .fineprint{
    font-size:.86rem;
    color:var(--ink-soft);
  }

  /* Header */
  .site-header{
    position:sticky;
    top:0;
    z-index:60;
    background:rgba(247,244,238,.88);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-bottom:1px solid transparent;
    transition:border-color .25s ease,background .25s ease;
  }

  .site-header.is-stuck{
    border-bottom-color:var(--line);
  }

  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
    padding:1rem 0;
    position:relative;
  }

  .brand{
    display:flex;
    align-items:center;
    gap:.75rem;
    font-weight:600;
  }

  .brand-mark{
    width:38px;
    height:38px;
    color:var(--ink);
  }

  .brand-text strong{
    display:block;
    font-size:.98rem;
    letter-spacing:.14em;
    text-transform:uppercase;
  }

  .brand-text em{
    display:block;
    font-style:normal;
    font-size:.73rem;
    letter-spacing:.11em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-top:2px;
  }

  .site-nav{
    display:flex;
    align-items:center;
    gap:1.6rem;
  }

  .site-nav a:not(.btn){
    font-size:.94rem;
    color:var(--ink-soft);
    transition:color .18s ease;
  }

  .site-nav a:not(.btn):hover{
    color:var(--ink);
  }

  .nav-toggle{
    display:none;
    align-items:center;
    gap:.55rem;
    border:1px solid var(--line-strong);
    background:transparent;
    color:var(--ink);
    border-radius:999px;
    padding:.55rem .9rem;
    font:inherit;
    font-size:.88rem;
    font-weight:600;
    cursor:pointer;
  }

  .nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{
    display:block;
    width:16px;
    height:1.5px;
    background:var(--ink);
    content:"";
  }

  .nav-toggle-bars{position:relative}
  .nav-toggle-bars::before{position:absolute;top:-5px}
  .nav-toggle-bars::after{position:absolute;top:5px}

  /* Buttons */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    border-radius:999px;
    padding:.95rem 1.5rem;
    border:1px solid var(--ink);
    background:var(--ink);
    color:var(--paper);
    font-weight:600;
    font-size:.95rem;
    cursor:pointer;
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
  }

  .btn:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 26px -16px rgba(20,23,26,.45);
  }

  .btn.ghost{
    background:transparent;
    color:var(--ink);
    border-color:var(--line-strong);
  }

  .btn.small{
    padding:.65rem 1.1rem;
    font-size:.88rem;
  }

  .btn.block{
    width:100%;
  }

  .cta-row{
    display:flex;
    flex-wrap:wrap;
    gap:.85rem;
    margin-top:2rem;
  }

  .text-link{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    font-weight:600;
    border-bottom:1px solid var(--line-strong);
    padding-bottom:2px;
    transition:border-color .18s ease,transform .18s ease;
  }

  .text-link:hover{
    border-color:var(--ink);
    transform:translateX(2px);
  }

  .icon{
    width:1.05em;
    height:1.05em;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  /* Hero */
  .hero{
    background:linear-gradient(180deg,#faf8f3 0%,var(--paper) 68%);
  }

  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:clamp(2rem,5vw,4.2rem);
    align-items:center;
    padding:clamp(1.5rem,5vw,3.5rem) 0 clamp(2rem,7vw,4.5rem);
  }

  .hero-copy h1{
    margin-bottom:1.4rem;
  }

  .hero-copy .accent{
    color:var(--copper);
    font-style:normal;
  }

  .hero-stats{
    display:flex;
    flex-wrap:wrap;
    gap:2rem;
    margin:2.2rem 0 1.4rem;
    padding:1.5rem 0 0;
    border-top:1px solid var(--line);
    list-style:none;
  }

  .hero-stats strong{
    display:block;
    font-size:1.45rem;
    letter-spacing:-.02em;
  }

  .hero-stats span{
    display:block;
    font-size:.85rem;
    color:var(--ink-soft);
    margin-top:.15rem;
  }

  .visual-card{
    position:relative;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:28px;
    overflow:hidden;
    box-shadow:var(--shadow);
  }

  .visual-card svg.hero-bike{
    width:100%;
    height:auto;
  }

  .visual-meta{
    position:absolute;
    inset:auto 1.4rem 1.3rem;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:1rem;
    pointer-events:none;
  }

  .meta-tag{
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.17em;
    color:var(--ink-soft);
  }

  .meta-title{
    font-weight:650;
    letter-spacing:-.01em;
  }

  .meta-value{
    font-weight:650;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:999px;
    padding:.35rem .7rem;
    font-size:.86rem;
  }

  .chip{
    position:absolute;
    z-index:3;
    background:rgba(255,253,249,.94);
    border:1px solid var(--line);
    border-radius:999px;
    padding:.4rem .75rem;
    font-size:.78rem;
    white-space:nowrap;
    box-shadow:0 18px 30px -25px rgba(20,23,26,.5);
  }

  .chip-1{top:8%;left:6%}
  .chip-2{top:38%;right:5%}

  .spin{
    transform-box:view-box;
    animation:wheel-spin 16s linear infinite;
  }

  .wheel-rear{transform-origin:240px 380px}
  .wheel-front{transform-origin:720px 380px}

  @keyframes wheel-spin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
  }

  /* Suppliers */
  .suppliers{
    border-block:1px solid var(--line);
    background:var(--paper-2);
  }

  .suppliers .shell{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:1rem 2rem;
    padding:1.2rem 0;
  }

  .suppliers p{
    font-size:.76rem;
    letter-spacing:.17em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin:0;
  }

  .supplier-list{
    display:flex;
    flex-wrap:wrap;
    gap:1.3rem;
    margin:0;
    padding:0;
    list-style:none;
    font-size:.86rem;
    font-weight:600;
    letter-spacing:.02em;
  }

  .supplier-list li{
    opacity:.72;
  }

  /* Models */
  .section-head{
    max-width:760px;
    margin-bottom:clamp(2rem,4vw,3rem);
  }

  .section-head p{
    color:var(--ink-soft);
    margin-top:1rem;
    max-width:62ch;
  }

  .model-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:1.5rem;
  }

  .model-card{
    display:flex;
    flex-direction:column;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:24px;
    overflow:hidden;
    transition:transform .22s ease,box-shadow .22s ease;
  }

  .model-card:hover{
    transform:translateY(-4px);
    box-shadow:0 40px 60px -50px rgba(20,23,26,.5);
  }

  .model-art{
    aspect-ratio:16/10;
    display:grid;
    place-items:center;
    padding:1.5rem;
    background:linear-gradient(180deg,#faf7f1,#ece7dd);
    border-bottom:1px solid var(--line);
    color:var(--ink);
  }

  .model-art svg{
    width:100%;
    max-width:280px;
    height:auto;
  }

  .model-body{
    padding:1.6rem;
  }

  .model-index{
    font-size:.76rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--copper);
    font-weight:600;
  }

  .model-body h3{
    margin:.5rem 0 .55rem;
  }

  .model-body p{
    color:var(--ink-soft);
  }

  .model-specs{
    list-style:none;
    margin:1.3rem 0;
    padding:1.1rem 0 0;
    border-top:1px solid var(--line);
    display:grid;
    gap:.55rem;
  }

  .model-specs li{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    font-size:.93rem;
  }

  .model-specs span{color:var(--ink-soft)}
  .model-specs strong{font-weight:600}

  /* Configurator */
  .config{
    background:linear-gradient(180deg,var(--paper),#eae5dc);
    border-block:1px solid var(--line);
  }

  .config-grid{
    display:grid;
    grid-template-columns:1.45fr .9fr;
    gap:2rem;
    align-items:start;
  }

  .build-form{
    display:grid;
    gap:1.6rem;
  }

  .option-group{
    border:0;
    margin:0;
    padding:0;
  }

  .option-group legend{
    padding:0;
    margin-bottom:.9rem;
    font-size:1.1rem;
    font-weight:650;
  }

  .option-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(225px,1fr));
    gap:.85rem;
  }

  .option-card{
    position:relative;
    display:block;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:16px;
    padding:1rem;
    cursor:pointer;
    transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
  }

  .option-card:hover{
    border-color:var(--line-strong);
  }

  .option-card.is-selected{
    border-color:var(--ink);
    box-shadow:inset 0 0 0 1px var(--ink);
  }

  .option-card input{
    position:absolute;
    opacity:0;
    pointer-events:none;
  }

  .option-title{
    display:block;
    font-weight:640;
    margin-bottom:.25rem;
  }

  .option-desc{
    display:block;
    font-size:.89rem;
    color:var(--ink-soft);
    line-height:1.45;
  }

  .option-price{
    display:block;
    margin-top:.7rem;
    font-size:.9rem;
    font-weight:650;
    color:var(--moss);
  }

  .field-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1rem;
    padding-top:.6rem;
  }

  .field{
    display:grid;
    gap:.4rem;
    font-size:.85rem;
    color:var(--ink-soft);
    font-weight:600;
    letter-spacing:.01em;
  }

  .field input,.field textarea{
    font:inherit;
    font-size:.95rem;
    font-weight:400;
    color:var(--ink);
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:.8rem .85rem;
    transition:border-color .18s ease,box-shadow .18s ease;
  }

  .field input:focus,.field textarea:focus{
    outline:none;
    border-color:var(--ink);
    box-shadow:0 0 0 3px rgba(20,23,26,.08);
  }

  .summary-card{
    position:sticky;
    top:110px;
    background:var(--ink);
    color:var(--paper);
    border-radius:24px;
    padding:1.8rem;
    box-shadow:var(--shadow);
  }

  .summary-card .kicker{
    color:#d7b096;
    margin-bottom:.55rem;
  }

  .summary-card h3{
    font-size:1.7rem;
  }

  .summary-frame-desc{
    margin-top:.7rem;
    font-size:.93rem;
    color:rgba(247,244,238,.78);
  }

  .summary-specs{
    display:grid;
    gap:.35rem;
    margin:1.2rem 0;
    font-size:.88rem;
    color:rgba(247,244,238,.78);
  }

  .summary-specs strong{
    color:var(--paper);
    font-weight:600;
  }

  .summary-card dl{
    margin:0;
    display:grid;
    gap:.85rem;
  }

  .summary-card dl > div{
    padding-top:.75rem;
    border-top:1px solid rgba(247,244,238,.16);
  }

  .summary-card dt{
    font-size:.74rem;
    text-transform:uppercase;
    letter-spacing:.15em;
    color:rgba(247,244,238,.6);
    margin-bottom:.2rem;
  }

  .summary-card dd{
    margin:0;
    display:flex;
    justify-content:space-between;
    gap:1rem;
    font-size:.96rem;
  }

  .summary-card dd .included{
    color:rgba(247,244,238,.55);
    font-size:.87rem;
  }

  .price-row{
    margin-top:1.3rem;
    padding-top:1.1rem;
    border-top:1px solid rgba(247,244,238,.22);
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:1rem;
  }

  .price-row span{
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.15em;
    color:rgba(247,244,238,.65);
  }

  .price-number{
    font-size:2rem;
    font-weight:650;
    letter-spacing:-.02em;
    line-height:1;
  }

  .summary-lead{
    margin-top:.6rem;
    font-size:.88rem;
    color:rgba(247,244,238,.78);
  }

  .summary-includes{
    margin:1.4rem 0;
    padding:0;
    list-style:none;
    display:grid;
    gap:.45rem;
    font-size:.86rem;
    color:rgba(247,244,238,.76);
  }

  .summary-includes li{
    display:flex;
    gap:.5rem;
    align-items:flex-start;
  }

  .summary-includes .icon{
    color:#d7b096;
    flex:none;
    margin-top:.25rem;
  }

  .summary-card .btn{
    background:var(--paper);
    color:var(--ink);
    border-color:var(--paper);
  }

  .summary-card .btn.ghost{
    background:transparent;
    color:var(--paper);
    border-color:rgba(247,244,238,.42);
    margin-top:.7rem;
  }

  .mail-status{
    margin-top:.9rem;
    font-size:.84rem;
    color:#d7b096;
    min-height:1.2em;
  }

  .config-note{
    margin-top:2rem;
    padding:1.1rem 1.2rem;
    border:1px dashed var(--line-strong);
    border-radius:16px;
    font-size:.87rem;
    color:var(--ink-soft);
    background:rgba(255,253,249,.6);
  }

  /* Process */
  .timeline{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:1.5rem;
  }

  .timeline li{
    border-top:2px solid var(--line);
    padding-top:1rem;
  }

  .timeline .step{
    display:block;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.16em;
    color:var(--copper);
    font-weight:600;
    margin-bottom:.55rem;
  }

  .timeline h3{
    font-size:1.2rem;
    margin-bottom:.5rem;
  }

  .timeline p{
    font-size:.93rem;
    color:var(--ink-soft);
  }

  /* Specs */
  .specs-grid{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:clamp(2rem,5vw,3.5rem);
    align-items:start;
  }

  .spec-list{
    list-style:none;
    margin:2rem 0 0;
    padding:0;
    display:grid;
    gap:1rem;
  }

  .spec-list li{
    display:grid;
    grid-template-columns:22px 1fr;
    gap:.75rem;
    font-size:.96rem;
    color:var(--ink-soft);
  }

  .spec-list li strong{
    color:var(--ink);
    font-weight:600;
  }

  .spec-list .icon{
    margin-top:.35rem;
    color:var(--copper);
  }

  .table-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:22px;
    padding:.5rem 0;
    box-shadow:0 40px 60px -55px rgba(20,23,26,.35);
  }

  .table-scroll{
    overflow-x:auto;
  }

  .spec-table{
    width:100%;
    border-collapse:collapse;
    min-width:680px;
  }

  .spec-table th,.spec-table td{
    text-align:left;
    vertical-align:top;
    padding:1rem 1.2rem;
    border-bottom:1px solid var(--line);
    font-size:.93rem;
  }

  .spec-table thead th{
    font-size:.8rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
    font-weight:600;
  }

  .spec-table tbody th{
    font-weight:600;
    color:var(--ink);
    width:22%;
  }

  .spec-table td{
    color:var(--ink-soft);
  }

  .spec-table tr:last-child th,.spec-table tr:last-child td{
    border-bottom:0;
  }

  /* Workshop */
  .workshop-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(2rem,5vw,3.5rem);
    align-items:center;
  }

  .workshop-panel{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:24px;
    padding:1.5rem;
    box-shadow:0 40px 70px -60px rgba(20,23,26,.45);
  }

  .workshop-map{
    display:block;
    width:100%;
    height:auto;
    border-radius:16px;
    background:#ece7dd;
  }

  .workshop-address{
    margin-top:1.3rem;
    display:grid;
    gap:1rem;
  }

  .workshop-address a{
    font-weight:600;
  }

  .hours{
    margin:0;
    display:grid;
    gap:.35rem;
    font-size:.92rem;
    color:var(--ink-soft);
  }

  .hours dt{
    color:var(--ink);
    font-weight:600;
  }

  /* Quotes */
  .quotes{
    background:var(--ink);
    color:var(--paper);
  }

  .quotes .kicker{
    color:#d7b096;
  }

  .quote-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
    gap:2.2rem;
  }

  .quote-grid blockquote{
    margin:0;
    font-size:1.16rem;
    line-height:1.55;
    letter-spacing:-.01em;
  }

  .quote-grid footer{
    margin-top:1.1rem;
    font-size:.87rem;
    color:rgba(247,244,238,.65);
  }

  .quote-grid footer strong{
    color:var(--paper);
    font-weight:600;
  }

  /* FAQ */
  .faq-grid{
    display:grid;
    gap:.85rem;
    max-width:920px;
  }

  details{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:16px;
    padding:1.05rem 1.3rem;
  }

  details summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    cursor:pointer;
    font-weight:600;
    list-style:none;
  }

  details summary::-webkit-details-marker{display:none}

  .faq-icon{
    width:26px;
    height:26px;
    border:1px solid var(--line-strong);
    border-radius:999px;
    display:grid;
    place-items:center;
    flex:none;
    transition:transform .2s ease,background .2s ease,color .2s ease;
  }

  details[open] .faq-icon{
    transform:rotate(45deg);
    background:var(--ink);
    color:var(--paper);
    border-color:var(--ink);
  }

  details p{
    margin-top:.85rem;
    color:var(--ink-soft);
    font-size:.95rem;
  }

  /* CTA */
  .cta-panel{
    background:var(--moss);
    color:var(--paper);
    border-radius:28px;
    padding:clamp(2rem,6vw,4rem);
    text-align:center;
    box-shadow:var(--shadow);
  }

  .cta-panel .kicker{
    color:#d7b096;
  }

  .cta-panel h2{
    max-width:24ch;
    margin-inline:auto;
  }

  .cta-panel p{
    margin-top:1.1rem;
    color:rgba(247,244,238,.78);
    max-width:60ch;
    margin-inline:auto;
  }

  .cta-panel .cta-row{
    justify-content:center;
  }

  .cta-panel .btn{
    background:var(--paper);
    color:var(--ink);
    border-color:var(--paper);
  }

  .cta-panel .btn.ghost{
    background:transparent;
    color:var(--paper);
    border-color:rgba(247,244,238,.45);
  }

  /* Footer */
  .site-footer{
    background:var(--paper-2);
    border-top:1px solid var(--line);
    padding:3rem 0 1.7rem;
    font-size:.9rem;
  }

  .footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:2rem;
  }

  .footer-col h3{
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.16em;
    color:var(--ink-soft);
    margin-bottom:.9rem;
  }

  .footer-col ul{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:.45rem;
  }

  .footer-col a:hover{
    text-decoration:underline;
  }

  .footer-brand p{
    margin-top:1rem;
    color:var(--ink-soft);
    max-width:34ch;
  }

  .footer-bottom{
    margin-top:2.5rem;
    padding-top:1.2rem;
    border-top:1px solid var(--line);
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:.8rem;
    color:var(--ink-soft);
    font-size:.84rem;
  }

  /* Responsive */
  @media (max-width:1080px){
    .hero-grid,.config-grid,.specs-grid,.workshop-grid{
      grid-template-columns:1fr;
    }

    .summary-card{
      position:relative;
      top:0;
    }

    .visual-card{
      order:-1;
    }
  }

  @media (max-width:860px){
    .nav-toggle{display:inline-flex}

    .site-nav{
      display:none;
      position:absolute;
      top:calc(100% + .7rem);
      left:0;
      right:0;
      background:var(--card);
      border:1px solid var(--line);
      border-radius:18px;
      padding:1.2rem;
      flex-direction:column;
      align-items:flex-start;
      gap:.9rem;
      box-shadow:0 40px 60px -50px rgba(20,23,26,.5);
    }

    .site-nav.is-open{display:flex}
    .header-inner{gap:1rem}
    .hero-copy h1{max-width:none}
  }

  @media (max-width:620px){
    body{font-size:16px}
    .hero-stats{gap:1.2rem}
    .visual-meta{inset:auto 1rem 1rem}
    .chip{display:none}
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .spin{animation:none}
    *{transition-duration:.001ms!important}
  }
</style>
</head>
<body id="top">

<svg aria-hidden="true" focusable="false" style="position:absolute;width:0;height:0;overflow:hidden">
  <symbol id="i-arrow" viewBox="0 0 24 24">
    <path d="M4 12h15m0 0-6-6m6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
  </symbol>
  <symbol id="i-plus" viewBox="0 0 24 24">
    <path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
  </symbol>
  <symbol id="i-check" viewBox="0 0 24 24">
    <path d="M4 12.5l5 5L20 6.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
  </symbol>

  <symbol id="g-longtail" viewBox="0 0 180 100">
    <g fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="42" cy="68" r="19"/>
      <circle cx="42" cy="68" r="10" stroke-width="1.6"/>
      <circle cx="142" cy="68" r="19"/>
      <circle cx="142" cy="68" r="10" stroke-width="1.6"/>
      <path d="M14 28h72v14H14z"/>
      <path d="M52 42v14M88 42v14" stroke-width="3"/>
      <path d="M96 46L70 68M96 46l30 22"/>
      <path d="M96 46h36"/>
      <path d="M124 52l18 16M120 38h24"/>
      <path d="M96 40v16" stroke-width="3"/>
    </g>
  </symbol>

  <symbol id="g-box" viewBox="0 0 180 100">
    <g fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="36" cy="70" r="18"/>
      <circle cx="36" cy="70" r="9" stroke-width="1.6"/>
      <circle cx="146" cy="70" r="18"/>
      <circle cx="146" cy="70" r="9" stroke-width="1.6"/>
      <path d="M96 14h44v48H96z"/>
      <path d="M96 32H68M96 20H68" stroke-width="3"/>
      <path d="M96 38L64 70M64 70H36M64 70l62-8"/>
      <path d="M64 52h20" stroke-width="3"/>
    </g>
  </symbol>

  <symbol id="g-trike" viewBox="0 0 180 100">
    <g fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="44" cy="56" r="16"/>
      <circle cx="122" cy="30" r="14"/>
      <circle cx="122" cy="80" r="14"/>
      <path d="M44 56 76 48 122 30M76 48 122 80M44 56 36 72"/>
      <path d="M76 38h34v20H76z"/>
      <path d="M76 48h34" stroke-width="2"/>
    </g>
  </symbol>
</svg>

<header class="site-header">
  <div class="shell header-inner">
    <a class="brand" href="#top">
      <span class="brand-mark" aria-hidden="true">
        <svg viewBox="0 0 40 40">
          <circle cx="20" cy="20" r="17.5" fill="none" stroke="currentColor" stroke-width="2"/>
          <path d="M13 26V14h10M13 20h8" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
          <circle cx="27" cy="27" r="2.2" fill="#b06135"/>
        </svg>
      </span>
      <span class="brand-text">
        <strong>Lumen Cycles</strong>
        <em>Copenhagen · Custom cargo</em>
      </span>
    </a>

    <nav class="site-nav" id="site-nav" aria-label="Main">
      <a href="#models">Models</a>
      <a href="#configurator">Configurator</a>
      <a href="#process">How we build</a>
      <a href="#workshop">Workshop</a>
      <a href="#faq">FAQ</a>
      <a class="btn small" href="#configurator">Start a build</a>
    </nav>

    <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav">
      <span class="nav-toggle-bars" aria-hidden="true"></span>Menu
    </button>
  </div>
</header>

<main>
  <section class="hero">
    <div class="shell hero-grid">
      <div class="hero-copy">
        <p class="eyebrow">Copenhagen workshop · Established 2012</p>
        <h1>Carry a life, <span class="accent">not just groceries.</span></h1>
        <p class="lead">Every Lumen is commissioned by one rider, drawn around your height and your route, then hand-welded and test-ridden in our Nørrebro workshop. You receive a cargo bike that behaves like a tool, not an accessory.</p>

        <div class="cta-row">
          <a class="btn" href="#configurator">Configure your Lumen</a>
          <a class="btn ghost" href="#workshop">Visit the workshop</a>
        </div>

        <ul class="hero-stats">
          <li><strong>6–10 weeks</strong><span>Bespoke build slot</span></li>
          <li><strong>180 kg</strong><span>Rider + cargo system</span></li>
          <li><strong>Lifetime</strong><span>Frame weld warranty</span></li>
        </ul>

        <p class="fineprint">From €4,180 incl. VAT · 20% deposit locks your frame slot · Free EU delivery on all builds</p>
      </div>

      <div class="visual-card">
        <span class="chip chip-1">Frame builder: F.V.</span>
        <span class="chip chip-2">35 km loaded test ride</span>

        <svg class="hero-bike" viewBox="0 0 900 620" role="img" aria-label="Side illustration of a Lumen 01 longtail cargo bike on a Copenhagen street">
          <title>Lumen 01 longtail cargo bike</title>
          <defs>
            <linearGradient id="hero-sky" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stop-color="#faf7f1"/>
              <stop offset="1" stop-color="#e8e3da"/>
            </linearGradient>
            <radialGradient id="hero-sun" cx="0.5" cy="0.5" r="0.5">
              <stop offset="0" stop-color="#d98a50" stop-opacity="0.4"/>
              <stop offset="1" stop-color="#d98a50" stop-opacity="0"/>
            </radialGradient>
          </defs>

          <rect width="900" height="620" fill="url(#hero-sky)"/>
          <circle cx="690" cy="130" r="190" fill="url(#hero-sun)"/>

          <path d="M0 470h112v-58h60v58h68v-34h54v34h78v-72h58v72h84v-42h56v42h82v-62h58v62h86v-36h58v36h84v-80h58v80H0z" fill="#dbd3c3" opacity=".75"/>
          <rect y="470" width="900" height="150" fill="#ede8de"/>
          <path d="M0 580H900" stroke="#ddd5c6" stroke-width="5" stroke-dasharray="52 36"/>

          <g class="bike" fill="none" stroke="#15181b" stroke-width="7" stroke-linecap="round" stroke-linejoin="round">
            <g class="spin wheel-rear">
              <circle cx="240" cy="380" r="100"/>
              <circle cx="240" cy="380" r="82" stroke-width="2.5"/>
              <path d="M240 298v164M158 380h164M190 330l100 100M190 430l100-100" stroke-width="2.5"/>
            </g>

            <g class="spin wheel-front">
              <circle cx="720" cy="380" r="100"/>
              <circle cx="720" cy="380" r="82" stroke-width="2.5"/>
              <path d="M720 298v164M638 380h164M670 330l100 100M670 430l100-100" stroke-width="2.5"/>
            </g>

            <path d="M92 204h336v28H92z"/>
            <path d="M176 232v136M326 232v136" stroke-width="5"/>

            <path d="M424 232L240 380" stroke-width="6"/>
            <path d="M424 424L240 380" stroke-width="6"/>
            <path d="M424 424L418 232" stroke-width="7"/>
            <path d="M418 232L648 240" stroke-width="7"/>
            <path d="M424 424L652 306" stroke-width="7"/>
            <path d="M652 306V236" stroke-width="8"/>
            <path d="M652 306L720 380" stroke-width="7"/>

            <path d="M650 244l-30-28" stroke-width="5"/>
            <path d="M590 214h56" stroke-width="6"/>
            <path d="M586 214v14M646 214v10" stroke-width="6"/>

            <path d="M418 232L434 192" stroke-width="5"/>
            <path d="M396 180h74c11 0 17 5 17 12 0 8-6 12-17 12h-74c-11 0-17-4-17-12 0-7 6-12 17-12z" fill="#15181b" stroke-width="4"/>

            <circle cx="424" cy="424" r="14" fill="#faf7f1" stroke-width="4"/>
            <path d="M424 424l-24 30h44z" fill="#15181b" stroke-width="4"/>

            <circle cx="92" cy="216" r="7" fill="#d98a50" stroke="none"/>
            <circle cx="589" cy="278" r="7" fill="#d98a50" stroke="none"/>
          </g>
        </svg>

        <div class="visual-meta">
          <div>
            <p class="meta-tag">On the jig</p>
            <p class="meta-title">Lumen 01 — Longtail</p>
          </div>
          <p class="meta-value">€4,180 base</p>
        </div>
      </div>
    </div>
  </section>

  <section class="suppliers" aria-label="Component partners">
    <div class="shell">
      <p>Our bench is stocked with</p>
      <ul class="supplier-list">
        <li>Rohloff</li>
        <li>Shimano</li>
        <li>Gates Carbon Drive</li>
        <li>Enviolo</li>
        <li>Magura</li>
        <li>Schwalbe</li>
        <li>SON</li>
        <li>Brooks England</li>
      </ul>
    </div>
  </section>

  <section class="section" id="models">
    <div class="shell">
      <div class="section-head">
        <p class="kicker">Models</p>
        <h2>Three frames. Infinite commissions.</h2>
        <p>All three start on the same hand-welded method and the same service promise. The parts list is chosen around your route, your weather, and the heaviest thing you realistically carry—not the catalogue’s cheapest option.</p>
      </div>

      <div class="model-grid">
        <article class="model-card">
          <div class="model-art"><svg viewBox="0 0 180 100" aria-hidden="true"><use href="#g-longtail"/></svg></div>
          <div class="model-body">
            <p class="model-index">Lumen 01</p>
            <h3>Longtail</h3>
            <p>A long, low deck behind the saddle. Two children, four crates, one very large dog. Still fits a cellar bike lift.</p>
            <ul class="model-specs">
              <li><span>From</span><strong>€4,180</strong></li>
              <li><span>Cargo deck</span><strong>80 kg</strong></li>
              <li><span>Max system</span><strong>180 kg</strong></li>
              <li><span>Wheels</span><strong>26 in</strong></li>
              <li><span>Build slot</span><strong>6–8 weeks</strong></li>
            </ul>
            <a class="text-link" href="#configurator" data-configure="longtail">Configure the Longtail <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
          </div>
        </article>

        <article class="model-card">
          <div class="model-art"><svg viewBox="0 0 180 100" aria-hidden="true"><use href="#g-box"/></svg></div>
          <div class="model-body">
            <p class="model-index">Lumen 02</p>
            <h3>Front Box</h3>
            <p>A step-through frame around a welded 350 L front box. Built for bakeries, florists, couriers, and anyone carrying eggs for a living.</p>
            <ul class="model-specs">
              <li><span>From</span><strong>€5,250</strong></li>
              <li><span>Cargo volume</span><strong>350 L</strong></li>
              <li><span>Max system</span><strong>230 kg</strong></li>
              <li><span>Wheels</span><strong>20 in</strong></li>
              <li><span>Build slot</span><strong>7–9 weeks</strong></li>
            </ul>
            <a class="text-link" href="#configurator" data-configure="box">Configure the Front Box <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
          </div>
        </article>

        <article class="model-card">
          <div class="model-art"><svg viewBox="0 0 180 100" aria-hidden="true"><use href="#g-trike"/></svg></div>
          <div class="model-body">
            <p class="model-index">Lumen 03</p>
            <h3>Tilt Trike</h3>
            <p>Independent tilting front geometry with a planted twin rear cargo deck. For stove deliveries, three children, or a bass amp and a cello.</p>
            <ul class="model-specs">
              <li><span>From</span><strong>€6,150</strong></li>
              <li><span>Rear deck</span><strong>150 kg</strong></li>
              <li><span>Max system</span><strong>240 kg</strong></li>
              <li><span>Wheels</span><strong>24 in</strong></li>
              <li><span>Build slot</span><strong>8–10 weeks</strong></li>
            </ul>
            <a class="text-link" href="#configurator" data-configure="trike">Configure the Tilt Trike <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
          </div>
        </article>
      </div>
    </div>
  </section>

  <section class="section config" id="configurator">
    <div class="shell">
      <div class="section-head">
        <p class="kicker">Configurator</p>
        <h2>Build your Lumen before it exists</h2>
        <p>Choose the systems now, refine every detail after a 45-minute fitting conversation. Nothing in this configurator is a fake starting price—bells, lights, guards, road-legal lighting, VAT, and EU delivery are already included.</p>
      </div>

      <div class="config-grid">
        <form class="build-form" id="build-form" novalidate>
          <fieldset class="option-group" data-summary-label="Frame">
            <legend>1. Frame</legend>
            <div class="option-grid">
              <label class="option-card is-selected">
                <input type="radio" name="frame" value="longtail" data-price="4180" data-lead="6" data-name="Lumen 01 Longtail" data-desc="Long low deck behind the saddle. Easy to park, stable with two children." data-payload="80 kg rear deck" data-wheels="26 in" data-weight="25.8 kg" checked>
                <span class="option-title">Lumen 01 · Longtail</span>
                <span class="option-desc">Everyday family and grocery cargo. Fits standard cellar stair angle.</span>
                <span class="option-price">€4,180</span>
              </label>

              <label class="option-card">
                <input type="radio" name="frame" value="box" data-price="5250" data-lead="7" data-name="Lumen 02 Front Box" data-desc="Step-through frame with welded 350 L front cargo box." data-payload="150 kg front box" data-wheels="20 in" data-weight="30.2 kg">
                <span class="option-title">Lumen 02 · Front Box</span>
                <span class="option-desc">Bakery, florist, and business cargo with low step-through access.</span>
                <span class="option-price">€5,250</span>
              </label>

              <label class="option-card">
                <input type="radio" name="frame" value="trike" data-price="6150" data-lead="8" data-name="Lumen 03 Tilt Trike" data-desc="Tilting three-wheel chassis with twin rear deck and maximum stability." data-payload="150 kg rear deck" data-wheels="24 in" data-weight="35.4 kg">
                <span class="option-title">Lumen 03 · Tilt Trike</span>
                <span class="option-desc">Heavy deliveries and low-speed stability with real leaning geometry.</span>
                <span class="option-price">€6,150</span>
              </label>
            </div>
          </fieldset>

          <fieldset class="option-group" data-summary-label="Drivetrain">
            <legend>2. Drivetrain</legend>
            <div class="option-grid">
              <label class="option-card is-selected">
                <input type="radio" name="drive" value="cdx" data-price="0" data-name="Gates Carbon Drive CDX" checked>
                <span class="option-title">Gates CDX single-speed</span>
                <span class="option-desc">Belt drive, no derailleur, almost no maintenance. Best for flat Copenhagen.</span>
                <span class="option-price">Included</span>
              </label>

              <label class="option-card">
                <input type="radio" name="drive" value="enviolo" data-price="390" data-name="Enviolo City automatic">
                <span class="option-title">Enviolo City 380%</span>
                <span class="option-desc">Automatic shifting under load. Hands stay on the bar with two children aboard.</span>
                <span class="option-price">+ €390</span>
              </label>

              <label class="option-card">
                <input type="radio" name="drive" value="rohloff" data-price="790" data-name="Rohloff Speedhub 14">
                <span class="option-title">Rohloff Speedhub 14</span>
                <span class="option-desc">526% range for hills, ferries, and borrowed student trailers.</span>
                <span class="option-price">+ €790</span>
              </label>
            </div>
          </fieldset>

          <fieldset class="option-group" data-summary-label="Assist">
            <legend>3. Assist</legend>
            <div class="option-grid">
              <label class="option-card is-selected">
                <input type="radio" name="assist" value="none" data-price="0" data-name="Pedal only" checked>
                <span class="option-title">Pedal only</span>
                <span class="option-desc">A cargo bike that stays quiet, light, and free of charging rhythm rules.</span>
                <span class="option-price">Included</span>
              </label>

              <label class="option-card">
                <input type="radio" name="assist" value="bosch500" data-price="1290" data-lead="1" data-name="Bosch CX + 500 Wh">
                <span class="option-title">Bosch CX + 500 Wh</span>
                <span class="option-desc">250 W mid-drive, 70 Nm, frame-integrated battery and wiring.</span>
                <span class="option-price">+ €1,290</span>
              </label>

              <label class="option-card">
                <input type="radio" name="assist" value="bosch625" data-price="1490" data-lead="1" data-name="Bosch CX + 625 Wh">
                <span class="option-title">Bosch CX + 625 Wh</span>
                <span class="option-desc">For year-round commuting and café-distance cargo without route anxiety.</span>
                <span class="option-price">+ €1,490</span>
              </label>
            </div>
          </fieldset>

          <fieldset class="option-group" data-summary-label="Cargo setup">
            <legend>4. Cargo setup</legend>
            <div class="option-grid">
              <label class="option-card is-selected">
                <input type="radio" name="cargo" value="deck" data-price="0" data-name="Flat deck + side rails" checked>
                <span class="option-title">Flat deck + side rails</span>
                <span class="option-desc">Four load points, twin side rails, and one foot peg for passengers.</span>
                <span class="option-price">Included</span>
              </label>

              <label class="option-card">
                <input type="radio" name="cargo" value="bench" data-price="325" data-name="Child bench + backrest">
                <span class="option-title">Child bench + backrest</span>
                <span class="option-desc">Closed-cell seat, backrest, footwell, and accessible grab bar.</span>
                <span class="option-price">+ €325</span>
              </label>

              <label class="option-card">
                <input type="radio" name="cargo" value="box350" data-price="540" data-name="Welded 350 L cargo box">
                <span class="option-title">Welded 350 L box</span>
                <span class="option-desc">Enclosed powder-coated box with lockable hinged lid and internal lugs.</span>
                <span class="option-price">+ €540</span>
              </label>

              <label class="option-card">
                <input type="radio" name="cargo" value="canopy" data-price="640" data-name="Roll-top canopy">
                <span class="option-title">Roll-top canopy</span>
                <span class="option-desc">Weatherproof roll top with rear window and quick-release frame.</span>
                <span class="option-price">+ €640</span>
              </label>
            </div>
          </fieldset>

          <fieldset class="option-group" data-summary-label="Finish">
            <legend>5. Finish</legend>
            <div class="option-grid">
              <label class="option-card is-selected">
                <input type="radio" name="finish" value="graphite" data-price="0" data-name="Graphite satin powder" checked>
                <span class="option-title">Graphite satin</span>
                <span class="option-desc">Tough powder coat, hand-masked Lumen head badge.</span>
                <span class="option-price">Included</span>
              </label>

              <label class="option-card">
                <input type="radio" name="finish" value="cphblue" data-price="190" data-name="Copenhagen blue powder">
                <span class="option-title">Copenhagen blue</span>
                <span class="option-desc">Deep blue inspired by Nyhavn in late October light.</span>
                <span class="option-price">+ €190</span>
              </label>

              <label class="option-card">
                <input type="radio" name="finish" value="bone" data-price="260" data-name="Bone with copper clear coat">
                <span class="option-title">Bone + copper</span>
                <span class="option-desc">Bone base with copper clear, hand-polished weld seams.</span>
                <span class="option-price">+ €260</span>
              </label>

              <label class="option-card">
                <input type="radio" name="finish" value="atelier" data-price="540" data-lead="2" data-name="Paint atelier two-tone">
                <span class="option-title">Paint atelier</span>
                <span class="option-desc">Two-tone wet paint, custom pantone, hand-painted pin-striping.</span>
                <span class="option-price">+ €540</span>
              </label>
            </div>
          </fieldset>

          <fieldset class="option-group" data-summary-label="Package">
            <legend>6. Daily package</legend>
            <div class="option-grid">
              <label class="option-card is-selected">
                <input type="radio" name="package" value="city" data-price="0" data-name="City package" checked>
                <span class="option-title">City package</span>
                <span class="option-desc">Fenders, dynamo lighting, brake-sensor rear light, chainguard, double kickstand.</span>
                <span class="option-price">Included</span>
              </label>

              <label class="option-card">
                <input type="radio" name="package" value="work" data-price="340" data-name="Work package">
                <span class="option-title">Work package</span>
                <span class="option-desc">Integrated lock, front rack, load straps, spare tube, parking brake.</span>
                <span class="option-price">+ €340</span>
              </label>

              <label class="option-card">
                <input type="radio" name="package" value="light" data-price="420" data-name="Light + charging package">
                <span class="option-title">Light + charging</span>
                <span class="option-desc">High-output dynamo, USB charge port, Supernova rear light, phone mount bracket.</span>
                <span class="option-price">+ €420</span>
              </label>
            </div>
          </fieldset>

          <fieldset class="option-group">
            <legend>7. Fitting details</legend>
            <div class="field-grid">
              <label class="field">
                <span>Name</span>
                <input type="text" name="name" autocomplete="name" placeholder="Freja Vang">
              </label>
              <label class="field">
                <span>Email</span>
                <input type="email" name="email" autocomplete="email" placeholder="you@email.com">
              </label>
              <label class="field">
                <span>City / postal code</span>
                <input type="text" name="postal" autocomplete="postal-code" placeholder="2200 København N">
              </label>
              <label class="field">
                <span>What will it carry?</span>
                <textarea name="notes" rows="4" placeholder="Two children, one dog, 20 kg groceries, daily 12 km."></textarea>
              </label>
            </div>
          </fieldset>

          <p class="config-note">
            Your quote includes VAT, road-legal dynamo lighting, full torque-checked assembly, first 500 km service, and EU delivery. No additional charge for bespoke frame size, geometry print, or hand-matched finish colour grouping.
          </p>
        </form>

        <aside class="summary-card" aria-live="polite">
          <p class="kicker">Your build</p>
          <h3 id="summary-frame-name">Lumen 01 Longtail</h3>
          <p class="summary-frame-desc" id="summary-frame-desc">Long low deck behind the saddle. Easy to park, stable with two children.</p>

          <div class="summary-specs" id="summary-frame-specs">
            <span>Payload: <strong>80 kg rear deck</strong></span>
            <span>Wheels: <strong>26 in</strong></span>
            <span>Base weight: <strong>25.8 kg</strong></span>
          </div>

          <dl id="summary-list"></dl>

          <div class="price-row">
            <span>Total incl. VAT</span>
            <strong class="price-number" id="total-price">€4,180</strong>
          </div>

          <p class="summary-lead">Estimated build slot: <span id="lead-time">6–8 weeks</span></p>

          <ul class="summary-includes">
            <li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg><span>Signed build sheet with every part and torque setting</span></li>
            <li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg><span>Lifetime frame warranty, 2 years on components</span></li>
            <li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg><span>First service after 500 km included</span></li>
          </ul>

          <a class="btn block" id="quote-mail" href="mailto:workshop@lumencycles.dk">Email this build to the workshop</a>
          <button class="btn ghost block" type="button" id="reset-build">Reset build</button>
          <p class="mail-status" id="mail-status" role="status">We reply within one business day with your available build slot.</p>
        </aside>
      </div>
    </div>
  </section>

  <section class="section" id="process">
    <div class="shell">
      <div class="section-head">
        <p class="kicker">Workshop method</p>
        <h2>Six weeks, measured by hand</h2>
        <p>Four people build your bike, but one frame-builder’s initials go on the head badge. Nothing is outsourced after welding and nothing ships until it has carried its intended load.</p>
      </div>

      <ol class="timeline">
        <li>
          <span class="step">Week 1</span>
          <h3>Fitting conversation</h3>
          <p>A 45-minute conversation about your inside leg, your route, your parking, and the heaviest thing you carry. We send a pricing sheet before any work begins.</p>
        </li>
        <li>
          <span class="step">Week 2</span>
          <h3>Dimensioned frame print</h3>
          <p>You approve a dimensioned drawing: stack, reach, deck length, box depth, stand-over height, wheelbase. No tube is cut until you sign it.</p>
        </li>
        <li>
          <span class="step">Week 3</span>
          <h3>TIG welding and alignment</h3>
          <p>One frame builder TIG-welds the frame on the jig, then cold-sets dropouts and bosses to under 0.5 mm alignment variance.</p>
        </li>
        <li>
          <span class="step">Week 4</span>
          <h3>Wiring and drivetrain</h3>
          <p>Internal cable routing, dynamo lighting, brake sensors, wheel-building, and a full torque printout for your build sheet.</p>
        </li>
        <li>
          <span class="step">Week 5</span>
          <h3>Loaded test ride</h3>
          <p>We load your cargo configuration and ride 35 km over cobbles, curbs, and Nørrebro’s worst cycle-crossing. A second mechanic signs off.</p>
        </li>
        <li>
          <span class="step">Week 6</span>
          <h3>Hand-over</h3>
          <p>Delivered assembled, cleaned, and torqued. We fit saddle and bar height in your driveway, then hand you the signed build sheet.</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="section" id="specs">
    <div class="shell specs-grid">
      <div>
        <p class="kicker">Materials</p>
        <h2>Parts that can still be repaired in 2040</h2>
        <p class="lead" style="margin-top:1rem">Cargo bikes spend their lives at load. We build them with standard, replaceable components and hand-finished aluminium, so a worn part is a 20-minute fix rather than a warranty argument.</p>

        <ul class="spec-list">
          <li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg><span><strong>Frame:</strong> 7005-T6 aluminium, double-butted main tubes, hand-finished welds and internal cable routing.</span></li>
          <li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg><span><strong>Brakes:</strong> Magura MT5 four-piston hydraulic discs with brake-sensor rear lighting on all builds.</span></li>
          <li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg><span><strong>Tires:</strong> Schwalbe Super Moto-X or Big Apple, hand-tensioned 32H double-wall rims.</span></li>
          <li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg><span><strong>Lighting:</strong> SON dynamo with USB charge option, road-legal EU beam pattern.</span></li>
          <li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg><span><strong>Service:</strong> Parts stocked for eight years, first service after 500 km included.</span></li>
        </ul>
      </div>

      <div class="table-card">
        <div class="table-scroll">
          <table class="spec-table">
            <thead>
              <tr>
                <th scope="col">Specification</th>
                <th scope="col">Lumen 01</th>
                <th scope="col">Lumen 02</th>
                <th scope="col">Lumen 03</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">Frame</th>
                <td>7005 longtail</td>
                <td>6061 step-through</td>
                <td>7005 tilt trike</td>
              </tr>
              <tr>
                <th scope="row">Cargo capacity</th>
                <td>80 kg rear deck</td>
                <td>150 kg / 350 L box</td>
                <td>150 kg rear deck</td>
              </tr>
              <tr>
                <th scope="row">Max system weight</th>
                <td>180 kg</td>
                <td>230 kg</td>
                <td>240 kg</td>
              </tr>
              <tr>
                <th scope="row">Wheel size</th>
                <td>26 in</td>
                <td>20 in</td>
                <td>24 in</td>
              </tr>
              <tr>
                <th scope="row">Drivetrain options</th>
                <td>Gates / Enviolo / Rohloff</td>
                <td>Gates / Enviolo / Rohloff</td>
                <td>Rohloff / Enviolo</td>
              </tr>
              <tr>
                <th scope="row">Battery options</th>
                <td>Bosch 500 / 625 Wh</td>
                <td>Bosch 500 / 625 Wh</td>
                <td>Bosch 625 Wh</td>
              </tr>
              <tr>
                <th scope="row">Brakes</th>
                <td>Magura MT5</td>
                <td>Magura MT5</td>
                <td>Magura MT5 twin rear</td>
              </tr>
              <tr>
                <th scope="row">Build slot</th>
                <td>6–8 weeks</td>
                <td>7–9 weeks</td>
                <td>8–10 weeks</td>
              </tr>
              <tr>
                <th scope="row">Warranty</th>
                <td>Lifetime frame, 2 years parts</td>
                <td>Lifetime frame, 2 years parts</td>
                <td>Lifetime frame, 2 years parts</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>

  <section class="section" id="workshop">
    <div class="shell workshop-grid">
      <div>
        <p class="kicker">Workshop</p>
        <h2>Not a catalogue. A jig, a torch, and four people.</h2>
        <p class="lead" style="margin-top:1rem">Lumen started in 2012 because we kept receiving beautifully designed cargo bikes wrapped in six shipping boxes, with no one responsible for the welds. We do the opposite: you meet the person who builds your frame, and your build sheet stays on our wall until your bike is loaded.</p>

        <div class="workshop-address">
          <div>
            <p><strong>Elmegade 27, 3rd floor</strong><br>2200 København N, Denmark</p>
          </div>
          <div>
            <a class="text-link" href="mailto:workshop@lumencycles.dk">workshop@lumencycles.dk <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
            <br>
            <a class="text-link" href="tel:+4532149022">+45 32 14 90 22 <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
          </div>

          <dl class="hours">
            <dt>Workshop visits</dt>
            <dd>Thursday 13:00–18:00 · Friday 13:00–18:00 · Saturday 10:00–14:00</dd>
          </dl>
        </div>
      </div>

      <div class="workshop-panel">
        <svg class="workshop-map" viewBox="0 0 600 420" role="img" aria-label="Stylised map of the Lumen Cycles workshop in Nørrebro, Copenhagen">
          <title>Lumen Cycles workshop map</title>
          <rect width="600" height="420" fill="#ece7dd"/>
          <g stroke="#d5ccbb" stroke-width="10">
            <path d="M-20 120H620M-20 250H620M-20 360H620M90-20V440M230-20V440M390-20V440M510-20V440"/>
          </g>
          <g stroke="#e9e3d7" stroke-width="3">
            <path d="M-20 185H620M-20 305H620M160-20V440M320-20V440M460-20V440"/>
          </g>
          <g fill="#dfd7c7">
            <rect x="240" y="130" width="80" height="100" rx="5"/>
            <rect x="104" y="262" width="80" height="80" rx="5"/>
            <rect x="410" y="268" width="70" height="70" rx="5"/>
          </g>
          <circle cx="300" cy="200" r="38" fill="#29412f" opacity=".08"/>
          <circle cx="300" cy="200" r="22" fill="#b06135"/>
          <circle cx="300" cy="200" r="8" fill="#fffdf9"/>
          <text x="330" y="205" font-family="Helvetica Neue, Helvetica, Arial, sans-serif" font-size="19" font-weight="600" fill="#14171a">Lumen Cycles</text>
          <text x="330" y="228" font-family="Helvetica Neue, Helvetica, Arial, sans-serif" font-size="14" fill="#4c5258">Elmegade 27</text>
        </svg>
        <p class="fineprint" style="margin-top:1rem">Bike-up route: Nørrebros Runddel station is 6 minutes by cargo bike, or 11 minutes on foot over Fælledparken’s western path.</p>
      </div>
    </div>
  </section>

  <section class="section quotes" aria-label="Customer references">
    <div class="shell">
      <div class="section-head">
        <p class="kicker">Riders</p>
        <h2 style="color:#f7f4ee">What 2,000 km of daily cargo does</h2>
      </div>

      <div class="quote-grid">
        <blockquote>
          “I replaced a van with the Longtail. Pipes, a ladder, and a cordless drill kit have all gone through Søtorv traffic at 8am. It feels more planted loaded than empty.”
          <footer><strong>Jakob Lauritzen</strong> · Plumber, Valby · 2,400 km</footer>
        </blockquote>

        <blockquote>
          “Two children, a dog, and German groceries. Lumen adjusted the bench to my mother’s shorter reach, so she can take them to school without slowing the whole family down.”
          <footer><strong>Sofie & Mads Hjort</strong> · Nørrebro · 1,100 km</footer>
        </blockquote>

        <blockquote>
          “My Front Box is a rolling advert for the bakery. Three years in, still no interior rust and the brakes feel the same as the day we rode it home.”
          <footer><strong>Elena Krøyer</strong> · Baker, Christianshavn · 3,900 km</footer>
        </blockquote>
      </div>
    </div>
  </section>

  <section class="section" id="faq">
    <div class="shell">
      <div class="section-head">
        <p class="kicker">Questions</p>
        <h2>Before you commit to a build slot</h2>
      </div>

      <div class="faq-grid">
        <details>
          <summary>Can I test ride one before ordering?<span class="faq-icon" aria-hidden="true"><svg class="icon"><use href="#i-plus"/></svg></span></summary>
          <p>Yes. We keep demo longtails and one front-box bike at the workshop on Saturdays from 10:00 to 14:00. If you buy within 14 days, we credit €75 of the test ride toward your build deposit.</p>
        </details>

        <details>
          <summary>How does payment work?<span class="faq-icon" aria-hidden="true"><svg class="icon"><use href="#i-plus"/></svg></span></summary>
          <p>A 20% deposit locks your frame slot and the sign-off conversation is free until you approve the dimensioned drawing. The rest is due when your bike arrives, assembled. We accept card, MobilePay, bank transfer, and Danish finance plans in checkout.</p>
        </details>

        <details>
          <summary>What if I want to change something after welding?<span class="faq-icon" aria-hidden="true"><svg class="icon"><use href="#i-plus"/></svg></span></summary>
          <p>Before welding, changes are free and common. After welding, paint packages, drivetrain, and cargo setups can still change at workshop cost. Frame geometry cannot move once the jig is set, which is why the dimensioned drawing step exists.</p>
        </details>

        <details>
          <summary>Do you ship outside Denmark?<span class="faq-icon" aria-hidden="true"><svg class="icon"><use href="#i-plus"/></svg></span></summary>
          <p>EU delivery is included and assembled on arrival. Norway, Switzerland, and the UK ship at cost, and we email the customs paperwork before your bike leaves Copenhagen.</p>
        </details>

        <details>
          <summary>What does the warranty cover?<span class="faq-icon" aria-hidden="true"><svg class="icon"><use href="#i-plus"/></svg></span></summary>
          <p>Lifetime warranty on frame welds made in our workshop. Two years on components such as hubs, motors, brakes, and lights. Crash replacement is available at material cost plus workshop labour, for any rider, not just the first owner.</p>
        </details>

        <details>
          <summary>Can you service a second-hand Lumen?<span class="faq-icon" aria-hidden="true"><svg class="icon"><use href="#i-plus"/></svg></span></summary>
          <p>Yes. We keep build sheets and geometry records for every frame, including those bought second-hand. Bring it to the workshop and we will run the same torque and alignment check used on new builds.</p>
        </details>
      </div>
    </div>
  </section>

  <section class="section" id="contact">
    <div class="shell">
      <div class="cta-panel">
        <p class="kicker">Available build slots</p>
        <h2>Your frame goes on the jig the week you approve it.</h2>
        <p>Send your configured build or raw cargo problem to the workshop. We reply within one business day with a written build sheet, an available slot, and the real number for the service you will need.</p>

        <div class="cta-row">
          <a class="btn" href="#configurator">Configure your Lumen</a>
          <a class="btn ghost" href="mailto:workshop@lumencycles.dk?subject=Build%20slot%20question">Ask about a build slot</a>
        </div>
      </div>
    </div>
  </section>
</main>

<footer class="site-footer">
  <div class="shell">
    <div class="footer-grid">
      <div class="footer-col footer-brand">
        <a class="brand" href="#top">
          <span class="brand-mark" aria-hidden="true">
            <svg viewBox="0 0 40 40">
              <circle cx="20" cy="20" r="17.5" fill="none" stroke="currentColor" stroke-width="2"/>
              <path d="M13 26V14h10M13 20h8" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
              <circle cx="27" cy="27" r="2.2" fill="#b06135"/>
            </svg>
          </span>
          <span class="brand-text">
            <strong>Lumen Cycles</strong>
            <em>Copenhagen · Custom cargo</em>
          </span>
        </a>
        <p>Hand-welded cargo bikes, drawn around one rider at a time. Lifetime frame warranty on every frame built in Copenhagen.</p>
      </div>

      <div class="footer-col">
        <h3>Workshop</h3>
        <ul>
          <li><a href="#models">Models</a></li>
          <li><a href="#configurator">Configurator</a></li>
          <li><a href="#process">How we build</a></li>
          <li><a href="#specs">Materials & specs</a></li>
        </ul>
      </div>

      <div class="footer-col">
        <h3>Service</h3>
        <ul>
          <li><a href="#faq">Warranty</a></li>
          <li><a href="#faq">Delivery & returns</a></li>
          <li><a href="#workshop">Service booking</a></li>
          <li><a href="#contact">Build slot</a></li>
        </ul>
      </div>

      <div class="footer-col">
        <h3>Contact</h3>
        <ul>
          <li><a href="mailto:workshop@lumencycles.dk">workshop@lumencycles.dk</a></li>
          <li><a href="tel:+4532149022">+45 32 14 90 22</a></li>
          <li>Elmegade 27, 2200 København N</li>
          <li>CVR 41 27 55 09</li>
        </ul>
      </div>
    </div>

    <div class="footer-bottom">
      <p>© <span id="year">2025</span> Lumen Cycles ApS. All rights reserved.</p>
      <p>Custom cargo bikes built to order in Copenhagen.</p>
    </div>
  </div>
</footer>

<script>
(function () {
  var header = document.querySelector('.site-header');
  function onScroll() {
    header.classList.toggle('is-stuck', window.scrollY > 8);
  }
  onScroll();
  window.addEventListener('scroll', onScroll, { passive: true });

  var navToggle = document.querySelector('.nav-toggle');
  var siteNav = document.querySelector('.site-nav');

  if (navToggle && siteNav) {
    navToggle.addEventListener('click', function () {
      var open = siteNav.classList.toggle('is-open');
      navToggle.setAttribute('aria-expanded', String(open));
    });

    siteNav.querySelectorAll('a').forEach(function (link) {
      link.addEventListener('click', function () {
        siteNav.classList.remove('is-open');
        navToggle.setAttribute('aria-expanded', 'false');
      });
    });
  }

  var year = document.getElementById('year');
  if (year) {
    year.textContent = String(new Date().getFullYear());
  }

  var form = document.getElementById('build-form');
  if (!form) return;

  var totalEl = document.getElementById('total-price');
  var leadEl = document.getElementById('lead-time');
  var summaryFrame = document.getElementById('summary-frame-name');
  var summaryDesc = document.getElementById('summary-frame-desc');
  var summarySpecs = document.getElementById('summary-frame-specs');
  var summaryList = document.getElementById('summary-list');
  var quoteMail = document.getElementById('quote-mail');
  var mailStatus = document.getElementById('mail-status');
  var resetBtn = document.getElementById('reset-build');

  function money(value) {
    return '€' + Number(value).toLocaleString('en-US');
  }

  function checked(name) {
    return form.querySelector('input[name="' + name + '"]:checked');
  }

  function syncCards() {
    form.querySelectorAll('.option-card').forEach(function (card) {
      var input = card.querySelector('input');
      if (input) {
        card.classList.toggle('is-selected', input.checked);
      }
    });
  }

  function updateMail(frameName, total, lead, items) {
    var name = (form.elements.name && form.elements.name.value || '').trim();
    var email = (form.elements.email && form.elements.email.value || '').trim();
    var postal = (form.elements.postal && form.elements.postal.value || '').trim();
    var notes = (form.elements.notes && form.elements.notes.value || '').trim();

    var lines = [];
    if (name) lines.push('Name: ' + name);
    if (email) lines.push('Email: ' + email);
    if (postal) lines.push('City / postal code: ' + postal);
    if (notes) lines.push('Cargo notes: ' + notes);

    lines.push('');
    lines.push('Lumen build request');
    items.forEach(function (item) {
      lines.push(item.label + ': ' + item.value + (item.price ? ' (' + money(item.price) + ')' : ''));
    });
    lines.push('Lead time: ' + lead + '–' + (lead + 2) + ' weeks');
    lines.push('Estimated total incl. VAT: ' + money(total));
    lines.push('');
    lines.push('Please send my build sheet and next available slot.');

    var subject = 'Lumen build — ' + frameName + ' — ' + money(total);
    quoteMail.setAttribute(
      'href',
      'mailto:workshop@lumencycles.dk?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(lines.join('\n'))
    );
  }

  function updateBuild() {
    syncCards();

    var frame = checked('frame');
    if (!frame) return;

    var total = 0;
    var lead = Number(frame.dataset.lead || 6);
    var items = [];

    form.querySelectorAll('.option-group[data-summary-label]').forEach(function (group) {
      var input = group.querySelector('input:checked');
      if (!input) return;

      var price = Number(input.dataset.price || 0);
      total += price;
      lead += Number(input.dataset.lead || 0);

      items.push({
        label: group.dataset.summaryLabel,
        value: input.dataset.name || input.value,
        price: price
      });
    });

    summaryFrame.textContent = frame.dataset.name;
    summaryDesc.textContent = frame.dataset.desc;
    summarySpecs.innerHTML =
      '<span>Payload: <strong>' + frame.dataset.payload + '</strong></span>' +
      '<span>Wheels: <strong>' + frame.dataset.wheels + '</strong></span>' +
      '<span>Base weight: <strong>' + frame.dataset.weight + '</strong></span>';

    summaryList.innerHTML = items.map(function (item) {
      var value = item.price
        ? '<span>' + money(item.price) + '</span>'
        : '<span class="included">included</span>';
      return '<div><dt>' + item.label + '</dt><dd><span>' + item.value + '</span>' + value + '</dd></div>';
    }).join('');

    totalEl.textContent = money(total);
    leadEl.textContent = lead + '–' + (lead + 2) + ' weeks';

    updateMail(frame.dataset.name, total, lead, items);
  }

  form.addEventListener('change', updateBuild);
  form.addEventListener('input', updateBuild);

  document.querySelectorAll('[data-configure]').forEach(function (link) {
    link.addEventListener('click', function () {
      var value = link.dataset.configure;
      var input = form.querySelector('input[name="frame"][value="' + value + '"]');
      if (input) {
        input.checked = true;
        updateBuild();
      }
    });
  });

  if (quoteMail) {
    quoteMail.addEventListener('click', function (event) {
      var name = form.elements.name.value.trim();
      var email = form.elements.email.value.trim();

      if (!name || !email) {
        event.preventDefault();
        mailStatus.textContent = 'Add your name and email, then this opens your mail app with the full build sheet.';
      } else {
        mailStatus.textContent = 'Opening your mail app with the full build sheet.';
      }
    });
  }

  if (resetBtn) {
    resetBtn.addEventListener('click', function () {
      form.reset();
      updateBuild();
      mailStatus.textContent = 'Build reset to the Longtail base.';
    });
  }

  updateBuild();
})();
</script>
</body>
</html>

Compare with

Step 5 Preview: other attempts