hypeorcode
Network offOpen alone (new tab)

Run details

Model
deepseek/deepseek-v4.1-flash-1017
Route
OpenRouter API, one user message
Reasoning
provider default, 24,266 reasoning tokens
Limits
60 min · 393,216 output tokens
Date
21 Oct 2026
Time
1 min 36 s
Size
66 kB
Tokens
89 in, 45,759 out
List price
$0.027 ($0.15 in / $0.6 out per M)
Paid
$0.023

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

66 kB 2,036 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, hand-built in Copenhagen</title>
<meta name="description" content="Hand-brazed steel cargo bikes, measured to your body and your street. Twelve bikes a month from our workshop in Nørrebro, Copenhagen. From €3,950.">
<style>
  /* ============================================================
     LUMEN CYCLES — single file, no external requests
     ============================================================ */

  :root{
    --paper:#F5F2EB;
    --paper-2:#EDE7DB;
    --paper-3:#E4DDCE;
    --ink:#161A18;
    --ink-soft:#3B443F;
    --muted:#6F6B61;
    --line:rgba(22,26,24,.13);
    --line-soft:rgba(22,26,24,.08);
    --accent:#BF552E;
    --accent-dark:#9E4423;
    --deep:#1B2B26;
    --green:#4E8B5E;
    --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ease:cubic-bezier(.22,.7,.28,1);
  }

  *,*::before,*::after{box-sizing:border-box}

  html{
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
  }

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:17px;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
  }

  /* subtle paper grain */
  body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:9999;
    pointer-events:none;
    opacity:.032;
    background-image:radial-gradient(#000 .5px, transparent .55px);
    background-size:3px 3px;
  }

  img,svg{max-width:100%}
  a{color:inherit}

  h1,h2,h3,h4{margin:0}
  p{margin:0}

  ::selection{background:var(--accent);color:#fff}

  .wrap{
    width:100%;
    max-width:1240px;
    margin:0 auto;
    padding:0 34px;
    position:relative;
  }

  section{scroll-margin-top:96px}

  /* ---------------- typography helpers ---------------- */

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .eyebrow::before{
    content:"";
    width:26px;
    height:1px;
    background:var(--accent);
    flex:none;
  }
  .eyebrow.no-rule::before{display:none}

  .display{
    font-family:var(--serif);
    font-weight:400;
    letter-spacing:-.026em;
    line-height:1.04;
  }
  .display em{font-style:italic;color:var(--accent)}

  /* ---------------- buttons ---------------- */

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-family:var(--sans);
    font-size:14px;
    font-weight:600;
    letter-spacing:.015em;
    line-height:1;
    padding:16px 26px;
    border-radius:2px;
    border:1px solid transparent;
    cursor:pointer;
    text-decoration:none;
    transition:background .22s var(--ease), color .22s var(--ease),
               border-color .22s var(--ease), transform .22s var(--ease);
    white-space:nowrap;
  }
  .btn .arrow{transition:transform .28s var(--ease)}
  .btn:hover .arrow{transform:translateX(4px)}

  .btn-primary{background:var(--ink);color:var(--paper)}
  .btn-primary:hover{background:var(--accent)}
  .btn-primary:active{transform:translateY(1px)}

  .btn-ghost{background:transparent;color:var(--ink);border-color:rgba(22,26,24,.28)}
  .btn-ghost:hover{border-color:var(--ink);background:rgba(22,26,24,.045)}

  .btn-sm{padding:12px 18px;font-size:13px}

  .btn-inverse{background:var(--paper);color:var(--deep)}
  .btn-inverse:hover{background:var(--accent);color:#fff}

  /* ---------------- nav ---------------- */

  .nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:200;
    padding:22px 0;
    transition:padding .3s var(--ease), background .3s var(--ease),
               box-shadow .3s var(--ease);
  }
  .nav.scrolled{
    padding:13px 0;
    background:rgba(245,242,235,.93);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    box-shadow:0 1px 0 var(--line);
  }

  .nav-inner{
    display:flex;
    align-items:center;
    gap:28px;
  }

  .brand{
    display:inline-flex;
    align-items:center;
    gap:11px;
    text-decoration:none;
    color:var(--ink);
    flex:none;
  }
  .brand-mark{
    width:27px;height:27px;
    color:var(--accent);
    flex:none;
    transition:transform .5s var(--ease);
  }
  .brand:hover .brand-mark{transform:rotate(180deg)}
  .brand-word{
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.225em;
    text-transform:uppercase;
    line-height:1;
    padding-top:1px;
  }
  .brand-word span{font-weight:400;color:var(--muted)}

  .nav-links{
    display:flex;
    align-items:center;
    gap:30px;
    margin-left:auto;
  }
  .nav-links a{
    font-size:13.5px;
    letter-spacing:.02em;
    color:var(--ink-soft);
    text-decoration:none;
    position:relative;
    padding:4px 0;
    transition:color .2s;
  }
  .nav-links a::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:1px;
    background:var(--accent);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .3s var(--ease);
  }
  .nav-links a:hover{color:var(--ink)}
  .nav-links a:hover::after{transform:scaleX(1)}

  .nav-cta{flex:none}

  .nav-toggle{
    display:none;
    width:42px;height:42px;
    margin-left:auto;
    background:transparent;
    border:1px solid var(--line);
    border-radius:2px;
    cursor:pointer;
    padding:0;
    position:relative;
  }
  .nav-toggle span{
    position:absolute;
    left:11px;right:11px;
    height:1.6px;
    background:var(--ink);
    transition:transform .3s var(--ease), opacity .2s;
  }
  .nav-toggle span:nth-child(1){top:16px}
  .nav-toggle span:nth-child(2){top:24px}
  .nav-toggle.open span:nth-child(1){transform:translateY(4px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

  .mobile-menu{
    display:none;
    overflow:hidden;
    max-height:0;
    transition:max-height .4s var(--ease);
    background:rgba(245,242,235,.98);
    border-top:1px solid var(--line);
    margin-top:13px;
  }
  .mobile-menu.open{max-height:420px}
  .mobile-menu a{
    display:block;
    padding:15px 34px;
    text-decoration:none;
    font-size:15px;
    color:var(--ink-soft);
    border-bottom:1px solid var(--line-soft);
  }
  .mobile-menu a:last-child{border-bottom:0;color:var(--accent);font-weight:600}

  /* ---------------- hero ---------------- */

  .hero{
    padding:168px 0 92px;
    position:relative;
  }

  .hero-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
    gap:64px;
    align-items:center;
  }

  .hero h1{
    font-size:clamp(2.6rem, 5.1vw, 4.3rem);
    margin:24px 0 26px;
    max-width:13ch;
  }

  .lede{
    font-size:18px;
    line-height:1.62;
    color:var(--ink-soft);
    max-width:44ch;
  }

  .hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:34px;
  }

  .hero-meta{
    margin-top:30px;
    font-size:11.5px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted);
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
    align-items:center;
  }
  .hero-meta i{
    width:3px;height:3px;
    border-radius:50%;
    background:var(--muted);
    display:inline-block;
    opacity:.55;
  }

  .hero-visual{position:relative}

  .panel{
    position:relative;
    background:linear-gradient(160deg,#F0EAE0 0%, #E8E1D3 100%);
    border-radius:3px;
    padding:26px 22px 14px;
    box-shadow:inset 0 0 0 1px rgba(22,26,24,.055);
  }

  .bike-hero{
    display:block;
    width:100%;
    height:auto;
    position:relative;
    z-index:1;
  }

  .float-card{
    position:absolute;
    left:-14px;
    bottom:-16px;
    z-index:3;
    display:flex;
    align-items:center;
    gap:13px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:3px;
    padding:13px 18px;
    box-shadow:0 22px 44px -28px rgba(22,26,24,.55);
  }
  .float-card b{
    display:block;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.01em;
  }
  .float-card span{
    display:block;
    font-size:11.5px;
    color:var(--muted);
    margin-top:1px;
  }

  .pulse{
    width:8px;height:8px;
    border-radius:50%;
    background:var(--green);
    position:relative;
    flex:none;
  }
  .pulse::after{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:50%;
    border:1px solid var(--green);
    animation:ping 2.6s ease-out infinite;
  }
  @keyframes ping{
    0%{transform:scale(.55);opacity:.75}
    100%{transform:scale(1.7);opacity:0}
  }

  /* ---------------- trust strip ---------------- */

  .strip{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:20px 0;
  }
  .strip-inner{
    display:grid;
    grid-template-columns:repeat(4,1fr);
  }
  .strip-item{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    padding:0 22px;
    border-left:1px solid var(--line-soft);
  }
  .strip-item:first-child{border-left:0;padding-left:0}
  .strip-item svg{color:var(--accent);flex:none}

  /* ---------------- generic section ---------------- */

  .section{padding:106px 0}

  .sec-head{
    max-width:740px;
    margin-bottom:58px;
  }
  .sec-head h2{
    font-size:clamp(2rem, 3.7vw, 3.05rem);
    margin:20px 0 20px;
  }
  .sec-head p{
    font-size:17.5px;
    color:var(--ink-soft);
    max-width:52ch;
  }

  /* ---------------- configurator ---------------- */

  .config{
    display:grid;
    grid-template-columns:352px minmax(0,1fr);
    gap:56px;
    align-items:start;
  }

  .config-list{display:flex;flex-direction:column}

  .model{
    display:grid;
    grid-template-columns:30px minmax(0,1fr) auto;
    gap:16px;
    align-items:start;
    width:calc(100% + 32px);
    margin:0 -16px;
    padding:20px 16px;
    text-align:left;
    background:transparent;
    border:0;
    border-radius:3px;
    cursor:pointer;
    font-family:inherit;
    color:inherit;
    transition:background .22s var(--ease);
  }
  .model + .model{margin-top:3px}
  .model:hover{background:rgba(22,26,24,.035)}
  .model.is-active{background:var(--paper-2)}

  .m-idx{
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    color:var(--muted);
    padding-top:8px;
    transition:color .22s;
  }
  .m-name{
    display:block;
    font-family:var(--serif);
    font-size:23px;
    letter-spacing:-.012em;
    line-height:1.2;
    transition:color .22s;
  }
  .m-desc{
    display:block;
    font-size:14px;
    line-height:1.5;
    color:var(--muted);
    margin-top:5px;
    max-width:30ch;
  }
  .m-price{
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.03em;
    color:var(--muted);
    padding-top:8px;
    transition:color .22s;
    white-space:nowrap;
  }
  .model.is-active .m-name,
  .model.is-active .m-price,
  .model.is-active .m-idx{color:var(--accent)}

  .config-stage{
    background:var(--paper-2);
    border-radius:3px;
    padding:30px 34px 0;
    box-shadow:inset 0 0 0 1px rgba(22,26,24,.05);
  }
  .config-bike{
    display:block;
    width:100%;
    height:auto;
  }

  .stage-bar{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    border-top:1px solid rgba(22,26,24,.13);
    padding:20px 0 24px;
    margin-top:8px;
  }
  .stage-bar dt{
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:5px;
  }
  .stage-bar dd{
    margin:0;
    font-size:15px;
    font-weight:600;
    letter-spacing:-.01em;
  }

  #cargoGroup{transition:opacity .2s}

  /* ---------------- process ---------------- */

  .process{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line);
  }
  .step{
    padding:32px 30px 0 0;
    border-right:1px solid var(--line-soft);
    position:relative;
  }
  .step:last-child{border-right:0;padding-right:0}
  .step:not(:first-child){padding-left:30px}
  .step-num{
    font-family:var(--serif);
    font-size:15px;
    letter-spacing:.08em;
    color:var(--accent);
    display:block;
    margin-bottom:16px;
  }
  .step h3{
    font-size:18.5px;
    font-weight:600;
    letter-spacing:-.01em;
    margin-bottom:10px;
  }
  .step p{
    font-size:15px;
    line-height:1.6;
    color:var(--muted);
  }

  /* ---------------- dark band ---------------- */

  .band{
    background:var(--deep);
    color:#E9E4D9;
    padding:100px 0;
  }
  .band .eyebrow{color:#8FA097}
  .band .eyebrow::before{background:var(--accent)}
  .band .display em{color:#E08356}

  .band-grid{
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:72px;
    align-items:start;
  }
  .band h2{
    font-size:clamp(1.95rem,3.4vw,2.85rem);
    margin:20px 0 22px;
  }
  .band-lead{
    font-size:17px;
    line-height:1.68;
    color:#B7C2BB;
    max-width:42ch;
  }
  .band-note{
    margin-top:30px;
    font-size:14px;
    line-height:1.65;
    color:#93A29A;
    border-left:2px solid var(--accent);
    padding-left:18px;
    max-width:40ch;
  }

  .spec-list{list-style:none;margin:0;padding:0}
  .spec-list li{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:24px;
    padding:15px 0;
    border-bottom:1px solid rgba(255,255,255,.12);
    font-size:15px;
  }
  .spec-list li:first-child{border-top:1px solid rgba(255,255,255,.12)}
  .spec-list .k{
    font-size:11px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#8FA097;
    flex:none;
  }
  .spec-list .v{
    text-align:right;
    color:#E9E4D9;
    letter-spacing:-.005em;
  }

  /* ---------------- testimonials ---------------- */

  .quotes{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:34px;
  }
  .quote{
    border-top:2px solid var(--ink);
    padding-top:26px;
  }
  .quote:nth-child(2){border-top-color:var(--accent)}
  .quote p{
    font-family:var(--serif);
    font-size:19px;
    line-height:1.48;
    letter-spacing:-.012em;
    color:var(--ink);
  }
  .quote footer{
    margin-top:22px;
    font-size:12.5px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .quote footer b{
    display:block;
    color:var(--ink);
    font-weight:600;
    letter-spacing:.02em;
    text-transform:none;
    font-size:14px;
    margin-bottom:3px;
  }

  /* ---------------- price ---------------- */

  .price-card{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0;
    border:1px solid var(--line);
    border-radius:3px;
    overflow:hidden;
    background:#FBF9F4;
  }
  .price-left{
    padding:52px 46px;
    border-right:1px solid var(--line);
  }
  .price-left h3{
    font-family:var(--serif);
    font-weight:400;
    font-size:clamp(1.7rem,2.6vw,2.2rem);
    letter-spacing:-.02em;
    line-height:1.12;
    margin:18px 0 16px;
  }
  .price-left h3 em{font-style:italic;color:var(--accent)}
  .price-left p{
    font-size:15.5px;
    color:var(--ink-soft);
    max-width:34ch;
  }
  .price-figure{
    font-family:var(--serif);
    font-size:clamp(2rem,3.4vw,2.7rem);
    letter-spacing:-.03em;
    margin:28px 0 6px;
    line-height:1;
  }
  .price-figure small{
    font-family:var(--sans);
    font-size:12px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
    display:block;
    margin-bottom:12px;
  }
  .price-note{
    font-size:13px !important;
    color:var(--muted) !important;
    margin-top:0 !important;
  }
  .price-left .btn{margin-top:28px}

  .price-right{
    padding:52px 46px;
    background:var(--paper-2);
  }
  .price-right h4{
    font-size:11px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:22px;
  }
  .checklist{list-style:none;margin:0;padding:0}
  .checklist li{
    display:flex;
    gap:13px;
    align-items:flex-start;
    padding:10px 0;
    font-size:15px;
    line-height:1.5;
    border-bottom:1px solid rgba(22,26,24,.07);
  }
  .checklist li:last-child{border-bottom:0}
  .checklist svg{color:var(--accent);flex:none;margin-top:4px}

  /* ---------------- faq ---------------- */

  .faq-wrap{
    display:grid;
    grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);
    gap:64px;
    align-items:start;
  }
  .faq-list{border-top:1px solid var(--line)}

  .faq-item{border-bottom:1px solid var(--line)}

  .faq-q{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:24px 0;
    background:transparent;
    border:0;
    cursor:pointer;
    font-family:inherit;
    font-size:17.5px;
    font-weight:500;
    letter-spacing:-.012em;
    color:var(--ink);
    text-align:left;
    transition:color .2s;
  }
  .faq-q:hover{color:var(--accent)}
  .faq-q .chev{
    flex:none;
    color:var(--muted);
    transition:transform .34s var(--ease), color .2s;
  }
  .faq-item.open .faq-q{color:var(--accent)}
  .faq-item.open .chev{transform:rotate(180deg);color:var(--accent)}

  .faq-a{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .38s var(--ease);
  }
  .faq-a > div{overflow:hidden}
  .faq-a p{
    font-size:15.5px;
    line-height:1.68;
    color:var(--ink-soft);
    padding-bottom:26px;
    max-width:60ch;
  }
  .faq-item.open .faq-a{grid-template-rows:1fr}

  /* ---------------- contact ---------------- */

  .contact{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:72px;
    align-items:start;
  }

  .visit-block{margin-top:38px}
  .visit-row{
    display:grid;
    grid-template-columns:96px 1fr;
    gap:18px;
    padding:16px 0;
    border-bottom:1px solid var(--line-soft);
    font-size:15px;
  }
  .visit-row:first-child{border-top:1px solid var(--line-soft)}
  .visit-row dt{
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted);
    padding-top:3px;
  }
  .visit-row dd{margin:0;color:var(--ink-soft);line-height:1.55}
  .visit-row dd a{text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .2s}
  .visit-row dd a:hover{border-color:var(--accent);color:var(--accent)}

  /* form */

  .form-card{
    background:var(--paper-2);
    border-radius:3px;
    padding:40px 38px 42px;
    box-shadow:inset 0 0 0 1px rgba(22,26,24,.05);
    position:relative;
  }

  .form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
  }

  .field{margin-bottom:16px}
  .field label{
    display:block;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:8px;
  }

  .field input,
  .field select,
  .field textarea{
    width:100%;
    font-family:inherit;
    font-size:15.5px;
    color:var(--ink);
    background:#FBF9F4;
    border:1px solid rgba(22,26,24,.16);
    border-radius:2px;
    padding:13px 14px;
    transition:border-color .2s, box-shadow .2s, background .2s;
    -webkit-appearance:none;
    appearance:none;
  }
  .field textarea{resize:vertical;min-height:104px;line-height:1.55}
  .field input::placeholder,
  .field textarea::placeholder{color:#A8A399}
  .field input:focus,
  .field select:focus,
  .field textarea:focus{
    outline:none;
    border-color:var(--ink);
    background:#fff;
    box-shadow:0 0 0 3px rgba(191,85,46,.12);
  }
  .field input.invalid,
  .field select.invalid,
  .field textarea.invalid{
    border-color:#B4362B;
    background:#FCF3F1;
  }

  .select-wrap{position:relative}
  .select-wrap svg{
    position:absolute;
    right:14px;top:50%;
    transform:translateY(-50%);
    pointer-events:none;
    color:var(--muted);
  }
  .field select{padding-right:40px;cursor:pointer}

  .form-card .btn{width:100%;margin-top:8px}
  .form-fine{
    font-size:12px;
    color:var(--muted);
    margin-top:14px;
    text-align:center;
    line-height:1.5;
  }

  .form-done{
    display:none;
    text-align:center;
    padding:34px 10px;
  }
  .form-done.show{display:block}
  .form-done .tick-big{
    width:56px;height:56px;
    border-radius:50%;
    background:var(--paper);
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 22px;
    color:var(--green);
  }
  .form-done h4{
    font-family:var(--serif);
    font-weight:400;
    font-size:24px;
    letter-spacing:-.02em;
    margin-bottom:10px;
  }
  .form-done p{
    font-size:15px;
    color:var(--muted);
    max-width:36ch;
    margin:0 auto;
  }
  .sent .form-body{display:none}

  /* ---------------- footer ---------------- */

  footer.site{
    border-top:1px solid var(--line);
    padding:66px 0 34px;
  }

  .foot-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr;
    gap:44px;
  }
  .foot-brand p{
    font-size:14px;
    color:var(--muted);
    max-width:30ch;
    margin-top:20px;
    line-height:1.65;
  }
  .foot-col h5{
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:16px;
  }
  .foot-col a,
  .foot-col span{
    display:block;
    font-size:14.5px;
    color:var(--ink-soft);
    text-decoration:none;
    padding:5px 0;
    transition:color .2s;
  }
  .foot-col a:hover{color:var(--accent)}

  .foot-bottom{
    margin-top:56px;
    padding-top:26px;
    border-top:1px solid var(--line-soft);
    display:flex;
    flex-wrap:wrap;
    gap:12px 28px;
    justify-content:space-between;
    font-size:12px;
    color:var(--muted);
    letter-spacing:.02em;
  }

  /* ---------------- reveal ---------------- */

  [data-reveal]{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .78s var(--ease), transform .78s var(--ease);
    will-change:opacity, transform;
  }
  [data-reveal].in{
    opacity:1;
    transform:none;
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{
      animation-duration:.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.001ms !important;
    }
    [data-reveal]{opacity:1;transform:none}
  }

  /* ============================================================
     responsive
     ============================================================ */

  @media (max-width:1080px){
    .hero-inner{gap:44px}
    .config{grid-template-columns:300px minmax(0,1fr);gap:36px}
    .band-grid{gap:48px}
    .faq-wrap{gap:44px}
    .contact{gap:48px}
    .price-left,.price-right{padding:42px 34px}
  }

  @media (max-width:940px){
    .nav-links{display:none}
    .nav-cta{display:none}
    .nav-toggle{display:block}
    .mobile-menu{display:block}

    .hero{padding:132px 0 74px}
    .hero-inner{grid-template-columns:1fr;gap:52px}
    .hero h1{max-width:16ch}
    .float-card{left:auto;right:0;bottom:-18px}

    .strip-inner{grid-template-columns:1fr 1fr;gap:14px 0}
    .strip-item:nth-child(3){border-left:0;padding-left:0}
    .strip-item{padding:6px 18px}

    .section{padding:78px 0}
    .band{padding:76px 0}

    .config{grid-template-columns:1fr;gap:30px}
    .config-list{order:2}
    .config-stage{order:1;padding:22px 22px 0}
    .model{width:calc(100% + 24px);margin:0 -12px;padding:16px 12px}

    .process{grid-template-columns:1fr 1fr}
    .step{border-right:0;padding:28px 26px 0 0 !important}
    .step:nth-child(2n){padding-right:0 !important}
    .step:nth-child(odd){border-right:1px solid var(--line-soft)}
    .step:nth-child(n+3){margin-top:34px;border-top:1px solid var(--line-soft);padding-top:30px}

    .band-grid{grid-template-columns:1fr;gap:40px}
    .quotes{grid-template-columns:1fr;gap:30px}

    .price-card{grid-template-columns:1fr}
    .price-left{border-right:0;border-bottom:1px solid var(--line)}

    .faq-wrap{grid-template-columns:1fr;gap:26px}
    .contact{grid-template-columns:1fr;gap:44px}

    .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
    .foot-brand{grid-column:1 / -1}
  }

  @media (max-width:640px){
    body{font-size:16px}
    .wrap{padding:0 20px}

    .hero{padding:118px 0 62px}
    .hero h1{font-size:clamp(2.25rem,9vw,2.9rem)}
    .lede{font-size:16.5px}
    .hero-actions{flex-direction:column;align-items:stretch}
    .hero-actions .btn{width:100%}
    .float-card{position:static;margin-top:14px;left:auto;right:auto;bottom:auto}

    .stage-bar{grid-template-columns:1fr 1fr;gap:16px}
    .config-stage{padding:18px 16px 0}

    .process{grid-template-columns:1fr}
    .step{border-right:0 !important;padding:26px 0 0 !important}
    .step:nth-child(n+2){border-top:1px solid var(--line-soft);margin-top:26px}

    .price-left,.price-right{padding:34px 24px}
    .form-card{padding:28px 22px 30px}
    .form-row{grid-template-columns:1fr;gap:0}

    .foot-grid{grid-template-columns:1fr;gap:30px}
    .foot-bottom{flex-direction:column;gap:8px}

    .strip-item{font-size:10.5px;letter-spacing:.08em}
    .strip-item svg{display:none}
  }
