• Updated 12 Nov, 13:46 UTC
  • Next run 13 Nov, 05:17 UTCNext 13 Nov 05:17
  • Last 7 days: 8 new models · 61 runs7 d: 8 models · 61 runs
Landing page for a cargo bike workshop

ricursiveAI/Ripple-65B-PreviewRicursiveai

Network offOpen alone (new tab)

Run details

Model
ricursiveai/ripple-65b-preview
Route
OpenRouter API, one user message
Served by
GMICloud
Effort
no thinking
Limits
60 min · 131,072 output tokens (the model's limit)
Date
7 Nov 2026
Time
78 s
Size
48 kB
Tokens
94 in, 14,493 out
List price
$0.009 at today's price ($0.20 in / $0.60 out per M)
Paid
$0.009

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

48 kB 1,178 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>
<style>
  /* ---------- Design tokens ---------- */
  :root{
    --ink:#1a1a19;
    --ink-2:#2c2c2a;
    --muted:#6b6b65;
    --line:#d8d5cf;
    --paper:#fbfbf8;
    --panel:#ffffff;
    --accent:#b04a2f;
    --accent-soft:#f3e4e0;
    --radius:18px;
    --font:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;
    --serif:Georgia,"Times New Roman",serif;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* ---------- Components ---------- */
  .wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 24px;position:relative;z-index:1;}

  .eyebrow{
    font-size:12px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:600;
    margin:0 0 14px;
  }

  h1{
    font-family:var(--serif);
    font-size:clamp(2.4rem,5.4vw,3.9rem);
    line-height:1.08;
    margin:0 0 22px;
    font-weight:400;
    letter-spacing:-.01em;
  }

  h2{
    font-family:var(--serif);
    font-size:clamp(1.9rem,3.8vw,2.8rem);
    line-height:1.15;
    margin:0 0 18px;
    font-weight:400;
    letter-spacing:-.01em;
  }

  h3{
    font-size:1.12rem;
    line-height:1.35;
    margin:0 0 8px;
    letter-spacing:-.005em;
    font-weight:600;
  }

  .lede{font-size:1.075rem;color:var(--ink-2);max-width:58ch;margin:0 0 34px;}

  .section{padding:86px 0;border-top:1px solid var(--line);}

  /* ---------- Header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(251,251,248,.88);
    backdrop-filter:saturate(180%) blur(10px);
    border-bottom:1px solid var(--line);
  }

  .bar{
    display:flex;align-items:center;justify-content:space-between;
    gap:24px;height:76px;
  }

  .brand{
    display:flex;align-items:center;gap:12px;
    font-family:var(--serif);
    font-size:1.5rem;
    font-weight:400;
    letter-spacing:-.01em;
    text-decoration:none;
    color:var(--ink);
  }

  .brand .mark{
    display:grid;place-items:center;
    width:26px;height:26px;flex:none;
    background:var(--accent);
    color:#fff;
    border-radius:7px;
    font-size:.85rem;
    font-weight:700;
    font-family:var(--font);
    letter-spacing:0;
  }

  nav{display:flex;align-items:center;gap:30px;flex-wrap:wrap;}
  nav a{
    text-decoration:none;
    color:var(--ink-2);
    font-size:14.5px;
    font-weight:500;
    padding:6px 0;
    position:relative;
  }
  nav a::after{
    content:"";position:absolute;left:0;bottom:0;
    height:2px;width:0;background:var(--ink);transition:width .25s ease;
  }
  nav a:hover::after{width:100%;}

  .header-cta{
    background:var(--ink);color:#fff;
    padding:11px 22px;border-radius:999px;
    text-decoration:none;font-size:14.5px;font-weight:600;
    transition:background .2s ease;
  }
  .header-cta:hover{background:var(--ink-2);}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    padding:15px 30px;border-radius:999px;
    font-size:.95rem;font-weight:600;
    text-decoration:none;border:1.5px solid transparent;
    cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease;
    white-space:nowrap;
  }
  .btn:active{transform:translateY(1px);}

  .btn-primary{background:var(--ink);color:#fff;}
  .btn-primary:hover{background:var(--ink-2);}

  .btn-share{
    display:inline-flex;align-items:center;gap:8px;
    padding:11px 22px;border-radius:999px;
    background:#fff;border:1.5px solid var(--line);
    color:var(--ink);font-size:.85rem;font-weight:600;
    text-decoration:none;cursor:pointer;
    transition:border-color .2s ease, background .2s ease;
  }
  .btn-share:hover{border-color:#c3c0b8;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    overflow:hidden;
    background:linear-gradient(155deg,#fde9e4 0%,#fbfbf8 62%),#fbfbf8;
    border-radius:var(--radius);
    padding:clamp(34px,5vw,54px);
    margin:0 auto;
    max-width:1180px;
    box-shadow:0 30px 70px -34px rgba(120,74,45,.45);
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:clamp(28px,5vw,56px);
    align-items:center;
  }

  /* SVG illustration left side */
  .hero-art{position:relative;max-width:100%;height:auto;opacity:.97;}
  .hero-art circle.c1{fill:var(--accent);}
  .hero-art circle.c2{fill:#5b5a55;}

  .hero-grid-lines{
    position:absolute;inset:0;pointer-events:none;
  }
  .hero-grid-lines::before{
    content:"";position:absolute;inset:0;
    background-image:linear-gradient(rgba(120,74,45,.13) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(120,74,45,.13) 1px,transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(115deg,#000 40%,transparent);
    opacity:.5;
  }

  .hero-caption{
    position:absolute;
    left:-14px;right:0;bottom:clamp(22px,4vw,34px);
    text-align:right;
    font-size:.85rem;color:var(--muted);font-style:italic;
    font-family:var(--serif);
    text-shadow:0 1px 2px rgba(0,0,0,.3);
  }

  .hero-points{margin-top:34px;display:flex;flex-direction:column;gap:15px;}
  .hero-point{
    display:flex;gap:11px;align-items:flex-start;
    font-size:.92rem;color:var(--ink-2);line-height:1.55;
  }
  .hero-point span.tick{
    flex:none;color:var(--accent);font-weight:700;
    font-size:.82rem;margin-top:4px;
  }

  .hero-price{
    display:flex;align-items:baseline;gap:10px;
    margin-top:32px;
  }
  .hero-price strong{
    font-family:var(--serif);
    font-size:clamp(1.6rem,3.4vw,2.3rem);
    line-height:1;
    color:var(--ink);
  }
  .hero-price small{color:var(--muted);font-size:.82rem;}

  /* ---------- Steps ---------- */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .step{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:22px;
    padding:28px 26px 26px;
    transition:border-color .25s ease,transform .25s ease;
  }
  .step:hover{border-color:#b9b4a9;transform:translateY(-3px);}
  .step-num{
    font-family:var(--serif);
    font-size:.95rem;color:var(--accent);
    letter-spacing:.02em;display:block;margin-bottom:14px;font-weight:600;
  }
  .step p{margin:0 0 16px;font-size:.94rem;color:var(--ink-2);}
  .step .step-cap{font-size:.78rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-weight:600;}

  /* ---------- Numbers band ---------- */
  .band{
    background:var(--ink);color:#fff;
    border-radius:30px;
    padding:54px 36px;
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:36px;
    position:relative;overflow:hidden;
  }
  .band::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,var(--accent),transparent 55%);
    opacity:.55;
  }
  .band .metric strong{
    display:block;font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.35rem);
    line-height:1.1;margin-bottom:8px;
    letter-spacing:-.01em;
  }
  .band .metric span{font-size:.8rem;color:#cfcac0;letter-spacing:.11em;text-transform:uppercase;font-weight:600;}

  /* ---------- Text + order box ---------- */
  .split{
    display:grid;grid-template-columns:1fr 1.05fr;
    gap:clamp(30px,5vw,60px);align-items:center;
  }
  .lead-art{
    border-radius:24px;padding:18px 18px 18px 10px;
    margin-top:26px;border:1px solid var(--line);background:#fff;
  }
  .lead-art svg{width:100%;max-width:340px;height:auto;}

  .order-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:26px;
    padding:32px;
    display:flex;flex-direction:column;
    box-shadow:0 40px 70px -42px rgba(60,60,50,.5);
  }
  .order-card .ord-head{margin-bottom:10px;}
  .order-card .ord-line{
    display:flex;align-items:center;gap:10px;
    margin-bottom:22px;padding-bottom:19px;border-bottom:1px dashed var(--line);
    font-size:.88rem;color:var(--ink-2);
  }
  .order-card .ord-line:last-of-type{border-bottom:0;padding-bottom:0;margin-bottom:0;}
  .ord-line .o-label{
    flex:none;width:88px;
    font-weight:600;font-size:.78rem;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted);
  }
  .ord-line .o-value{
    flex:1;font-size:1rem;font-weight:500;color:var(--ink);
  }

  /* Quantity selector */
  .qty{
    display:flex;align-items:center;gap:10px;
    font-size:.82rem;color:var(--muted);
    margin-top:26px;padding-top:24px;border-top:1px dashed var(--line);
    font-weight:600;
  }
  .dots{display:flex;gap:4px;align-items:stretch;}
  .dot{
    width:34px;height:34px;padding:0 8px;flex:1;justify-content:center;
    background:#fff;border:1.5px solid var(--line);border-radius:10px;
    cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .15s ease;
    display:flex;align-items:center;justify-content:center;
  }
  .dot:hover{border-color:#b9b4a9;background:#fdfcf8;}
  .dot .plus{opacity:0;transition:opacity .2s ease;}
  .dot:hover .plus{opacity:1;}
  .dot .bar{
    width:16px;height:2px;background:var(--line);border-radius:2px;
    transition:background .3s ease,height .3s ease,opacity .3s ease;
  }
  .dot:hover .bar{background:var(--accent);}
  .dot .t{color:var(--muted);font-size:.78rem;font-weight:600;}

  .reserve{
    margin-top:26px;text-align:center;
  }
  .reserve .btn{max-width:440px;}

  /* ---------- Gallery row ---------- */
  .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  .tile{
    position:relative;
    border-radius:16px;
    overflow:hidden;
    border:1px solid var(--line);
    background:#fff;
    aspect-ratio:1;
    display:grid;place-items:center;
    min-height:150px;
    opacity:.97;
    transition:transform .25s ease,box-shadow .25s ease;
  }
  .tile:hover{transform:translateY(-6px);box-shadow:0 24px 40px -26px rgba(40,40,30,.6);}
  .tile::after{
    content:attr(data-label);
    position:absolute;inset:0;display:grid;place-items:center;
    background:rgba(26,26,25,.78);color:#fff;
    font-family:var(--serif);font-size:.94rem;font-weight:400;
    opacity:0;transition:opacity .28s ease;
  }
  .tile svg{position:relative;transition:transform .5s cubic-bezier(.2,.7,.3,1);opacity:.85;}
  .tile:hover svg{transform:scale(1.06);}
  .tile:hover::after{opacity:1;}

  /* ---------- Carousel ---------- */
  .carousel{
    display:flex;overflow:hidden;
    border-radius:24px;
    background:var(--panel);
    border:1px solid var(--line);
    position:relative;
  }
  .carousel-track{display:flex;transition:margin-left .6s cubic-bezier(.25,.75,.4,1);will-change:transform;}
  .carousel-slide{
    flex:0 0 76%;
    padding:16px;
    display:grid;gap:14px;
    max-height:400px;overflow:hidden;
  }
  .carousel-slide svg{width:100%;height:auto;filter:drop-shadow(0 18px 24px rgba(40,40,30,.16));}
  .carousel-slide figcaption{
    font-family:var(--serif);font-size:.92rem;color:var(--muted);
    line-height:1.6;font-style:italic;margin:0;
  }
  .carousel-slide .tag{
    font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
    font-weight:700;color:var(--accent);
    display:block;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);
  }
  .carousel-btn{
    background:#fff;border:1px solid var(--line);border-radius:50%;
    width:40px;height:40px;flex:none;cursor:pointer;
    font-size:13px;line-height:1;
    color:var(--ink);transition:background .2s ease,transform .2s ease;
  }
  .carousel-btn:hover{background:var(--ink);color:#fff;}
  .carousel-btn:active{transform:scale(.94);}
  .carousel-btn:disabled{opacity:.28;cursor:default;}
  .carousel-wrap{position:relative;}
  .carousel-wrap .nav{position:absolute;top:10px;right:10px;}
  .carousel-wrap .nav a{color:var(--paper Jacqueline :#fff!important;}

  .carousel-wrap .nav a{color:#fff!important;display:none;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;}
  .carousel-wrap:hover .nav a{display:inline;}

  /* ---------- FAQ ---------- */
  .faq{max-width:820px;margin:0 auto;}
  details{
    border-bottom:1px solid var(--line);
    padding:0 0 20px;
  }
  details summary{
    list-style:none;cursor:pointer;
    font-weight:600;font-size:1.02rem;
    display:flex;align-items:center;gap:10px;
    padding:6px 0;
    transition:color .2s ease;
  }
  details summary::-webkit-details-marker{display:none;}
  details summary::after{
    content:"+";float:right;font-size:1.35rem;line-height:1;
    color:var(--accent);padding-right:2px;font-weight:400;
  }
  details[open] summary::after{content:"–";}
  details p{margin:18px 0 0;color:var(--ink-2);font-size:.95rem;max-width:62ch;}

  /* ---------- Motivation / testimonial ---------- */
  .quote-card{
    display:grid;grid-template-columns:.95fr 1.05fr;
    border-radius:28px;
    border:1px solid var(--line);
    background:#fff;
    overflow:hidden;
  }
  .quote-card .qc-visual{
    padding:clamp(26px,4vw,44px);background:linear-gradient(160deg,#f8f6f2,#fff);
  }
  .quote-card .qc-text{padding:clamp(30px,4vw,46px);}
  .variant{
    font-family:var(--serif);font-style:italic;
    font-size:1.3rem;letter-spacing:.01em;
    color:var(--paper) !important;
  }
  /* keep accent readable over dark backgrounds */
  .variant { color:var(--accent); }

  .attribution{
    margin-top:24px;font-size:.82rem;color:var(--muted);
    display:flex;align-items:center;gap:8px;
  }
  .attribution::before{
    content:"";width:24px;height:1px;background:var(--line);
  }

  /* ---------- Footer stamp ---------- */
  .stamp{
    text-align:center;
    font-family:var(--serif);
    font-size:clamp(1.9rem,4.2vw,3rem);
    letter-spacing:-.015em;
    line-height:1.05;
    margin:0;
    padding:0 6px;
    position:relative;
  }
  .stamp b{color:var(--accent)}

  /* ---------- Footer ---------- */
  footer{
    background:var(--ink);color:#b9b9b2;
    padding:76px 0 46px;
  }
  .foot-grid{
    display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;
    padding-bottom:52px;border-bottom:1px solid #2e2e29;
  }
  .foot-brand .brand{color:#fff;margin-bottom:18px;}
  .foot-brand p{font-size:.9rem;max-width:34ch;color:#8f8f86;margin:0 0 22px;line-height:1.65;}
  footer .foot-brand a{
    display:inline-block;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
    text-decoration:none;color:#cfcac0;margin-right:8px;opacity:.75;
  }
  footer .foot-brand a:hover{opacity:1;}
  .foot-col h4{
    font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
    color:#dbdbd4;font-weight:700;margin:0 0 16px;
    display:flex;align-items:center;gap:8px;
  }
  .foot-col h4::after{
    content:"";flex:1;height:1px;background:#3a3a34;
  }
  .foot-col li{margin-bottom:10px;}
  .foot-col a{
    color:#a9a9a0;font-size:.9rem;text-decoration:none;transition:color .18s ease;
  }
  .foot-col a:hover{color:#fff;text-decoration:underline;}

  .foot-bottom{
    display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
    padding-top:26px;font-size:.78rem;color:#7d7d77;
  }
  .foot-bottom a{color:#a9a9a0;text-decoration:none;}

  /* ---------- Reveal on scroll ---------- */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.75,.3,1),transform .7s cubic-bezier(.22,.75,.3,1);}
  .reveal.in{opacity:1;transform:none;}

  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none;}
    html{scroll-behavior:auto;}
  }

  /* ---------- Responsive ---------- */
  @media (max-width:980px){
    .hero{grid-template-columns:1fr;text-align:left;}
    .hero-art{order:-1;display:none;}
    .steps{grid-template-columns:1fr 1fr;}
    .band{grid-template-columns:1fr;gap:26px;padding:34px 26px;text-align:left;}
    .split{grid-template-columns:1fr;}
    .order-card{order:-1;}
    .tiles{grid-template-columns:1fr 1fr;}
    .foot-grid{grid-template-columns:1fr 1fr;gap:34px;}
    .quote-card{grid-template-columns:1fr;}
    .hero-caption{position:static;display:inline;font-size:.8rem;}
    .hero-price{margin-top:22px;}
    nav{gap:20px;font-size:14px;}
  }

  @media (max-width:640px){
    body{font-size:16px;}
    .wrap{padding:0 18px;}
    .bar{height:66px;gap:14px;}
    nav{display:none;}
    nav ul{display:none;}
    .section{padding:62px 0;}
    .steps{grid-template-columns:1fr;gap:14px;}
    .step{padding:24px 20px 22px;}
    .order-card{padding:26px 20px;border-radius:22px;}
    .band{padding:26px 20px;border-radius:24px;}
    .hero-price strong{font-size:1.5rem;}
    .tiles{grid-template-columns:1fr;gap:10px;}
    .carousel-slide{flex:0 0 82%;}
    .carousel-wrap .nav{top:8px;right:4px;}
    .foot-grid{grid-template-columns:1fr;gap:28px;}
    .foot-bottom{flex-direction:column;align-items:flex-start;}
    .style-guide hr{border:0;border-top:1px solid var(--line);}
  }
</style>
</head>
<body>

<!-- ==================== HEADER ==================== -->
<header>
  <div class="wrap bar">
    <a class="brand" href="#top">
      <span class="mark">LC</span>
      <span>Lumen&nbsp;Cycles</span>
    </a>

    <nav aria-label="Main">
      <a href="#build">Build</a>
      <a href="#numbers">Proof</a>
      <a href="#shop">Gallery</a>
      <a href="#faq">Questions</a>
    </nav>

    <a class="header-cta" href="#reserve">Book a call</a>
  </div>
</header>

<main id="top">

  <!-- ==================== HERO ==================== -->
  <div class="wrap">
    <section class="hero" style="margin-top:0;">

      <!-- Decorative line-art illustration -->
      <div class="hero-art" aria-hidden="true">
        <div class="hero-grid-lines"></div>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 420" width="318" height="417" role="presentation">
          <!-- basket & rider outline -->
          <g fill="none" stroke="#1a1a19" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round">
            <!-- Rider -->
            <circle cx="160" cy="108" r="30" stroke="#1a1a19" stroke-width="1.9"/>
            <!-- basket -->
            <rect x="118" y="142" width="84" height="82" rx="10"/>
            <!-- cargo box walls -->
            <path d="M96 226 V368 a40 40 0 0 1 80 0 V226"/>
            <!-- front wheel -->
            <circle cx="86" cy="368" r="42"/>
            <path d="M86 326 v84 M86 410 v-84" stroke-width="2.1"/>
            <!-- rear wheel -->
            <circle cx="234" cy="368" r="42"/>
            <path d="M234 326 v84 M234 410 v-84" stroke-width="2.1"/>
            <!-- frame -->
            <path d="M160 186 L112 228 L86 320 L230 316 L204 228 Z" stroke-width="2.1" fill="none"/>
            <!-- handlebar -->
            <path d="M150 122 h32 M141 118 v10 M179 118 v10" stroke-width="2.1"/>
            <!-- support lines -->
            <path d="M92 300 h8 M92 336 h8 M244 300 h-8 M244 336 h-8" stroke-width="1.8" stroke-dasharray="3 4" opacity=".7"/>
          </g>
          <circle class="c1" cx="160" cy="368" r="4" fill="#b04a2f"/>
          <circle class="c2" cx="160" cy="368" r="1.4" fill="#fff" opacity=".9"/>
        </svg>
        <p class="hero-caption">Line drawn by hand in Vesterbro. Steel tubes chosen one at a time.</p>
      </div>

      <div class="hero-copy">
        <p class="eyebrow">Custom cargo bikes, Copenhagen</p>
        <h1>A cargo bike built around your love, not around a catalogue.</h1>
        <p class="lede">
          Lumen Cycles is a four-person workshop in Vesterbro that designs and builds
          steel cargo bikes to order. Every frame is measured to the people who will
          ride it, priced openly, and delivered with a frame that will still look right
          in your garage in fifteen years.
        </p>

        <div class="hero-points">
          <div class="hero-point">
            <span class="tick">·</span> Hand-brazed steel frames, geometry set to your height and cargo weight
            <div class="hero-point"><span class="tick">·</span> Electric-assist tuning, insurance, and lighting finished in our workshop
            <div class="hero-point"><span class="tick">·</span> Delivered assembled, with a 60-minute ride walk-through in Copenhagen
            <div class="hero-point"><span class="tick">·</span> Two-year frame guarantee. A written repair promise for five.
          </div>

        <div class="hero-price">
          <strong>From 4,000 kr.&nbsp;frame + components</strong>
          <small>no hidden assembly or design fees</small>
        </div>

        <a class="btn btn-primary" href="#reserve">
          Start your configuration
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M5 12h14M13 6l6 6-6 6"/>
          </svg>
        </a>
      </div>
    </section>
  </div>

  <!-- ==================== STEPS ==================== -->
  <section class="section wrap reveal">
    <div style="max-width:760px;margin:0 auto 54px;text-align:center;">
      <p class="eyebrow">How it works</p>
      <h2 style="margin-left:auto;margin-right:auto;">Four steps, about ten weeks, no design leave.</h2>
      <p class="lede" style="margin-left:auto;margin-right:auto;margin-bottom:0;">
        Most builders want a deposit before they ask a single question. We ask first.
      </p>
    </div>

    <div class="steps">
      <div class="step reveal">
        <span class="step-num">01 — The measure call</span>
        <p>You come to the workshop, or we come to you. We measure everyone who will ride it, list the weight you actually carry, and sketch a frame layout in the same afternoon.</p>
        <span class="step-cap">60 minutes</span>
      </div>
      <div class="step reveal">
        <span class="step-num">02 — The frame is drawn</span>
        <p>Within four working days you get a drawing, a component list and a fixed price. If you want changes, you see the cost before we cut any tubing.</p>
        <span class="step-cap">No surprises</span>
      </div>
      <div class="step reveal">
        <span class="step-num">03 — Load test &amp; fitting</span>
        <p>Before it leaves the workshop, the completed bike is tested under its final load on our rig, then ridden by one of us for three full days.</p>
        <span class="step-cap">48-hour test ride</span>
      </div>
      <div class="step reveal">
        <span class="step-num">04 — Handover in Copenhagen</span>
        <p>Delivered assembled, with keys, documentation, a first-service kit and a walk-through of every adjustment you will want to know in winter.</p>
        <span class="step-cap">Remote? We deliver nationwide</span>
      </div>
    </div>
  </section>

  <!-- ==================== NUMBERS ==================== -->
  <section class="wrap">
    <div class="band reveal">
      <div class="metric">
        <div class="tag" style="font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:6px;">Frame tubes</div>
        <strong style="font-family:var(--font);font-size:1rem;line-height:1.5;font-weight:600;color:var(--paper);">Brazed in house</strong>
      </div>
      <div class="metric">
        <strong>240+</strong>
        <span style="color:#e3dfd6;">Cargo bikes built since 2014</span>
      </div>
      <div class="metric">
        <strong>12 wks</strong>
        <span style="color:#e3dfd6;">Typical build time</span>
      </div>
      <div class="metric">
        <strong>0.12 km</strong>
        <span style="color:#e3dfd6;">From your door to the workshop</span>
      </div>
    </div>
  </section>

  <!-- ==================== SPLIT: STORY + ORDER BOX ==================== -->
  <section class="section wrap">
    <div class="split reveal">

      <div style="flex:1;min-width:0;">
        <p class="eyebrow">Who builds your bike</p>
        <h2 style="margin-bottom:18px;">We chose Copenhagen, and we chose to stay small.</h2>
        <p class="lede">
          Lumen Cycles began in a rented bay in Vesterbro in 2014 with two builders and one
          drawing board. We are still under five people, still working in the same street, and
          still welding every frame that leaves the door ourselves.
        </p>
        <p class="lede">
          The work is deliberately narrow: steel cargo bikes for families, shops and
          organisations that will actually use the bike every day, in all weathers. That
          narrowness is why we can answer the phone, meet you on site, and still be signing
          off each frame by hand three years running.
        </p>

        <div class="lead-art reveal" style="margin-top:26px;">
          <svg viewBox="0 0 260 260" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" stroke="#1a1a19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="130" cy="74" r="28"/>
              <rect x="100" y="103" width="60" height="60" rx="6"/>
              <path d="M84 165 V232 c20 8 35 16 46 24 11 -8 27 -16 46 -24 V165 Z"/>
              <circle cx="66" cy="232" r="30"/>
              <circle cx="194" cy="232" r="30"/>
              <path d="M66 202 v60 M66 262 v-60" stroke-width="2"/>
              <path d="M194 202 v60 M194 262 v-60" stroke-width="2"/>
              <path d="M130 102 v20 M116 96 h28 M110 106 v8 M150 106 v8" stroke-width="2"/>
              <path d="M88 200 h12 M88 226 h12 M172 200 h-12 M172 226 h-12" stroke-width="1.8" stroke-dasharray="3 4" opacity=".6"/>
              <circle cx="130" cy="232" r="4" fill="#b04a2f" stroke="none"/>
            </g>
          </svg>
        </div>
      </div>

      <!-- Order configuration -->
      <div class="order-card reveal">
        <div class="ord-head">
          <span class="eyebrow" style="margin-bottom:12px;">Your build, configured</span>
          <h3 style="margin:0;">Configure your cargo bike</h3>
        </div>

        <div>
          <div class="ord-line">
            <span class="o-label">Model line</span>
            <span class="o-value">Lumen Fleter &times;2</span>
          </div>
          <div class="ord-line">
            <span class="o-label">Cargo capacity</span>
            <span class="o-value">2 children / 220 kg</span>
          </div>
          <div class="ord-line">
            <span class="o-label">Assist</span>
            <span class="o-value">Mid-drive, 20&nbsp;Nm · 750&nbsp;Wh</span>
          </div>
          <div class="ord-line">
            <span class="o-label">Colour</span>
            <span class="o-value">Slate grey, waxed cotton deck</span>
          </div>
          <div class="ord-line">
            <span class="o-label">Handover</span>
            <span class="o-value">Copenhagen workshop, day 78</span>
          </div>
        </div>

        <div class="qty">
          <span>Children or seats you regularly carry</span>
          <div class="dots" role="group" aria-label="Cargo configuration">
            <button class="dot" data-count="1" aria-label="One">
              <span class="plus">+</span><span class="t">1</span><span class="bar"></span>
            </button>
            <button class="dot" data-count="2" aria-label="Two">
              <span class="plus">+</span><span class="t">2</span><span class="bar"></span>
            </button>
            <button class="dot" data-count="3" aria-label="Three">
              <span class="plus">+</span><span class="t">3</span><span class="bar"></span>
            </button>
            <button class="dot" data-count="4" aria-label="Four">
              <span class="plus">+</span><span class="t">4</span><span class="bar"></span>
            </button>
          </div>
        </div>

        <div class="reserve">
          <svg width="26" height="26" viewBox="0 0 28 28" fill="none" stroke="#b04a2f" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <rect x="2" y="6" width="24" height="16" rx="2"/>
            <path d="M8 15h4M13 10v4"/>
          </svg>
          <strong style="font-size:1.05rem;">From 4,000 kr.</strong>
          <span style="display:block;margin-top:8px;color:var(--muted);font-size:.85rem;">This is a real booking request, not a purchase. No card details, no obligation.</span>
        </div>

        <a class="btn btn-primary" id="reserveBtn" href="#reserve">
          Reserve your build slot
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M5 12h14M13 6l6 6-6 6"/>
          </svg>
        </a>
      </div>

    </div>
  </section>

  <!-- ==================== GALLERY / SHOP ==================== -->
  <section class="section wrap" id="shop" style="padding-top:0;">
    <div style="max-width:760px;margin:0 auto 34px;text-align:center;">
      <p class="eyebrow">Built this year</p>
      <h2 style="margin-left:auto;margin-right:auto;">All four on the road in Copenhagen right now.</h2>
    </div>

    <div class="carousel-wrap reveal">
      <div class="nav">
        <a href="#slide-1">01 / 02 / 03 / 04</a>
        <span aria-hidden="true">Vesterbro &middot; Copenhagen</span>
      </div>

      <div class="carousel">
        <div class="carousel-track" id="track">
          <figure class="carousel-slide" id="slide-1">
            <svg viewBox="0 0 320 400" xmlns="http://www.w3.org/2000/svg" role="presentation">
              <g fill="none" stroke="#1a1a19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="42" y="104" width="236" height="94" rx="10" fill="#f1ece5"/>&lt;br&gt;r
                <path d="M160 92 L126 130 L96 188 L224 184 L194 130 Z"/>
                <circle cx="70" cy="300" r="46"/>
                <circle cx="250" cy="300" r="46"/>
                <path d="M70 254 v92 M70 352 v-92" stroke-width="2"/>
                <path d="M250 254 v92 M250 352 v-92" stroke-width="2"/>
                <rect x="120" y="62" width="80" height="26" rx="10" fill="#f1ece5"/>
                <path d="M110 56 v34 M210 56 v34" stroke-width="2"/>
                <circle cx="160" cy="42" r="8" fill="#b04a2f" stroke="none"/>
              </g>
            </svg>
            <figcaption>Fleter&nbsp;×&nbsp;2 · slate grey, waxed cotton deck</figcaption>
            <span class="tag">For a family of four</span>
          </figure>

          <figure class="carousel-slide" id="slide-2">
            <svg viewBox="0 0 320 400" xmlns="http://www.w3.org/2000/svg" role="presentation">
              <g fill="none" stroke="#1a1a19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="52" y="96" width="216" height="118" rx="10" fill="#f1ece5"/>
                <path d="M160 90 L128 124 L104 180 L216 176 L192 124 Z"/>
                <circle cx="78" cy="292" r="42"/>
                <circle cx="242" cy="292" r="42"/>
                <path d="M78 250 v84 M78 334 v-84" stroke-width="2"/>
                <path d="M242 250 v84 M242 334 v-84" stroke-width="2"/>
                <rect x="122" y="58" width="76" height="24" rx="9" fill="#f1ece5"/>
                <circle cx="160" cy="40" r="9" fill="#b04a2f" stroke="none"/>
                <circle cx="160" cy="296" r="6" fill="#b04a2f" stroke="none"/>
              </g>
            </svg>
            <figcaption>Slides &amp; ramp kit, fleet version</figcaption>
            <span class="tag">City workshop commission</span>
          </figure>

          <figure class="carousel-slide" id="slide-3">
            <svg viewBox="0 0 320 400" xmlns="http://www.w3.org/2000/svg" role="presentation">
              <g fill="none" stroke="#1a1a19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="46" y="86" width="228" height="124" rx="12" fill="#ece7db"/>
                <path d="M160 80 L134 110 L102 176 L218 172 L186 110 Z"/>
                <circle cx="64" cy="280" r="44"/>
                <circle cx="256" cy="280" r="44"/>
                <path d="M64 236 v88 M64 324 v-88" stroke-width="2"/>
                <path d="M256 236 v88 M256 324 v-88" stroke-width="2"/>
                <rect x="116" y="54" width="88" height="24" rx="9" fill="#ece7db"/>
                <circle cx="160" cy="38" r="9" fill="#b04a2f" stroke="none"/>
                <circle cx="74" cy="78" r="15" fill="#e5dfd2" stroke="#1a1a19"/>
                <circle cx="246" cy="78" r="15" fill="#e5dfd2" stroke="#1a1a19"/>
              </g>
            </svg>
            <figcaption>Lumen&nbsp;×&nbsp;3 · natural oil finish black</figcaption>
            <span class="tag">Three adults, side-loading</span>
          </figure>

          <figure class="carousel-slide" id="slide-4">
            <svg viewBox="0 0 320 400" xmlns="http://www.w3.org/2000/svg" role="presentation">
              <g fill="none" stroke="#1a1a19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="56" y="104" width="208" height="96" rx="10" fill="#f4f0e9"/>
                <path d="M160 98 L130 132 L102 182 L218 178 L190 132 Z"/>
                <circle cx="82" cy="304" r="40"/>
                <circle cx="238" cy="304" r="40"/>
                <path d="M82 264 v80 M82 344 v-80" stroke-width="2"/>
                <path d="M238 264 v80 M238 344 v-80" stroke-width="2"/>
                <rect x="124" y="60" width="72" height="22" rx="8" fill="#f4f0e9"/>
                <path d="M102 252 h10 M102 266 h10 M208 252 h-10 M208 266 h-10" stroke-width="1.8" stroke-dasharray="3 4" opacity=".6"/>
                <circle cx="160" cy="40" r="10" fill="#b04a2f" stroke="none"/>
              </g>
            </svg>
            <figcaption>Fleter&nbsp;×&nbsp;2 · powder-coated teal tank</figcaption>
            <span class="tag">Delivered to Aarhus</span>
          </figure>
        </div>
      </div>

      <div style="display:flex;gap:10px;margin-top:14px;">
        <button class="carousel-btn" id="prev" aria-label="Previous artwork">←</button>
        <button class="carousel-btn" id="next" aria-label="Next artwork">→</button>
      </div>
    </div>
  </section>

  <!-- ==================== GALLERY GRID ==================== -->
  <section class="section wrap reveal">
    <div style="max-width:760px;margin:0 auto 26px;text-align:center;">
      <p class="eyebrow">Selection of details</p>
      <h2 style="margin-left:auto;margin-right:auto;font-size:1.8rem;">What holds them up.</h2>
    </div>

    <div class="tiles">
      <div class="tile reveal" data-label="Brazed steel junctions" aria-hidden="true">
        <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
          <g fill="none" stroke="#1a1a19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M18 42 v20 M42 42 v20 M20 42 h22 M36 42 h10"/>
            <path d="M18 42 L6 8 v34 M42 62 L54 44 v18"/>
          </g>
        </svg>
      </div>
      <div class="tile reveal" data-label="Waxed cotton cargo deck" aria-hidden="true">
        <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
          <g fill="none" stroke="#1a1a19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="12" y="14" width="56" height="52" rx="4" stroke-dasharray="3 4"/>
            <path d="M24 14 v52 M27 14 v52 M33 14 v52 M36 14 v52 M42 14 v52 M45 14 v52 M51 14 v52 M54 14 v52"/>
          </g>
        </svg>
      </div>
      <div class="tile reveal" data-label="Mid-drive brushless motor" aria-hidden="true">
        <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
          <g fill="none" stroke="#1a1a19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="40" cy="34" r="19"/>
            <path d="M40 15 v14 M40 51 v14"/>
            <path d="M21 34 h38 M40 15 L53 34 L40 51 L27 34 Z"/>
          </g>
        </svg>
      </div>
      <div class="tile reveal" data-label="Winter rubber test rig" aria-hidden="true">
        <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
          <g fill="none" stroke="#1a1a19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M8 58 h24 v10 H8 z"/>
            <path d="M48 58 h24 v10 h-24 z"/>
            <path d="M46 36 v22 M34 50 h24"/>
            <path d="M28 24 h24 M26 26 v10"/>
          </g>
        </svg>
      </div>
    </div>
  </section>

  <!-- ==================== FAQ ==================== -->
  <section class="section wrap" id="faq" style="padding-top:0;">
    <div style="max-width:820px;margin-bottom:44px;">
      <p class="eyebrow">Questions</p>
      <h2 style="margin-bottom:6px;">The things people ask before they sign.</h2>
      <p class="lede" style="margin-bottom:0;">If yours is missing, write to us — most questions we have not answered here are ones we have already answered by hand.</p>
    </div>

    <div class="faq reveal">
      <details open>
        <summary>Are these the prices I will actually pay?</summary>
        <p>
          The Lumen Fleter range starts at 4,000 kr. for the frame plus the components
          listed at that price — a mid-drive motor, battery, four-pole near-silent hubless
          front hub, disc brakes, lights, and a waxed cotton cargo deck sized to four seats.
          Custom geometry, a longer wheelbase, a second child seat, or a larger battery
          is quoted on top, in writing, before we cut any tube. We do not charge design
          fees, and we do not add an assembly surcharge for work we do ourselves in the
          same workshop.
        </p>
      </details>

      <details>
        <summary>What if I need it sooner than twelve weeks?</summary>
        <p>
          We can sometimes produce a build in eight weeks if your specification matches a
          finished frame layout we already hold. Rush builds are quoted at cost plus twenty
          percent, with the caveat that we never promise a date we cannot meet — we would
          rather tell you it is ten weeks than promise eight and deliver twelve. Write with
          your deadline and we will tell you honestly whether it is achievable.
        </p>
      </details>

      <details>
        <summary>Do you take deposits, and when?</summary>
        <p>
          A deposit of 1,200 kr. is taken at the signing of the frame agreement and covers
          the time spent drawing and reserving a slot on the build schedule. The balance is
          due two weeks before handover. If a build is cancelled by the customer after the
          deposit, that deposit is retained to cover materials already ordered. Cancellation
          by us for any reason after deposit is returned in full plus the agreed compensation.
        </p>
      </details>

      <details>
        <summary>How much can it carry, and can the battery be charged indoors?</summary>
        <p>
          A two-seat Lumen Fleter carries two adults up to 110 kg each plus 90 kg of cargo,
          about 320 kg on the road. The 750 Wh battery charges from any standard three-pin
          socket, takes roughly five hours at 2 A, and fits in a weatherproof charging
          bracket that mounts inside a normal lobby wall. We supply the bracket and a
          grounding instruction with every handover.
        </p>
      </details>

      <details>
        <summary>What happens if a bolt loosens on a winter morning?</summary>
        <p>
          You call us. The phone is answered by the person who built the bike whenever
          someone is in the workshop, Monday to Friday between 08:00 and 17:00. For a
          documented fault within the first 24 months we fix it and ship the part at our
          cost. Outside that window, standard repair labour is billed at 95 kr. per hour
          plus parts — which is usually cheaper than a taxi.
        </p>
      </details>

      <details>
        <summary>Can you deliver outside Copenhagen?</summary>
        <p>
          Yes. We deliver assembled across most of Denmark, and for orders outside the
          country we flatten-pack the frame and ship it with a pre-assembly inspection.
          Remote handover includes a written torque specification, a short assembly video,
          and a follow-up call once the bike is on the road.
        </p>
      </details>

      <details>
        <summary>How much does servicing cost, and how often?</summary>
        <p>
          We recommend a service twice a year, before spring and before the first cold snap.
          A standard service — brake bleed, bearing check, spoke and torque inspection,
          battery health readout — costs 350 kr. and takes about an hour. Annual service
          customers receive priority in the repair queue.
        </p>
      </details>
    </div>
  </section>

  <!-- ==================== QUOTE / CTA ==================== -->
  <section class="section wrap" style="padding-bottom:90px;">
    <div class="quote-card reveal">
      <div class="qc-visual">
        <div style="max-width:120px;margin:0 auto;text-align:center;font-size:.8rem;color:#c08a6e;letter-spacing:.12em;text-transform:uppercase;font-weight:700;">
          Testimonial
        </div>
      </div>
      <div class="qc-text">
        <ul style="margin:0 0 22px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px;">
          <li style="font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700;padding:4px 9px;border:1px solid var(--accent-soft);border-radius:999px;background:var(--accent-soft);">
            Vesterbro, Copenhagen
          </li>
          <li style="font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 4px 0 0;font-weight:600;">Week 78 handover</li>
        </ul>

        <p class="variant" style="margin:0 0 22px;">
          "We had been renting a cargo bike for a year and a half. Lumen built ours around
          the way we actually load it — bags of flour on the left, the coffee machine on
          the right, and a ramp we designed with them. Three months in and nobody has
          touched the brakes. Our two-year-old still thinks the bell is the best thing
          in the city, which is the review we were hoping for."
        </p>

        <div class="attribution">— <strong>Mogens H.</strong>, bakery owner, Vesterbro</div>
      </div>
    </div>
  </section>

</main>

<!-- ==================== FOOTER ==================== -->
<footer>
  <div class="wrap">
    <div class="foot-grid">
      <div class="foot-brand">
        <a class="brand" href="#top">
          <span class="mark">LC</span>
          <span>Lumen&nbsp;Cycles</span>
        </a>
        <p>
          Custom steel cargo bikes, built to measure in Vesterbro since 2014.
          Ten weeks from first conversation to first ride, in any weather.
        </p>
        <div style="margin-bottom:20px;">
          <a href="#top" style="margin-left:10px;">Book a build</a>
          <a href="#faq" style="margin-left:10px;">Documentation</a>
        </div>
        <p style="font-size:.82rem;">
          <a href="#top" style="text-decoration:none;color:#b9b9b2;">CVR 38325034</a>
          &nbsp;·&nbsp;
          <a href="#top" style="text-decoration:none;color:#b9b9b2;">VAT registered</a>
        </p>
      </div>

      <div class="foot-col">
        <h4>Build</h4>
        <ul>
          <li><a href="#build">Copenhagen workshop</a></li>
          <li><a href="#build">Frame + components from 4,000 kr.</a></li>
          <li><a href="#reserve">Reserve a build slot</a></li>
        </ul>
      </div>

      <div class="foot-col">
        <h4>Aftercare</h4>
        <li><a href="#faq">Two-year frame guarantee</a></li>
        <li><a href="#faq">Twice-yearly servicing, 350 kr.</a></li>
        <li><a href="#faq">Lifelong parts support for Lumen frames</a></li>
        </ul>
      </div>

      <div class="foot-col">
        <h4>Visit</h4>
        <li>Vesterbro, 1400 Copenhagen K</li>
        <li style="font-size:.9rem;">Mon–Fri 08:00–17:00</li>
        <li style="font-size:.9rem;">Sat 09:00–13:00</li>
        </ul>
      </div>
    </div>

    <div class="foot-bottom">
      <span>Waiting times, prices and specifications apply many conditions and server errors as part of the normal business of building things well.</span>
      <a href="#top">Questions or complaints welcome</a>
    </div>
  </div>
</footer>

<!-- ==================== CTA RESERVE PANEL ==================== -->
<section class="wrap" id="reserve" style="padding:64px 0 90px;">
  <div style="text-align:center;max-width:780px;margin:0 auto;position:relative;z-index:2;">

    <!-- short dialogue, shown centrally -->
    <div id="dlg" style="font-size:1rem;color:var(--ink-2);margin-top:34px;transition:opacity .25s ease;opacity:0;pointer-events:none;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.55;">
      <strong style="color:var(--ink);display:block;margin-bottom:4px;">Book a call.</strong>
      Send us your build slot and we'll confirm by the end of the next working day. No card details, no obligation — just a conversation about your ride.
    </div>

    <p class="eyebrow" style="margin:0;">Reserve a build slot</p>
    <h2 style="font-size:clamp(1.7rem,4vw,2.6rem);margin:0 auto 18px;text-align:center;max-width:20ch;display:inline-block;">
      We'll hold your frame slot for fourteen days while we talk.
    </h2>

    <p class="lede" style="margin:0 auto 30px;text-align:center;max-width:46ch;display:inline-block;">
      Choose a layout, tell us who will ride it, and we will reserve one of the build
      slots. If your dates do not work, we will put you on the next one instead of
      quietly dropping your name.
    </p>

    <form id="reserveForm" style="display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:flex-end;" onsubmit="return false;">

      <label style="flex:1;min-width:230px;display:flex;flex-direction:column;gap:6px;text-align:left;font-size:.78rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:700;">
        Name
        <input type="text" name="name" required placeholder="Mogens H." style="padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;color:var(--ink);background:#fff;width:100%;" required>
      </label>

      <label style="flex:1;min-width:230px;display:flex;flex-direction:column;gap:6px;text-align:left;font-size:.78rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:700;">
        Email
        <input type="email" name="email" required placeholder="mogens@bakkeriet.dk" style="padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;color:var(--ink);background:#fff;width:100%;" required>
      </label>

      <label style="flex:1;min-width:230px;display:flex;flex-direction:column;gap:6px;text-align:left;font-size:.78rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:700;">
        Preferred build window
        <select name="window" style="padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;color:var(--ink);background:#fff;width:100%;" required>
          <option value="">Choose a window</option>
          <option>March</option>
          <option>April</option>
          <option>May</option>
          <option>June</option>
          <option>July</option>
          <option>August</option>
        </select>
      </label>

      <button type="submit" class="btn btn-primary reserve-submit"
              style="height:50px;flex:0 0 auto;padding:14px 34px;min-width:180px;">
        Request booking
      </button>
    </form>

    <p id="formMsg" style="margin-top:16px;color:var(--ink);max-width:44ch;margin-left:auto;margin-right:auto;font-size:.9rem;font-weight:600;"
       role="status" aria-live="polite"></p>

    <div style="margin-top:26px;font-size:.78rem;color:var(--muted);max-width:60ch;margin-left:auto;margin-right:auto;line-height:1.55;">
      Protected under annual registration. We plan to protect your personal data so
      such personal data is not disclosed to third parties, used for unspecified
      purposes or stored without an ability to support you. In accordance with
      <a href="#" style="text-decoration:underline;">§</a> data protection laws
      when possible we aim to protect and respect your data privacy rights, so we
      do not retain such information unless it is necessary for us to provide
      services, and we get appropriate consent before sharing it with legal
      partners without which we could not operate.
    </div>
  </div>
</section>

</body>
</html>

Compare with

ricursiveAI/Ripple-65B-Preview: other attempts