</style>
</head>
<body>

<!-- =========================== NAV =========================== -->
<header class="nav" id="nav">
  <div class="wrap nav-inner">
    <a class="brand" href="#top" aria-label="Lumen Cycles, home">
      <svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true">
        <circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="2.4"/>
        <path d="M16 2a14 14 0 0 1 0 28Z" fill="currentColor"/>
      </svg>
      <span class="brand-word">Lumen<span>Cycles</span></span>
    </a>

    <nav class="nav-links" aria-label="Main navigation">
      <a href="#bikes">Bikes</a>
      <a href="#process">Process</a>
      <a href="#build">The build</a>
      <a href="#faq">FAQ</a>
      <a href="#visit">Workshop</a>
    </nav>

    <a href="#visit" class="btn btn-primary btn-sm nav-cta">
      Book a fitting
      <svg class="arrow" width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 8h11M9 3.5 13.5 8 9 12.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </a>

    <button class="nav-toggle" id="navToggle" aria-label="Open menu" aria-expanded="false" aria-controls="mobileMenu">
      <span></span><span></span>
    </button>
  </div>

  <div class="mobile-menu" id="mobileMenu">
    <a href="#bikes">Bikes</a>
    <a href="#process">Process</a>
    <a href="#build">The build</a>
    <a href="#faq">FAQ</a>
    <a href="#visit">Workshop &amp; fitting</a>
  </div>
</header>

<main id="top">

  <!-- =========================== HERO =========================== -->
  <section class="hero">
    <div class="wrap hero-inner">

      <div class="hero-copy">
        <p class="eyebrow" data-reveal="0">Copenhagen · Since 2014 · 12 bikes a month</p>

        <h1 class="display" data-reveal="80">A cargo bike with <em>your name</em> on the top tube.</h1>

        <p class="lede" data-reveal="160">
          Hand-brazed steel frames, measured to your body and your street. We build twelve
          bikes a month in Nørrebro — and we know every single one of them by heart.
        </p>

        <div class="hero-actions" data-reveal="230">
          <a href="#bikes" class="btn btn-primary">
            Configure your build
            <svg class="arrow" width="15" height="15" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 8h11M9 3.5 13.5 8 9 12.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </a>
          <a href="#visit" class="btn btn-ghost">Visit the workshop</a>
        </div>

        <p class="hero-meta" data-reveal="300">
          <span>From €3,950</span><i></i>
          <span>12–16 weeks</span><i></i>
          <span>10-year frame warranty</span>
        </p>
      </div>

      <!-- hero illustration -->
      <div class="hero-visual" data-reveal="140">
        <div class="panel">
          <svg class="bike-hero" viewBox="0 0 900 520" role="img" aria-label="Side elevation drawing of a Lumen Long cargo bike">
            <ellipse cx="470" cy="494" rx="352" ry="13" fill="#161A18" opacity="0.08"/>

            <!-- ===== rear wheel ===== -->
            <g>
              <circle cx="180" cy="376" r="102" fill="none" stroke="#2A3330" stroke-width="16"/>
              <circle cx="180" cy="376" r="92" fill="none" stroke="#1B2621" stroke-width="3"/>
              <g stroke="#1B2621" stroke-width="1.5" opacity="0.45">
                <line x1="180" y1="376" x2="268" y2="376"/>
                <line x1="180" y1="376" x2="256.2" y2="332"/>
                <line x1="180" y1="376" x2="224" y2="299.8"/>
                <line x1="180" y1="376" x2="180" y2="288"/>
                <line x1="180" y1="376" x2="136" y2="299.8"/>
                <line x1="180" y1="376" x2="103.8" y2="332"/>
                <line x1="180" y1="376" x2="92" y2="376"/>
                <line x1="180" y1="376" x2="103.8" y2="420"/>
                <line x1="180" y1="376" x2="136" y2="452.2"/>
                <line x1="180" y1="376" x2="180" y2="464"/>
                <line x1="180" y1="376" x2="224" y2="452.2"/>
                <line x1="180" y1="376" x2="256.2" y2="420"/>
              </g>
              <circle cx="180" cy="376" r="11" fill="#1B2621"/>
            </g>

            <!-- ===== front wheel ===== -->
            <g>
              <circle cx="760" cy="404" r="76" fill="none" stroke="#2A3330" stroke-width="12"/>
              <circle cx="760" cy="404" r="67" fill="none" stroke="#1B2621" stroke-width="2.6"/>
              <g stroke="#1B2621" stroke-width="1.4" opacity="0.45">
                <line x1="760" y1="404" x2="824" y2="404"/>
                <line x1="760" y1="404" x2="815.4" y2="372"/>
                <line x1="760" y1="404" x2="792" y2="348.6"/>
                <line x1="760" y1="404" x2="760" y2="340"/>
                <line x1="760" y1="404" x2="728" y2="348.6"/>
                <line x1="760" y1="404" x2="704.6" y2="372"/>
                <line x1="760" y1="404" x2="696" y2="404"/>
                <line x1="760" y1="404" x2="704.6" y2="436"/>
                <line x1="760" y1="404" x2="728" y2="459.4"/>
                <line x1="760" y1="404" x2="760" y2="468"/>
                <line x1="760" y1="404" x2="792" y2="459.4"/>
                <line x1="760" y1="404" x2="815.4" y2="436"/>
              </g>
              <circle cx="760" cy="404" r="9" fill="#1B2621"/>
            </g>

            <!-- ===== chain ===== -->
            <g stroke="#2A3330" stroke-width="2.2" opacity="0.85" stroke-linecap="round">
              <line x1="330" y1="384" x2="180" y2="363"/>
              <line x1="330" y1="432" x2="180" y2="389"/>
            </g>
            <circle cx="180" cy="376" r="13" fill="none" stroke="#1B2621" stroke-width="3"/>

            <!-- ===== frame ===== -->
            <g stroke="#1B2621" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" fill="none">
              <path d="M180 376 L330 408"/>
              <path d="M180 376 L252 250"/>
              <path d="M330 408 L252 250"/>
              <path d="M252 250 L642 250"/>
              <path d="M330 408 L666 330"/>
              <path d="M642 250 L666 330"/>
              <path d="M666 330 C 700 350, 728 374, 760 404"/>
            </g>

            <!-- seat post + saddle -->
            <line x1="252" y1="250" x2="250" y2="234" stroke="#1B2621" stroke-width="8" stroke-linecap="round"/>
            <path d="M212 236 C 224 223, 250 221, 268 227 C 279 230, 279 240, 267 242 L 220 244 C 211 244, 208 240, 212 236 Z" fill="#1B2621"/>

            <!-- stem + handlebar -->
            <line x1="642" y1="250" x2="634" y2="212" stroke="#1B2621" stroke-width="7" stroke-linecap="round"/>
            <path d="M598 216 C 614 200, 652 200, 670 216" stroke="#1B2621" stroke-width="7" stroke-linecap="round" fill="none"/>
            <circle cx="662" cy="204" r="6" fill="#BF552E"/>

            <!-- crank + pedal -->
            <circle cx="330" cy="408" r="24" fill="none" stroke="#1B2621" stroke-width="3.5"/>
            <circle cx="330" cy="408" r="8" fill="#1B2621"/>
            <line x1="330" y1="408" x2="356" y2="438" stroke="#1B2621" stroke-width="8" stroke-linecap="round"/>
            <rect x="347" y="435" width="24" height="7" rx="3.5" fill="#1B2621"/>

            <!-- ===== cargo rack struts ===== -->
            <g stroke="#1B2621" stroke-width="6" stroke-linecap="round">
              <line x1="420" y1="334" x2="420" y2="387"/>
              <line x1="540" y1="334" x2="540" y2="359"/>
            </g>

            <!-- ===== cargo box ===== -->
            <g>
              <rect x="384" y="272" width="278" height="62" rx="5" fill="#CBA97E" stroke="#A8875C" stroke-width="2"/>
              <line x1="390" y1="288" x2="656" y2="288" stroke="#A8875C" stroke-width="1.2" opacity="0.45"/>
              <line x1="390" y1="304" x2="656" y2="304" stroke="#A8875C" stroke-width="1.2" opacity="0.45"/>
              <line x1="390" y1="320" x2="656" y2="320" stroke="#A8875C" stroke-width="1.2" opacity="0.45"/>
              <rect x="592" y="296" width="40" height="11" rx="5.5" fill="#7A5C38" opacity="0.34"/>
              <rect x="384" y="272" width="278" height="7" rx="3.5" fill="#BF552E" opacity="0.9"/>
            </g>
          </svg>
        </div>

        <div class="float-card">
          <span class="pulse" aria-hidden="true"></span>
          <div>
            <b>Frame 214 on the jig</b>
            <span>Reynolds 631 · brazed this week</span>
          </div>
        </div>
      </div>

    </div>
  </section>

  <!-- =========================== TRUST STRIP =========================== -->
  <div class="strip">
    <div class="wrap strip-inner">
      <div class="strip-item">
        <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5 6.2 12 13 4.5" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>
        Hand-brazed in Copenhagen
      </div>
      <div class="strip-item">
        <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5 6.2 12 13 4.5" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>
        10-year frame warranty
      </div>
      <div class="strip-item">
        <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5 6.2 12 13 4.5" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>
        Serviced by us, forever
      </div>
      <div class="strip-item">
        <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5 6.2 12 13 4.5" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>
        Delivered across the EU
      </div>
    </div>
  </div>

  <!-- =========================== BIKES =========================== -->
  <section class="section" id="bikes">
    <div class="wrap">
      <div class="sec-head" data-reveal>
        <p class="eyebrow">Three frames</p>
        <h2 class="display">One of them is <em>yours</em>.</h2>
        <p>
          Every Lumen starts from one of three frame platforms — then we change the length,
          the deck height, the bar position and the gear range to fit the person riding it.
        </p>
      </div>

      <div class="config" data-reveal>

        <div class="config-list" role="tablist" aria-label="Choose a model">
          <button class="model is-active" data-model="long" role="tab" aria-selected="true">
            <span class="m-idx">01</span>
            <span class="m-body">
              <span class="m-name">The Long</span>
              <span class="m-desc">Two children, a week of groceries, and room left over.</span>
            </span>
            <span class="m-price">€4,450</span>
          </button>

          <button class="model" data-model="compact" role="tab" aria-selected="false">
            <span class="m-idx">02</span>
            <span class="m-body">
              <span class="m-name">The Compact</span>
              <span class="m-desc">For one child, a big shop, and narrow cellar stairs.</span>
            </span>
            <span class="m-price">€3,950</span>
          </button>

          <button class="model" data-model="twin" role="tab" aria-selected="false">
            <span class="m-idx">03</span>
            <span class="m-body">
              <span class="m-name">The Twin</span>
              <span class="m-desc">A flat deck and a low bed. Tools, crates, dogs.</span>
            </span>
            <span class="m-price">€4,250</span>
          </button>
        </div>

        <div class="config-stage">
          <svg class="config-bike" viewBox="0 0 620 360" role="img" aria-label="Selected cargo bike outline">
            <ellipse cx="300" cy="332" rx="238" ry="8" fill="#161A18" opacity="0.07"/>

            <!-- rear wheel -->
            <circle cx="110" cy="250" r="64" fill="none" stroke="#2A3330" stroke-width="11"/>
            <circle cx="110" cy="250" r="54" fill="none" stroke="#1B2621" stroke-width="2.5"/>
            <g stroke="#1B2621" stroke-width="1.2" opacity="0.4">
              <line x1="110" y1="250" x2="162" y2="250"/>
              <line x1="110" y1="250" x2="146.8" y2="213.2"/>
              <line x1="110" y1="250" x2="110" y2="198"/>
              <line x1="110" y1="250" x2="73.2" y2="213.2"/>
              <line x1="110" y1="250" x2="58" y2="250"/>
              <line x1="110" y1="250" x2="73.2" y2="286.8"/>
              <line x1="110" y1="250" x2="110" y2="302"/>
              <line x1="110" y1="250" x2="146.8" y2="286.8"/>
            </g>
            <circle cx="110" cy="250" r="7" fill="#1B2621"/>

            <!-- front wheel -->
            <circle cx="486" cy="265" r="50" fill="none" stroke="#2A3330" stroke-width="10"/>
            <circle cx="486" cy="265" r="42" fill="none" stroke="#1B2621" stroke-width="2.2"/>
            <g stroke="#1B2621" stroke-width="1.2" opacity="0.4">
              <line x1="486" y1="265" x2="526" y2="265"/>
              <line x1="486" y1="265" x2="514.3" y2="236.7"/>
              <line x1="486" y1="265" x2="486" y2="225"/>
              <line x1="486" y1="265" x2="457.7" y2="236.7"/>
              <line x1="486" y1="265" x2="446" y2="265"/>
              <line x1="486" y1="265" x2="457.7" y2="293.3"/>
              <line x1="486" y1="265" x2="486" y2="305"/>
              <line x1="486" y1="265" x2="514.3" y2="293.3"/>
            </g>
            <circle cx="486" cy="265" r="6" fill="#1B2621"/>

            <!-- frame -->
            <g stroke="#1B2621" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none">
              <path d="M110 250 L208 274"/>
              <path d="M110 250 L156 168"/>
              <path d="M208 274 L156 168"/>
              <path d="M156 168 L410 168"/>
              <path d="M208 274 L432 224"/>
              <path d="M410 168 L432 224"/>
              <path d="M432 224 L486 265"/>
            </g>

            <!-- saddle -->
            <path d="M128 162 C 136 152, 158 150, 172 154 C 180 156, 180 163, 170 164 L 132 166 C 126 166, 124 164, 128 162 Z" fill="#1B2621"/>

            <!-- bars -->
            <line x1="410" y1="168" x2="404" y2="140" stroke="#1B2621" stroke-width="6" stroke-linecap="round"/>
            <path d="M380 138 C 392 127, 416 127, 428 138" stroke="#1B2621" stroke-width="6" stroke-linecap="round" fill="none"/>

            <!-- crank -->
            <circle cx="208" cy="274" r="17" fill="none" stroke="#1B2621" stroke-width="3"/>
            <circle cx="208" cy="274" r="5" fill="#1B2621"/>

            <!-- cargo (swapped by JS) -->
            <g id="cargoGroup"></g>
          </svg>

          <dl class="stage-bar">
            <div>
              <dt>Capacity</dt>
              <dd id="specCapacity">2 children + 60 kg</dd>
            </div>
            <div>
              <dt>Wheelbase</dt>
              <dd id="specWheelbase">2,180 mm</dd>
            </div>
            <div>
              <dt>Built weight</dt>
              <dd id="specWeight">29 kg</dd>
            </div>
            <div>
              <dt>From</dt>
              <dd id="specPrice">€4,450</dd>
            </div>
          </dl>
        </div>

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

  <!-- =========================== PROCESS =========================== -->
  <section class="section" id="process">
    <div class="wrap">
      <div class="sec-head" data-reveal>
        <p class="eyebrow">How it works</p>
        <h2 class="display">Four months, <em>start to street</em>.</h2>
        <p>
          There is no catalogue and no stock. A Lumen is built after we have met you,
          measured you, and argued a little about the colour.
        </p>
      </div>

      <div class="process" data-reveal>
        <div class="step">
          <span class="step-num">01</span>
          <h3>The fitting</h3>
          <p>
            Come to Nørrebro. We measure you — not just your height, but your reach, your
            hip angle, and how you stop at a light with a child on board. Two hours, coffee included.
          </p>
        </div>
        <div class="step">
          <span class="step-num">02</span>
          <h3>The drawing</h3>
          <p>
            Ten days later you get a full geometry drawing and a parts list. Change the colour
            as many times as you like; we don't cut steel until you're certain.
          </p>
        </div>
        <div class="step">
          <span class="step-num">03</span>
          <h3>The braze</h3>
          <p>
            Your frame is mitred and brazed by one of three people, each of whom signs the
            bottom bracket shell. Six weeks of files, flux and patience.
          </p>
        </div>
        <div class="step">
          <span class="step-num">04</span>
          <h3>The handover</h3>
          <p>
            Ride it out of the workshop, or we crate it and send it anywhere in Europe.
            Come back at 500 km for the first service — that one is on us, always.
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- =========================== BUILD / SPECS =========================== -->
  <section class="band" id="build">
    <div class="wrap band-grid">
      <div data-reveal>
        <p class="eyebrow">The build</p>
        <h2 class="display">Steel, plywood, <em>and a signature</em>.</h2>
        <p class="band-lead">
          We use Reynolds 631 because it is light enough to ride every day and tough enough
          to be repaired by any frame builder in Europe in twenty years' time. The cargo box
          is oiled marine plywood with replaceable panels — because panels get scratched,
          and a scratched bike shouldn't mean a new bike.
        </p>
        <p class="band-note">
          Every frame carries the builder's initials, the frame number and the date it was
          brazed. If it ever comes back to us, we'll know exactly who made it and how.
        </p>
      </div>

      <ul class="spec-list" data-reveal="100">
        <li><span class="k">Frame</span><span class="v">Reynolds 631 air-hardened steel, hand-brazed</span></li>
        <li><span class="k">Cargo box</span><span class="v">12 mm marine plywood, oiled, replaceable panels</span></li>
        <li><span class="k">Steering</span><span class="v">Direct, sealed headset, redundant twin-cable brake</span></li>
        <li><span class="k">Drivetrain</span><span class="v">Shimano Deore XT 1×11, 11–46 t</span></li>
        <li><span class="k">Brakes</span><span class="v">Hydraulic disc, 180 mm front and rear</span></li>
        <li><span class="k">Lighting</span><span class="v">Supernova M99 front, integrated rear, hub-powered</span></li>
        <li><span class="k">Tyres</span><span class="v">Schwalbe Big Ben Plus, puncture-resistant</span></li>
        <li><span class="k">Weight</span><span class="v">25–31 kg, depending on model</span></li>
        <li><span class="k">Warranty</span><span class="v">10 years frame · 2 years components</span></li>
      </ul>
    </div>
  </section>

  <!-- =========================== TESTIMONIALS =========================== -->
  <section class="section">
    <div class="wrap">
      <div class="sec-head" data-reveal>
        <p class="eyebrow">Owners</p>
        <h2 class="display">Eleven thousand kilometres <em>later</em>.</h2>
      </div>

      <div class="quotes">
        <blockquote class="quote" data-reveal="0">
          <p>“We replaced a car with it. Three years, two children, and neither of them has ever once asked to be driven to school.”</p>
          <footer>
            <b>Marie &amp; Jonas K.</b>
            The Long · Frederiksberg
          </footer>
        </blockquote>

        <blockquote class="quote" data-reveal="110">
          <p>“I run a small bakery. The Twin does forty kilos of flour before nine o'clock and it has never once been late.”</p>
          <footer>
            <b>Anders H.</b>
            The Twin · Vesterbro
          </footer>
        </blockquote>

        <blockquote class="quote" data-reveal="220">
          <p>“The fitting took two hours and they spent forty minutes of it just watching me get on and off. That's when I knew.”</p>
          <footer>
            <b>Sofia L.</b>
            The Compact · Østerbro
          </footer>
        </blockquote>
      </div>
    </div>
  </section>

  <!-- =========================== PRICE =========================== -->
  <section class="section" id="price" style="padding-top:0">
    <div class="wrap">
      <div class="price-card" data-reveal>
        <div class="price-left">
          <p class="eyebrow">What it costs</p>
          <h3>One price. <em>Everything on it.</em></h3>
          <p>No options list, no upselling at collection. The bike you test-ride is the bike you pay for.</p>

          <div class="price-figure">
            <small>Complete bikes, from</small>
            €3,950 – €4,950
          </div>
          <p class="price-note">Incl. 25 % Danish VAT. E-assist +€1,150. Delivery outside the EU quoted separately.</p>

          <a href="#visit" class="btn btn-primary">
            Start your build
            <svg class="arrow" width="15" height="15" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 8h11M9 3.5 13.5 8 9 12.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </a>
        </div>

        <div class="price-right">
          <h4>Included as standard</h4>
          <ul class="checklist">
            <li>
              <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5 6.2 12 13 4.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              Frame, fork and cargo deck, hand-brazed to your geometry
            </li>
            <li>
              <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5 6.2 12 13 4.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              Full drivetrain, hydraulic brakes, lighting and tyres
            </li>
            <li>
              <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5 6.2 12 13 4.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              Any of eleven powder-coat colours, at no extra cost
            </li>
            <li>
              <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5 6.2 12 13 4.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              Your name and frame number on the top tube
            </li>
            <li>
              <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5 6.2 12 13 4.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              First service at 500 km, free, in the workshop
            </li>
            <li>
              <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5 6.2 12 13 4.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              Crated delivery anywhere in the EU
            </li>
            <li>
              <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5 6.2 12 13 4.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
              A spare set of box panels, kept in stock forever
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- =========================== FAQ =========================== -->
  <section class="section" id="faq" style="padding-top:0">
    <div class="wrap faq-wrap">
      <div data-reveal>
        <p class="eyebrow">Questions</p>
        <h2 class="display" style="font-size:clamp(1.9rem,3.2vw,2.6rem);margin-top:18px">
          Things people <em>ask us</em>.
        </h2>
      </div>

      <div class="faq-list" data-reveal="80">

        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">
            <span>How long will I have to wait?</span>
            <svg class="chev" width="18" height="18" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 8l5 5 5-5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </button>
          <div class="faq-a"><div><p>
            Twelve to sixteen weeks from the deposit. We build twelve bikes a month and we don't
            rush the brazing. You'll get photographs at every stage, and you're welcome to come
            and see it while it's still on the jig.
          </p></div></div>
        </div>

        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">
            <span>Can I try one before I order?</span>
            <svg class="chev" width="18" height="18" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 8l5 5 5-5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </button>
          <div class="faq-a"><div><p>
            Yes — and you should. We keep three demo bikes in the workshop: a Long, a Compact
            and a Twin. Book a slot, bring your children or your dog, and take one for two hours
            around Nørrebro. There's no charge and no obligation.
          </p></div></div>
        </div>

        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">
            <span>What if I don't live in Copenhagen?</span>
            <svg class="chev" width="18" height="18" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 8l5 5 5-5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </button>
          <div class="faq-a"><div><p>
            About a third of our bikes leave Denmark. We ship crated across Europe for €180,
            and we'll spend an hour on a video call walking you through the assembly and the
            first adjustment. The fitting can also be done from measurements your local bike
            fitter takes for us.
          </p></div></div>
        </div>

        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">
            <span>Is it really custom, or just the colour?</span>
            <svg class="chev" width="18" height="18" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 8l5 5 5-5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </button>
          <div class="faq-a"><div><p>
            Really custom. Frame length, deck height, handlebar position and gear range are all
            set from your fitting. A 1.62 m rider and a 1.94 m rider do not get the same bike —
            they don't even get the same top tube.
          </p></div></div>
        </div>

        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">
            <span>What happens if something breaks?</span>
            <svg class="chev" width="18" height="18" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 8l5 5 5-5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </button>
          <div class="faq-a"><div><p>
            You call us and you speak to the person who built it. Frames are warranted for ten
            years, and we keep spares for every bike we've made since 2014. If you're far away,
            we'll send the part and talk you through fitting it.
          </p></div></div>
        </div>

        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">
            <span>Do you do electric assist?</span>
            <svg class="chev" width="18" height="18" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 8l5 5 5-5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </button>
          <div class="faq-a"><div><p>
            Yes — a Shimano STEPS motor adds €1,150 and about 4 kg. We fit it to roughly one bike
            in five. Most people find Copenhagen flat enough, but if you're hauling two children
            up to Valby every morning, you'll want it.
          </p></div></div>
        </div>

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

  <!-- =========================== CONTACT =========================== -->
  <section class="section" id="visit" style="padding-top:0">
    <div class="wrap contact">

      <div data-reveal>
        <p class="eyebrow">The workshop</p>
        <h2 class="display" style="font-size:clamp(1.95rem,3.4vw,2.8rem);margin:18px 0 20px">
          Come and <em>stand next to one</em>.
        </h2>
        <p style="color:var(--ink-soft);font-size:17px;max-width:44ch">
          The kettle is usually on and there's always a half-built frame on the jig.
          Fittings run Tuesday to Saturday — book a slot and we'll keep two hours free.
        </p>

        <dl class="visit-block">
          <div class="visit-row">
            <dt>Address</dt>
            <dd>Blågårdsgade 24<br>2200 København N, Denmark</dd>
          </div>
          <div class="visit-row">
            <dt>Hours</dt>
            <dd>Tue–Fri 10:00–18:00 · Sat 10:00–14:00<br>Sunday by appointment</dd>
          </div>
          <div class="visit-row">
            <dt>Phone</dt>
            <dd><a href="tel:+4535551408">+45 35 55 14 08</a></dd>
          </div>
          <div class="visit-row">
            <dt>Email</dt>
            <dd><a href="mailto:hej@lumencycles.dk">hej@lumencycles.dk</a></dd>
          </div>
        </dl>
      </div>

      <div class="form-card" data-reveal="90">
        <form id="fitForm" novalidate>
          <div class="form-body">
            <div class="form-row">
              <div class="field">
                <label for="fName">Name</label>
                <input id="fName" name="name" type="text" required placeholder="Your name" autocomplete="name">
              </div>
              <div class="field">
                <label for="fEmail">Email</label>
                <input id="fEmail" name="email" type="email" required placeholder="you@example.com" autocomplete="email">
              </div>
            </div>

            <div class="form-row">
              <div class="field">
                <label for="fCity">City</label>
                <input id="fCity" name="city" type="text" placeholder="København" autocomplete="address-level2">
              </div>
              <div class="field">
                <label for="fModel">Interested in</label>
                <div class="select-wrap">
                  <select id="fModel" name="model">
                    <option>The Long</option>
                    <option>The Compact</option>
                    <option>The Twin</option>
                    <option>Not sure yet</option>
                  </select>
                  <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </div>
              </div>
            </div>

            <div class="field">
              <label for="fMsg">What will you carry?</label>
              <textarea id="fMsg" name="message" placeholder="Two children, a dog, forty kilos of flour…"></textarea>
            </div>

            <button type="submit" class="btn btn-primary">
              Request a fitting
              <svg class="arrow" width="15" height="15" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 8h11M9 3.5 13.5 8 9 12.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>

            <p class="form-fine">We reply within two working days. No mailing list, ever.</p>
          </div>

          <div class="form-done" id="formDone" role="status" aria-live="polite">
            <div class="tick-big">
              <svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12.5 9.5 18 20 6.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </div>
            <h4>Tak for det.</h4>
            <p>Your request is with us. One of the three of us will write back within two working days to find a time.</p>
          </div>
        </form>
      </div>

    </div>
  </section>

</main>

<!-- =========================== FOOTER =========================== -->
<footer class="site">
  <div class="wrap">
    <div class="foot-grid">
      <div class="foot-brand">
        <a class="brand" href="#top">
          <svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true">
            <circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="2.4"/>
            <path d="M16 2a14 14 0 0 1 0 28Z" fill="currentColor"/>
          </svg>
          <span class="brand-word">Lumen<span>Cycles</span></span>
        </a>
        <p>Hand-built cargo bikes from Nørrebro, Copenhagen. Twelve a month, no more.</p>
      </div>

      <div class="foot-col">
        <h5>Bikes</h5>
        <a href="#bikes">The Long</a>
        <a href="#bikes">The Compact</a>
        <a href="#bikes">The Twin</a>
        <a href="#build">The build</a>
      </div>

      <div class="foot-col">
        <h5>Workshop</h5>
        <a href="#process">The process</a>
        <a href="#visit">Book a fitting</a>
        <a href="#faq">FAQ</a>
        <a href="#price">What it costs</a>
      </div>

      <div class="foot-col">
        <h5>Find us</h5>
        <span>Blågårdsgade 24</span>
        <span>2200 København N</span>
        <a href="tel:+4535551408">+45 35 55 14 08</a>
        <a href="mailto:hej@lumencycles.dk">hej@lumencycles.dk</a>
      </div>
    </div>

    <div class="foot-bottom">
      <span>© 2025 Lumen Cycles ApS · CVR 36 42 91 08</span>
      <span>Built in Copenhagen. Ridden everywhere else.</span>
    </div>
  </div>
</footer>

<script>
(function () {
  'use strict';

  /* ---------------------------------------------------------
     Nav: solid background after scroll
     --------------------------------------------------------- */
  var nav = document.getElementById('nav');
  function onScroll() {
    if (window.scrollY > 20) nav.classList.add('scrolled');
    else nav.classList.remove('scrolled');
  }
  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();

  /* ---------------------------------------------------------
     Mobile menu
     --------------------------------------------------------- */
  var toggle = document.getElementById('navToggle');
  var mobileMenu = document.getElementById('mobileMenu');

  toggle.addEventListener('click', function () {
    var open = toggle.classList.toggle('open');
    mobileMenu.classList.toggle('open', open);
    toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
    toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
    if (open) nav.classList.add('scrolled');
    else if (window.scrollY <= 20) nav.classList.remove('scrolled');
  });

  mobileMenu.addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
      toggle.classList.remove('open');
      mobileMenu.classList.remove('open');
      toggle.setAttribute('aria-expanded', 'false');
    }
  });

  /* ---------------------------------------------------------
     Configurator
     --------------------------------------------------------- */
  var MODELS = {
    long: {
      capacity: '2 children + 60 kg',
      wheelbase: '2,180 mm',
      weight: '29 kg',
      price: '€4,450',
      cargo:
        '<rect x="250" y="182" width="174" height="50" rx="5" fill="#CBA97E" stroke="#A8875C" stroke-width="1.6"/>' +
        '<line x1="258" y1="198" x2="416" y2="198" stroke="#A8875C" stroke-width="1" opacity=".45"/>' +
        '<line x1="258" y1="214" x2="416" y2="214" stroke="#A8875C" stroke-width="1" opacity=".45"/>' +
        '<rect x="366" y="218" width="34" height="7" rx="3.5" fill="#7A5C38" opacity=".32"/>' +
        '<rect x="250" y="182" width="174" height="6" rx="3" fill="#BF552E" opacity=".9"/>' +
        '<line x1="284" y1="232" x2="284" y2="258" stroke="#1B2621" stroke-width="5" stroke-linecap="round"/>' +
        '<line x1="360" y1="232" x2="360" y2="241" stroke="#1B2621" stroke-width="5" stroke-linecap="round"/>'
    },
    compact: {
      capacity: '1 child + 40 kg',
      wheelbase: '1,940 mm',
      weight: '25 kg',
      price: '€3,950',
      cargo:
        '<rect x="256" y="192" width="112" height="40" rx="5" fill="#CBA97E" stroke="#A8875C" stroke-width="1.6"/>' +
        '<line x1="262" y1="206" x2="362" y2="206" stroke="#A8875C" stroke-width="1" opacity=".45"/>' +
        '<line x1="262" y1="220" x2="362" y2="220" stroke="#A8875C" stroke-width="1" opacity=".45"/>' +
        '<rect x="330" y="216" width="28" height="6" rx="3" fill="#7A5C38" opacity=".32"/>' +
        '<rect x="256" y="192" width="112" height="6" rx="3" fill="#BF552E" opacity=".9"/>' +
        '<line x1="286" y1="232" x2="286" y2="257" stroke="#1B2621" stroke-width="5" stroke-linecap="round"/>'
    },
    twin: {
      capacity: '100 kg cargo',
      wheelbase: '2,240 mm',
      weight: '31 kg',
      price: '€4,250',
      cargo:
        '<rect x="246" y="210" width="184" height="12" rx="4" fill="#CBA97E" stroke="#A8875C" stroke-width="1.6"/>' +
        '<rect x="262" y="180" width="54" height="30" rx="3" fill="#C09866" stroke="#8E7148" stroke-width="1.4"/>' +
        '<line x1="262" y1="180" x2="316" y2="210" stroke="#8E7148" stroke-width="1.2" opacity=".55"/>' +
        '<line x1="316" y1="180" x2="262" y2="210" stroke="#8E7148" stroke-width="1.2" opacity=".55"/>' +
        '<rect x="336" y="188" width="46" height="22" rx="3" fill="#C09866" stroke="#8E7148" stroke-width="1.4"/>' +
        '<line x1="336" y1="188" x2="382" y2="210" stroke="#8E7148" stroke-width="1.2" opacity=".55"/>' +
        '<line x1="382" y1="188" x2="336" y2="210" stroke="#8E7148" stroke-width="1.2" opacity=".55"/>' +
        '<line x1="272" y1="222" x2="272" y2="260" stroke="#1B2621" stroke-width="5" stroke-linecap="round"/>' +
        '<line x1="356" y1="222" x2="356" y2="241" stroke="#1B2621" stroke-width="5" stroke-linecap="round"/>'
    }
  };

  var cargoGroup = document.getElementById('cargoGroup');
  var specCapacity = document.getElementById('specCapacity');
  var specWheelbase = document.getElementById('specWheelbase');
  var specWeight = document.getElementById('specWeight');
  var specPrice = document.getElementById('specPrice');
  var modelButtons = document.querySelectorAll('.model');

  function setModel(key) {
    var m = MODELS[key];
    if (!m) return;

    cargoGroup.innerHTML = m.cargo;
    specCapacity.textContent = m.capacity;
    specWheelbase.textContent = m.wheelbase;
    specWeight.textContent = m.weight;
    specPrice.textContent = m.price;

    modelButtons.forEach(function (btn) {
      var active = btn.getAttribute('data-model') === key;
      btn.classList.toggle('is-active', active);
      btn.setAttribute('aria-selected', active ? 'true' : 'false');
    });
  }

  modelButtons.forEach(function (btn) {
    btn.addEventListener('click', function () {
      setModel(btn.getAttribute('data-model'));
    });
  });

  setModel('long');

  /* ---------------------------------------------------------
     FAQ accordion
     --------------------------------------------------------- */
  var faqItems = document.querySelectorAll('.faq-item');

  faqItems.forEach(function (item) {
    var q = item.querySelector('.faq-q');
    q.addEventListener('click', function () {
      var isOpen = item.classList.contains('open');

      faqItems.forEach(function (other) {
        other.classList.remove('open');
        other.querySelector('.faq-q').setAttribute('aria-expanded', 'false');
      });

      if (!isOpen) {
        item.classList.add('open');
        q.setAttribute('aria-expanded', 'true');
      }
    });
  });

  /* ---------------------------------------------------------
     Contact form
     --------------------------------------------------------- */
  var form = document.getElementById('fitForm');
  var formDone = document.getElementById('formDone');
  var emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;

  form.addEventListener('submit', function (e) {
    e.preventDefault();
    var valid = true;

    form.querySelectorAll('[required]').forEach(function (field) {
      var value = field.value.trim();
      var ok = field.type === 'email' ? emailRe.test(value) : value.length > 0;
      field.classList.toggle('invalid', !ok);
      if (!ok && valid) {
        field.focus();
        valid = false;
      }
    });

    if (!valid) return;

    form.classList.add('sent');
    formDone.classList.add('show');
    formDone.scrollIntoView({ behavior: 'smooth', block: 'center' });
  });

  form.querySelectorAll('input, textarea').forEach(function (field) {
    field.addEventListener('input', function () {
      field.classList.remove('invalid');
    });
  });

  /* ---------------------------------------------------------
     Scroll reveal
     --------------------------------------------------------- */
  var revealEls = document.querySelectorAll('[data-reveal]');

  if ('IntersectionObserver' in window) {
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          var delay = parseInt(entry.target.getAttribute('data-reveal'), 10) || 0;
          entry.target.style.transitionDelay = delay + 'ms';
          entry.target.classList.add('in');
          io.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });

    revealEls.forEach(function (el) { io.observe(el); });
  } else {
    revealEls.forEach(function (el) { el.classList.add('in'); });
  }

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

Compare with

DeepSeek V4.1 Flash 1017: other attempts