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

Gemini 4 HydrogenGoogle

Network offOpen alone (new tab)

Run details

Model
google/gemini-4-hydrogen
Route
OpenRouter API, one user message
Served by
Google
Effort
medium, OpenRouter's default for this model
Limits
60 min · 400,000 output tokens (our $3.00 stop per request at $7.50/M)
Date
12 Nov 2026
Time
3 min 13 s
Size
85 kB
Tokens
120 in, 30,562 out (2,517 of them thinking)
List price
$0.23 at today's price ($1.50 in / $7.50 out per M)
Paid
$0.23

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

85 kB 2,351 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Lumen Cycles — Custom Cargo Bikes Built in Copenhagen</title>
  <style>
    :root {
      --bg-base: #f5f2eb;
      --bg-warm: #ebe6da;
      --surface: #fcfbf7;
      --surface-alt: #f0ece1;
      --ink: #181a17;
      --ink-muted: #565951;
      --ink-faint: #84867c;
      --border: #d7d1c4;
      --border-strong: #bab2a1;
      --accent: #1d362b;
      --accent-hover: #14271f;
      --copper: #a24d2c;
      --brass: #8d7344;
      --bike-frame: #1d362b;
      --bike-frame-hi: #305444;
      --font-sans: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      --font-serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      --font-mono: "SF Mono", "Fira Code", Menlo, Consolas, monospace;
      --radius-sm: 4px;
      --radius-md: 8px;
      --shadow-subtle: 0 8px 30px rgba(24, 26, 23, 0.05);
      --shadow-card: 0 18px 45px rgba(24, 26, 23, 0.08);
      --max-w: 1240px;
    }

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

    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      margin: 0;
      font-family: var(--font-sans);
      background-color: var(--bg-base);
      color: var(--ink);
      line-height: 1.55;
      font-size: 16px;
    }

    img, svg {
      display: block;
      max-width: 100%;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      font-family: inherit;
      cursor: pointer;
      border: none;
      background: none;
      color: inherit;
    }

    .container {
      width: 100%;
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 28px;
    }

    .mono {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .eyebrow {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      color: var(--copper);
      margin-bottom: 14px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .eyebrow::before {
      content: "";
      display: inline-block;
      width: 22px;
      height: 1px;
      background: var(--copper);
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 26px;
      border-radius: var(--radius-sm);
      font-size: 0.92rem;
      font-weight: 500;
      letter-spacing: 0.01em;
      transition: transform 0.18s ease, background-color 0.2s ease, border-color 0.2s ease;
    }

    .btn:active {
      transform: translateY(1px);
    }

    .btn-primary {
      background-color: var(--accent);
      color: #fcfbf7;
    }

    .btn-primary:hover {
      background-color: var(--accent-hover);
    }

    .btn-secondary {
      background-color: transparent;
      border: 1px solid var(--border-strong);
      color: var(--ink);
    }

    .btn-secondary:hover {
      border-color: var(--ink);
      background-color: rgba(24, 26, 23, 0.03);
    }

    /* Header */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background-color: rgba(245, 242, 235, 0.9);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 74px;
      gap: 24px;
    }

    .brand-mark {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 600;
      letter-spacing: 0.14em;
      font-size: 0.88rem;
      text-transform: uppercase;
    }

    .brand-mark-sub {
      color: var(--ink-muted);
      font-weight: 400;
      letter-spacing: 0.08em;
      font-size: 0.72rem;
      border-left: 1px solid var(--border-strong);
      padding-left: 12px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 32px;
      font-size: 0.9rem;
      color: var(--ink-muted);
    }

    .nav-links a:hover {
      color: var(--ink);
    }

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

    .batch-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--ink-muted);
      background: var(--surface);
      border: 1px solid var(--border);
      padding: 6px 12px;
      border-radius: 999px;
    }

    .batch-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: #2f7d4f;
      box-shadow: 0 0 0 3px rgba(47, 125, 79, 0.18);
    }

    .nav-toggle {
      display: none;
      padding: 8px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
    }

    /* Hero */
    .hero {
      padding: 72px 0 88px;
      border-bottom: 1px solid var(--border);
      position: relative;
      overflow: hidden;
    }

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

    .hero-title {
      font-size: clamp(2.55rem, 4.4vw, 3.85rem);
      line-height: 1.06;
      letter-spacing: -0.03em;
      font-weight: 500;
      margin: 0 0 22px;
    }

    .hero-title em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      color: var(--accent);
    }

    .hero-lead {
      font-size: 1.12rem;
      color: var(--ink-muted);
      max-width: 50ch;
      margin: 0 0 34px;
      line-height: 1.62;
    }

    .hero-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 40px;
    }

    .hero-meta-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      padding-top: 26px;
      border-top: 1px solid var(--border);
    }

    .hero-meta-val {
      font-size: 1.08rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      margin-bottom: 3px;
    }

    .hero-meta-lbl {
      font-size: 0.8rem;
      color: var(--ink-muted);
    }

    .hero-stage {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 28px;
      box-shadow: var(--shadow-card);
      position: relative;
    }

    .stage-topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
    }

    .stage-grid-bg {
      background-image:
        linear-gradient(to right, rgba(24, 26, 23, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(24, 26, 23, 0.035) 1px, transparent 1px);
      background-size: 28px 28px;
      border-radius: var(--radius-sm);
      padding: 18px 10px 10px;
    }

    .stage-caption {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
      font-size: 0.82rem;
      color: var(--ink-muted);
    }

    /* Provenance Strip */
    .trust-strip {
      background: var(--bg-warm);
      border-bottom: 1px solid var(--border);
      padding: 22px 0;
    }

    .trust-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
    }

    .trust-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
      border-left: 1px solid var(--border-strong);
      padding-left: 16px;
    }

    .trust-item:first-child {
      border-left: none;
      padding-left: 0;
    }

    .trust-title {
      font-size: 0.88rem;
      font-weight: 600;
    }

    .trust-sub {
      font-size: 0.78rem;
      color: var(--ink-muted);
    }

    /* Section Generic */
    section {
      padding: 96px 0;
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 32px;
      margin-bottom: 52px;
    }

    .section-title {
      font-size: clamp(1.9rem, 3vw, 2.6rem);
      line-height: 1.12;
      letter-spacing: -0.025em;
      font-weight: 500;
      margin: 0;
      max-width: 18ch;
    }

    .section-desc {
      max-width: 44ch;
      color: var(--ink-muted);
      margin: 0;
    }

    /* Engineering Blueprint Anatomy */
    .anatomy-section {
      border-bottom: 1px solid var(--border);
    }

    .anatomy-layout {
      display: grid;
      grid-template-columns: 1.35fr 0.85fr;
      gap: 36px;
      align-items: stretch;
    }

    .blueprint-box {
      background: #1a211d;
      color: #e8e5dc;
      border-radius: var(--radius-md);
      padding: 28px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      border: 1px solid #2b352f;
    }

    .blueprint-grid {
      background-image:
        linear-gradient(to right, rgba(232, 229, 220, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(232, 229, 220, 0.05) 1px, transparent 1px);
      background-size: 24px 24px;
      padding: 16px 8px;
      border-radius: var(--radius-sm);
      position: relative;
    }

    .hotspot-layer {
      position: relative;
    }

    .hotspot-pin {
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #fcfbf7;
      color: #181a17;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 0 5px rgba(252, 251, 247, 0.16);
      transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }

    .hotspot-pin:hover,
    .hotspot-pin.active {
      background: var(--copper);
      color: #fcfbf7;
      transform: translate(-50%, -50%) scale(1.14);
      box-shadow: 0 0 0 7px rgba(162, 77, 44, 0.28);
    }

    .anatomy-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .spec-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 24px;
    }

    .spec-tab {
      font-family: var(--font-mono);
      font-size: 0.73rem;
      padding: 7px 11px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--ink-muted);
      transition: all 0.15s ease;
    }

    .spec-tab.active {
      background: var(--accent);
      border-color: var(--accent);
      color: #fcfbf7;
    }

    .anatomy-detail h3 {
      font-size: 1.45rem;
      font-weight: 500;
      letter-spacing: -0.02em;
      margin: 0 0 12px;
    }

    .anatomy-detail p {
      color: var(--ink-muted);
      margin: 0 0 24px;
    }

    .anatomy-specs-list {
      border-top: 1px solid var(--border);
      padding-top: 18px;
      display: grid;
      gap: 12px;
    }

    .anatomy-spec-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.88rem;
    }

    .anatomy-spec-row span:first-child {
      color: var(--ink-muted);
    }

    .anatomy-spec-row span:last-child {
      font-family: var(--font-mono);
      font-size: 0.8rem;
      font-weight: 600;
    }

    /* Configurator */
    .config-section {
      background: var(--bg-warm);
      border-bottom: 1px solid var(--border);
    }

    .config-wrapper {
      display: grid;
      grid-template-columns: 1.12fr 0.88fr;
      gap: 36px;
      align-items: start;
    }

    .config-preview-card {
      position: sticky;
      top: 98px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 28px;
      box-shadow: var(--shadow-subtle);
    }

    .config-svg-stage {
      background: linear-gradient(180deg, #faf8f2 0%, #f1ede3 100%);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 22px 12px 14px;
      margin-bottom: 22px;
    }

    .build-summary-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      padding: 18px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      margin-bottom: 22px;
    }

    .summary-label {
      font-family: var(--font-mono);
      font-size: 0.68rem;
      color: var(--ink-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .summary-value {
      font-size: 1.05rem;
      font-weight: 600;
      margin-top: 4px;
    }

    .price-checkout-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
    }

    .total-price {
      font-size: 2rem;
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1;
    }

    .price-note {
      font-size: 0.78rem;
      color: var(--ink-muted);
      margin-top: 5px;
    }

    .config-controls {
      display: grid;
      gap: 24px;
    }

    .config-group {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 24px;
    }

    .config-group-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 16px;
    }

    .config-group-title {
      font-size: 1.02rem;
      font-weight: 600;
      margin: 0;
    }

    .option-cards {
      display: grid;
      gap: 10px;
    }

    .option-card {
      text-align: left;
      padding: 14px 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      transition: border-color 0.15s ease, background-color 0.15s ease;
    }

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

    .option-card.selected {
      border-color: var(--accent);
      background: #f3f6f4;
      box-shadow: inset 0 0 0 1px var(--accent);
    }

    .option-name {
      font-weight: 600;
      font-size: 0.94rem;
      display: block;
    }

    .option-meta {
      font-size: 0.8rem;
      color: var(--ink-muted);
      display: block;
      margin-top: 2px;
    }

    .option-price {
      font-family: var(--font-mono);
      font-size: 0.82rem;
      font-weight: 600;
      white-space: nowrap;
    }

    .swatch-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .swatch-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 0.86rem;
      transition: border-color 0.15s ease;
    }

    .swatch-btn.selected {
      border-color: var(--accent);
      box-shadow: inset 0 0 0 1px var(--accent);
      font-weight: 600;
    }

    .swatch-dot {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1px solid rgba(0, 0, 0, 0.18);
    }

    .addon-list {
      display: grid;
      gap: 10px;
    }

    .addon-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      cursor: pointer;
    }

    .addon-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .addon-item input {
      accent-color: var(--accent);
      width: 16px;
      height: 16px;
    }

    /* Craftsmanship Pillars */
    .craft-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    .craft-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .craft-visual {
      height: 150px;
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .craft-card h3 {
      margin: 0;
      font-size: 1.25rem;
      font-weight: 500;
      letter-spacing: -0.015em;
    }

    .craft-card p {
      margin: 0;
      color: var(--ink-muted);
      font-size: 0.94rem;
    }

    /* Rider Stories */
    .stories-section {
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }

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

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

    .story-quote {
      font-family: var(--font-serif);
      font-size: 1.12rem;
      line-height: 1.55;
      margin: 0;
      color: var(--ink);
    }

    .story-footer {
      border-top: 1px solid var(--border);
      padding-top: 16px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 12px;
    }

    .story-author {
      font-weight: 600;
      font-size: 0.92rem;
    }

    .story-role {
      font-size: 0.8rem;
      color: var(--ink-muted);
    }

    .serial-tag {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      padding: 4px 8px;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      color: var(--ink-muted);
    }

    /* Workshop & FAQ */
    .workshop-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 44px;
      align-items: start;
    }

    .workshop-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 34px;
    }

    .workshop-details {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin: 26px 0;
      padding: 22px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .faq-list {
      display: grid;
      gap: 12px;
    }

    .faq-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }

    .faq-trigger {
      width: 100%;
      padding: 18px 20px;
      text-align: left;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 500;
      font-size: 0.98rem;
      gap: 16px;
    }

    .faq-icon {
      font-family: var(--font-mono);
      font-size: 1.1rem;
      color: var(--ink-muted);
      transition: transform 0.2s ease;
    }

    .faq-item.open .faq-icon {
      transform: rotate(45deg);
    }

    .faq-body {
      display: none;
      padding: 0 20px 18px;
      color: var(--ink-muted);
      font-size: 0.92rem;
      line-height: 1.6;
    }

    .faq-item.open .faq-body {
      display: block;
    }

    /* Footer */
    .site-footer {
      background: #181a17;
      color: #e7e3d8;
      padding: 64px 0 36px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 36px;
      padding-bottom: 48px;
      border-bottom: 1px solid rgba(231, 227, 216, 0.14);
    }

    .footer-brand {
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-size: 0.92rem;
      margin-bottom: 14px;
    }

    .footer-muted {
      color: #a3a095;
      font-size: 0.88rem;
      max-width: 34ch;
    }

    .footer-col h4 {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #a3a095;
      margin: 0 0 16px;
    }

    .footer-links {
      display: grid;
      gap: 10px;
      font-size: 0.88rem;
    }

    .footer-links a:hover {
      color: #ffffff;
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 26px;
      font-size: 0.8rem;
      color: #8f8c82;
      flex-wrap: wrap;
      gap: 14px;
    }

    /* Modal */
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(24, 26, 23, 0.62);
      backdrop-filter: blur(4px);
      z-index: 100;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .modal-backdrop.open {
      display: flex;
    }

    .modal-dialog {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      max-width: 540px;
      width: 100%;
      padding: 32px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
      position: relative;
      max-height: 90vh;
      overflow-y: auto;
    }

    .modal-close {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
    }

    .form-grid {
      display: grid;
      gap: 14px;
      margin-top: 20px;
    }

    .form-field label {
      display: block;
      font-size: 0.82rem;
      font-weight: 500;
      margin-bottom: 5px;
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
      width: 100%;
      padding: 11px 12px;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      background: #fff;
      font-family: inherit;
      font-size: 0.94rem;
    }

    .build-receipt {
      background: var(--bg-base);
      border: 1px dashed var(--border-strong);
      border-radius: var(--radius-sm);
      padding: 16px;
      margin: 18px 0;
      font-size: 0.86rem;
    }

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

      .config-preview-card {
        position: static;
      }

      .trust-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .craft-grid,
      .stories-grid {
        grid-template-columns: 1fr;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 720px) {
      .nav-links,
      .batch-pill {
        display: none;
      }

      .nav-links.mobile-open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 74px;
        left: 0;
        right: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        padding: 20px 28px;
        align-items: flex-start;
        gap: 16px;
      }

      .nav-toggle {
        display: inline-flex;
      }

      .hero {
        padding: 48px 0 60px;
      }

      section {
        padding: 64px 0;
      }

      .section-head {
        flex-direction: column;
        align-items: flex-start;
      }

      .hero-meta-row,
      .build-summary-grid,
      .workshop-details,
      .footer-grid,
      .trust-grid {
        grid-template-columns: 1fr;
      }

      .trust-item {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--border);
        padding-top: 12px;
      }

      .trust-item:first-child {
        border-top: none;
        padding-top: 0;
      }
    }
  </style>
</head>
<body>

  <!-- Header -->
  <header class="site-header">
    <div class="container header-inner">
      <a href="#top" class="brand-mark">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <circle cx="12" cy="12" r="10.5" stroke="currentColor" stroke-width="1.5"/>
          <path d="M8.5 7V17H16" stroke="currentColor" stroke-width="1.6" stroke-linecap="square"/>
        </svg>
        <span>Lumen Cycles</span>
        <span class="brand-mark-sub">København</span>
      </a>

      <nav class="nav-links" id="primaryNav">
        <a href="#engineering">Engineering</a>
        <a href="#configurator">Build Yours</a>
        <a href="#craft">Materials</a>
        <a href="#owners">Owners</a>
        <a href="#workshop">Workshop</a>
      </nav>

      <div class="header-actions">
        <span class="batch-pill">
          <span class="batch-dot"></span>
          Batch 14 · 3 Slots Left
        </span>
        <a href="#configurator" class="btn btn-primary" style="padding: 10px 18px; font-size: 0.85rem;">Configure</a>
        <button class="nav-toggle" id="navToggle" aria-label="Toggle Menu">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M3 6H17M3 10H17M3 14H17" stroke="currentColor" stroke-width="1.6"/>
          </svg>
        </button>
      </div>
    </div>
  </header>

  <main id="top">
    <!-- Hero -->
    <section class="hero">
      <div class="container hero-grid">
        <div>
          <div class="eyebrow">Refshaleøen Bespoke Atelier</div>
          <h1 class="hero-title">Built for twenty <em>Copenhagen</em> winters.</h1>
          <p class="hero-lead">
            Hand-brazed 4130 Chromoly cargo bikes built to individual specification in our harbor workshop. Engineered for effortless daily loads, silent belt drives, and decades of North Sea weather.
          </p>
          <div class="hero-cta">
            <a href="#configurator" class="btn btn-primary">Configure Your Frame</a>
            <button type="button" class="btn btn-secondary" id="openTestRideBtn">Book Refshaleøen Test Ride</button>
          </div>
          <div class="hero-meta-row">
            <div>
              <div class="hero-meta-val">From €3,850</div>
              <div class="hero-meta-lbl">Complete custom build</div>
            </div>
            <div>
              <div class="hero-meta-val">6–8 Weeks</div>
              <div class="hero-meta-lbl">Brazed &amp; painted to order</div>
            </div>
            <div>
              <div class="hero-meta-val">Lifetime</div>
              <div class="hero-meta-lbl">Structural frame warranty</div>
            </div>
          </div>
        </div>

        <div class="hero-stage">
          <div class="stage-topbar">
            <span class="mono">Flagship · Atelier Long-John</span>
            <span class="mono" style="color: var(--copper);">Serial #LC-0458</span>
          </div>
          <div class="stage-grid-bg">
            <!-- Hero Precision SVG Illustration -->
            <svg viewBox="0 0 800 390" width="100%" height="auto" role="img" aria-label="Lumen Atelier Long-John custom cargo bike side profile">
              <defs>
                <linearGradient id="oakGradHero" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stop-color="#9b6e42"/>
                  <stop offset="100%" stop-color="#6b4827"/>
                </linearGradient>
              </defs>
              <!-- Ground line -->
              <line x1="40" y1="364" x2="760" y2="364" stroke="#cfc8b8" stroke-width="1.5"/>

              <!-- Rear Wheel (26") center (620, 290), r=74 -->
              <g>
                <circle cx="620" cy="290" r="70" fill="none" stroke="#1e201d" stroke-width="9"/>
                <circle cx="620" cy="290" r="61" fill="none" stroke="#9ea29a" stroke-width="2"/>
                <circle cx="620" cy="290" r="22" fill="none" stroke="#b9bcb4" stroke-width="1.5" stroke-dasharray="3 2"/>
                <g stroke="#a8aba2" stroke-width="0.9" opacity="0.85">
                  <line x1="620" y1="229" x2="620" y2="351"/>
                  <line x1="559" y1="290" x2="681" y2="290"/>
                  <line x1="577" y1="247" x2="663" y2="333"/>
                  <line x1="577" y1="333" x2="663" y2="247"/>
                  <line x1="596" y1="234" x2="644" y2="346"/>
                  <line x1="564" y1="266" x2="676" y2="314"/>
                  <line x1="564" y1="314" x2="676" y2="266"/>
                  <line x1="596" y1="346" x2="644" y2="234"/>
                </g>
                <circle cx="620" cy="290" r="11" fill="#2c2e2a"/>
              </g>

              <!-- Front Wheel (20") center (165, 310), r=54 -->
              <g>
                <circle cx="165" cy="310" r="50" fill="none" stroke="#1e201d" stroke-width="8"/>
                <circle cx="165" cy="310" r="42" fill="none" stroke="#9ea29a" stroke-width="2"/>
                <circle cx="165" cy="310" r="18" fill="none" stroke="#b9bcb4" stroke-width="1.5" stroke-dasharray="3 2"/>
                <g stroke="#a8aba2" stroke-width="0.9" opacity="0.85">
                  <line x1="165" y1="268" x2="165" y2="352"/>
                  <line x1="123" y1="310" x2="207" y2="310"/>
                  <line x1="135" y1="280" x2="195" y2="340"/>
                  <line x1="135" y1="340" x2="195" y2="280"/>
                </g>
                <circle cx="165" cy="310" r="8" fill="#2c2e2a"/>
              </g>

              <!-- Fenders -->
              <path d="M547 265 A78 78 0 0 1 686 248" fill="none" stroke="#252824" stroke-width="5" stroke-linecap="round"/>
              <path d="M114 288 A58 58 0 0 1 213 276" fill="none" stroke="#252824" stroke-width="4.5" stroke-linecap="round"/>

              <!-- Double-leg Kickstand -->
              <path d="M368 318 L392 363 M374 318 L402 363" stroke="#484b44" stroke-width="4" stroke-linecap="round"/>

              <!-- Cargo Box (Smoked Oak) -->
              <g>
                <polygon points="222,226 436,214 432,312 246,312" fill="url(#oakGradHero)" stroke="#4c3119" stroke-width="2"/>
                <line x1="230" y1="254" x2="434" y2="246" stroke="#5a3b1f" stroke-width="1.4" opacity="0.75"/>
                <line x1="238" y1="282" x2="433" y2="278" stroke="#5a3b1f" stroke-width="1.4" opacity="0.75"/>
                <!-- Brass corner brackets -->
                <rect x="424" y="216" width="10" height="16" fill="#9a7d4a" rx="1"/>
                <rect x="223" y="226" width="10" height="14" fill="#9a7d4a" rx="1"/>
              </g>

              <!-- Frame Chromoly 4130 Tubing -->
              <g stroke="#1d362b" stroke-linecap="round" stroke-linejoin="round" fill="none">
                <!-- Rear triangle -->
                <line x1="482" y1="294" x2="620" y2="290" stroke-width="8"/>
                <line x1="518" y1="176" x2="620" y2="290" stroke-width="6.5"/>
                <!-- Seat tube -->
                <line x1="482" y1="294" x2="522" y2="165" stroke-width="9"/>
                <!-- Lower cargo spine -->
                <polyline points="482,294 436,316 238,316 202,246" stroke-width="10"/>
                <!-- Steering column / headtube -->
                <line x1="448" y1="192" x2="466" y2="296" stroke-width="10"/>
                <!-- Step-through brace -->
                <line x1="456" y1="232" x2="482" y2="294" stroke-width="8"/>
                <line x1="452" y1="210" x2="516" y2="184" stroke-width="6.5"/>
                <!-- Front Fork -->
                <line x1="202" y1="246" x2="165" y2="310" stroke-width="8"/>
              </g>

              <!-- Under-frame steering linkage rod -->
              <line x1="464" y1="300" x2="196" y2="254" stroke="#808379" stroke-width="3" stroke-linecap="round"/>

              <!-- Gates Carbon Belt & Crankset -->
              <line x1="482" y1="278" x2="620" y2="281" stroke="#222" stroke-width="3"/>
              <line x1="482" y1="310" x2="620" y2="299" stroke="#222" stroke-width="3"/>
              <circle cx="482" cy="294" r="20" fill="#2c2f2b" stroke="#6c6f66" stroke-width="2"/>
              <circle cx="482" cy="294" r="12" fill="#181a17"/>
              <line x1="482" y1="294" x2="495" y2="332" stroke="#8b8e85" stroke-width="5" stroke-linecap="round"/>
              <rect x="486" y="330" width="18" height="6" rx="2" fill="#222"/>

              <!-- Seatpost & Brooks Leather Saddle -->
              <line x1="522" y1="165" x2="532" y2="128" stroke="#c3c5bd" stroke-width="5.5"/>
              <path d="M506 125 Q532 128 560 119 Q555 133 526 132 Q504 132 506 125 Z" fill="#5e3a1f"/>

              <!-- Stem, Handlebar & Supernova Headlight -->
              <line x1="448" y1="192" x2="439" y2="144" stroke="#c3c5bd" stroke-width="5.5"/>
              <path d="M439 144 Q444 136 472 138" fill="none" stroke="#222" stroke-width="5" stroke-linecap="round"/>
              <rect x="462" y="135" width="18" height="7" rx="3" fill="#5e3a1f"/>
              <!-- Supernova front light -->
              <circle cx="195" cy="236" r="6" fill="#2b2e2a"/>
              <circle cx="191" cy="236" r="2.5" fill="#fff4d1"/>
            </svg>
          </div>
          <div class="stage-caption">
            <span>4130 Chromoly · Smoked Oak · Rohloff 14-sp + Gates Belt</span>
            <span class="mono" style="color: var(--ink);">210 kg Max Payload</span>
          </div>
        </div>
      </div>
    </section>

    <!-- Provenance Bar -->
    <div class="trust-strip">
      <div class="container trust-grid">
        <div class="trust-item">
          <span class="trust-title">Hand-Brazed in Refshaleøen</span>
          <span class="trust-sub">Individual frame jig, Copenhagen harbor</span>
        </div>
        <div class="trust-item">
          <span class="trust-title">Triple-Powder Marine Coat</span>
          <span class="trust-sub">Zinc primer + baked architectural finish</span>
        </div>
        <div class="trust-item">
          <span class="trust-title">Zero-Chain Maintenance</span>
          <span class="trust-sub">Gates CDX Carbon Belt &amp; sealed hubs</span>
        </div>
        <div class="trust-item">
          <span class="trust-title">Tested to 210 kg Gross</span>
          <span class="trust-sub">ISO 4210 &amp; DIN 79010 cargo certified</span>
        </div>
        <div class="trust-item">
          <span class="trust-title">EU Insured Delivery</span>
          <span class="trust-sub">Ready-to-ride wooden crate shipping</span>
        </div>
      </div>
    </div>

    <!-- Engineering Anatomy Section -->
    <section id="engineering" class="anatomy-section">
      <div class="container">
        <div class="section-head">
          <div>
            <div class="eyebrow">Engineering Breakdown</div>
            <h2 class="section-title">Why a €4,000 cargo bike rides differently in year ten.</h2>
          </div>
          <p class="section-desc">
            Cheap cargo bikes rattle, flex under load, and rust inside the bottom bracket after three winters. Click any numbered callout on the blueprint to inspect our tolerances.
          </p>
        </div>

        <div class="anatomy-layout">
          <div class="blueprint-box">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
              <span class="mono" style="color: #9ca49d;">DWG NO. LC-2025-A · SCALE 1:10</span>
              <span class="mono" style="color: #c98a6d;">TOLERANCE ±0.2 MM</span>
            </div>

            <div class="blueprint-grid hotspot-layer" id="hotspotContainer">
              <svg viewBox="0 0 800 380" width="100%" height="auto" aria-label="Technical wireframe blueprint">
                <!-- Technical Wireframe Bike -->
                <g fill="none" stroke="#859288" stroke-width="1.5">
                  <line x1="30" y1="352" x2="770" y2="352" stroke-dasharray="4 4" stroke="#465249"/>
                  <!-- Wheels -->
                  <circle cx="620" cy="278" r="74" stroke="#b9c2ba"/>
                  <circle cx="620" cy="278" r="62" stroke="#536157"/>
                  <circle cx="165" cy="298" r="54" stroke="#b9c2ba"/>
                  <circle cx="165" cy="298" r="44" stroke="#536157"/>
                  <!-- Frame centerline -->
                  <polyline points="482,282 620,278 518,164 482,282" stroke="#e8e5dc" stroke-width="2"/>
                  <polyline points="482,282 436,304 238,304 202,234 165,298" stroke="#e8e5dc" stroke-width="2.4"/>
                  <line x1="448" y1="180" x2="466" y2="284" stroke="#e8e5dc" stroke-width="2.2"/>
                  <line x1="452" y1="198" x2="516" y2="172" stroke="#e8e5dc" stroke-width="1.8"/>
                  <line x1="456" y1="220" x2="482" y2="282" stroke="#e8e5dc" stroke-width="1.8"/>
                  <!-- Cargo Outline -->
                  <polygon points="222,214 436,202 432,300 246,300" stroke="#c98a6d" stroke-dasharray="6 3"/>
                  <!-- Steering linkage -->
                  <line x1="464" y1="288" x2="196" y2="242" stroke="#9ac2ad" stroke-width="2"/>
                  <!-- Kickstand -->
                  <line x1="370" y1="306" x2="394" y2="352" stroke="#859288" stroke-width="2"/>
                  <!-- Dimension Lines -->
                  <line x1="165" y1="368" x2="620" y2="368" stroke="#536157" stroke-width="1"/>
                  <text x="392" y="364" fill="#9ca49d" font-family="monospace" font-size="11" text-anchor="middle">WHEELBASE: 2,010 MM</text>
                </g>
              </svg>

              <!-- Hotspot Pins -->
              <button class="hotspot-pin active" style="left: 40%; top: 71%;" data-spec="steering" aria-label="Steering Linkage">01</button>
              <button class="hotspot-pin" style="left: 41%; top: 53%;" data-spec="frame" aria-label="4130 Chromoly Frame">02</button>
              <button class="hotspot-pin" style="left: 69%; top: 75%;" data-spec="drivetrain" aria-label="Gates Belt and Rohloff Hub">03</button>
              <button class="hotspot-pin" style="left: 25%; top: 65%;" data-spec="brakes" aria-label="4-Piston Hydraulic Brakes">04</button>
              <button class="hotspot-pin" style="left: 48%; top: 88%;" data-spec="stand" aria-label="Balanced Double Kickstand">05</button>
            </div>

            <div style="display: flex; justify-content: space-between; margin-top: 16px; font-size: 0.78rem; color: #9ca49d;">
              <span>Click pins 01–05 to inspect engineering notes</span>
              <span class="mono">CAD REV 4.2</span>
            </div>
          </div>

          <div class="anatomy-panel">
            <div>
              <div class="spec-tabs" id="specTabs">
                <button class="spec-tab active" data-spec="steering">01 Steering</button>
                <button class="spec-tab" data-spec="frame">02 Frame</button>
                <button class="spec-tab" data-spec="drivetrain">03 Drivetrain</button>
                <button class="spec-tab" data-spec="brakes">04 Brakes</button>
                <button class="spec-tab" data-spec="stand">05 Stand</button>
              </div>

              <div class="anatomy-detail" id="anatomyDetail">
                <div class="mono" style="color: var(--copper); margin-bottom: 8px;">01 / Precision Rod Steering</div>
                <h3>Sealed-bearing linkage with zero speed wobble</h3>
                <p>
                  Instead of cable systems that stretch in winter, we machine a stainless-steel pushrod riding on oversized Japanese SKF ball joints. Steering feels crisp and predictable at 5 km/h with two kids aboard or at 30 km/h empty.
                </p>
              </div>
            </div>

            <div class="anatomy-specs-list" id="anatomySpecsList">
              <div class="anatomy-spec-row"><span>Joint Hardware</span><span>SKF Sealed Spherical</span></div>
              <div class="anatomy-spec-row"><span>Turning Radius</span><span>2.3 m (Tight Alley)</span></div>
              <div class="anatomy-spec-row"><span>Service Interval</span><span>5 Years / 15,000 km</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Interactive Configurator -->
    <section id="configurator" class="config-section">
      <div class="container">
        <div class="section-head">
          <div>
            <div class="eyebrow">Atelier Configurator</div>
            <h2 class="section-title">Commission your custom build.</h2>
          </div>
          <p class="section-desc">
            Every Lumen frame is assigned a workshop serial number upon deposit. Select your platform, powder coat finish, cargo deck, and drivetrain below.
          </p>
        </div>

        <div class="config-wrapper">
          <!-- Sticky Live Preview -->
          <div class="config-preview-card">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;">
              <span class="mono" id="cfgModelBadge">Atelier Long-John</span>
              <span class="mono" style="color: var(--copper);" id="cfgLeadTime">Batch 14 · 7 Weeks</span>
            </div>

            <div class="config-svg-stage">
              <svg id="configBikeSvg" viewBox="0 0 800 390" width="100%" height="auto" role="img" aria-label="Custom configured cargo bike preview">
                <line x1="40" y1="364" x2="760" y2="364" stroke="#cfc8b8" stroke-width="1.5"/>

                <!-- Rear Wheel -->
                <circle cx="620" cy="290" r="70" fill="none" stroke="#1e201d" stroke-width="9"/>
                <circle cx="620" cy="290" r="61" fill="none" stroke="#9ea29a" stroke-width="2"/>
                <g stroke="#a8aba2" stroke-width="0.9" opacity="0.8">
                  <line x1="620" y1="229" x2="620" y2="351"/>
                  <line x1="559" y1="290" x2="681" y2="290"/>
                  <line x1="577" y1="247" x2="663" y2="333"/>
                  <line x1="577" y1="333" x2="663" y2="247"/>
                </g>
                <circle cx="620" cy="290" r="11" fill="#2c2e2a"/>

                <!-- Front Wheel -->
                <circle cx="165" cy="310" r="50" fill="none" stroke="#1e201d" stroke-width="8"/>
                <circle cx="165" cy="310" r="42" fill="none" stroke="#9ea29a" stroke-width="2"/>
                <g stroke="#a8aba2" stroke-width="0.9" opacity="0.8">
                  <line x1="165" y1="268" x2="165" y2="352"/>
                  <line x1="123" y1="310" x2="207" y2="310"/>
                  <line x1="135" y1="280" x2="195" y2="340"/>
                  <line x1="135" y1="340" x2="195" y2="280"/>
                </g>
                <circle cx="165" cy="310" r="8" fill="#2c2e2a"/>

                <!-- Fenders -->
                <path d="M547 265 A78 78 0 0 1 686 248" fill="none" stroke="#252824" stroke-width="5" stroke-linecap="round"/>
                <path d="M114 288 A58 58 0 0 1 213 276" fill="none" stroke="#252824" stroke-width="4.5" stroke-linecap="round"/>

                <!-- Kickstand -->
                <path d="M368 318 L392 363 M374 318 L402 363" stroke="#484b44" stroke-width="4" stroke-linecap="round"/>

                <!-- Dynamic Cargo Box Group -->
                <g id="svgCargoGroup"></g>

                <!-- Optional Rain Canopy (toggled by JS) -->
                <g id="svgCanopyGroup" style="display: none;">
                  <path d="M236 226 Q295 110 426 118 L434 214" fill="rgba(29, 54, 43, 0.14)" stroke="#23322b" stroke-width="2.2"/>
                  <polygon points="278,195 398,188 408,136 296,144" fill="rgba(255,255,255,0.45)" stroke="#23322b" stroke-width="1"/>
                </g>

                <!-- Dynamic Frame Tubing -->
                <g id="svgFrameGroup" stroke="#1d362b" stroke-linecap="round" stroke-linejoin="round" fill="none">
                  <line x1="482" y1="294" x2="620" y2="290" stroke-width="8"/>
                  <line x1="518" y1="176" x2="620" y2="290" stroke-width="6.5"/>
                  <line x1="482" y1="294" x2="522" y2="165" stroke-width="9"/>
                  <polyline points="482,294 436,316 238,316 202,246" stroke-width="10"/>
                  <line x1="448" y1="192" x2="466" y2="296" stroke-width="10"/>
                  <line x1="456" y1="232" x2="482" y2="294" stroke-width="8"/>
                  <line x1="452" y1="210" x2="516" y2="184" stroke-width="6.5"/>
                  <line x1="202" y1="246" x2="165" y2="310" stroke-width="8"/>
                </g>

                <!-- Steering rod -->
                <line x1="464" y1="300" x2="196" y2="254" stroke="#808379" stroke-width="3" stroke-linecap="round"/>

                <!-- Motor / BB & Belt -->
                <line x1="482" y1="278" x2="620" y2="281" stroke="#222" stroke-width="3"/>
                <line x1="482" y1="310" x2="620" y2="299" stroke="#222" stroke-width="3"/>
                <circle id="svgMotorHousing" cx="482" cy="294" r="22" fill="#2c2f2b" stroke="#6c6f66" stroke-width="2"/>
                <circle cx="482" cy="294" r="11" fill="#181a17"/>
                <line x1="482" y1="294" x2="495" y2="332" stroke="#8b8e85" stroke-width="5" stroke-linecap="round"/>
                <rect x="486" y="330" width="18" height="6" rx="2" fill="#222"/>

                <!-- Saddle & Grips -->
                <line x1="522" y1="165" x2="532" y2="128" stroke="#c3c5bd" stroke-width="5.5"/>
                <path id="svgSaddle" d="M506 125 Q532 128 560 119 Q555 133 526 132 Q504 132 506 125 Z" fill="#262825"/>
                <line x1="448" y1="192" x2="439" y2="144" stroke="#c3c5bd" stroke-width="5.5"/>
                <path d="M439 144 Q444 136 472 138" fill="none" stroke="#222" stroke-width="5" stroke-linecap="round"/>
                <rect id="svgGrip" x="462" y="135" width="18" height="7" rx="3" fill="#262825"/>

                <!-- Supernova Light -->
                <circle cx="195" cy="236" r="6" fill="#2b2e2a"/>
                <circle cx="191" cy="236" r="2.5" fill="#fff4d1"/>
              </svg>
            </div>

            <div class="build-summary-grid">
              <div>
                <div class="summary-label">Finish</div>
                <div class="summary-value" id="sumFinish">Nordic Pine</div>
              </div>
              <div>
                <div class="summary-label">Total Weight</div>
                <div class="summary-value" id="sumWeight">34.8 kg</div>
              </div>
              <div>
                <div class="summary-label">Drivetrain</div>
                <div class="summary-value" id="sumDrive">Bosch + Enviolo</div>
              </div>
            </div>

            <div class="price-checkout-row">
              <div>
                <div class="total-price" id="totalPrice">€4,390</div>
                <div class="price-note">Incl. 25% Danish VAT · €400 refundable build deposit</div>
              </div>
              <button type="button" class="btn btn-primary" id="reserveBuildBtn">Reserve Build Slot</button>
            </div>
          </div>

          <!-- Configuration Controls -->
          <div class="config-controls">
            <!-- 1. Frame Platform -->
            <div class="config-group">
              <div class="config-group-head">
                <h3 class="config-group-title">1. Frame Architecture</h3>
                <span class="mono">4130 Chromoly</span>
              </div>
              <div class="option-cards" id="platformOptions">
                <button type="button" class="option-card" data-platform="compact" data-price="3850" data-weight="29.5" data-name="Vesterbro Compact">
                  <div>
                    <span class="option-name">Vesterbro Compact</span>
                    <span class="option-meta">Shorter 58 cm cargo bay · Ideal for one child &amp; tight apartment stairs</span>
                  </div>
                  <span class="option-price">€3,850</span>
                </button>
                <button type="button" class="option-card selected" data-platform="atelier" data-price="4150" data-weight="34.0" data-name="Atelier Long-John">
                  <div>
                    <span class="option-name">Atelier Long-John (Flagship)</span>
                    <span class="option-meta">Full 82 cm cargo bay · Seats 2 children or 210 kg commercial load</span>
                  </div>
                  <span class="option-price">€4,150</span>
                </button>
                <button type="button" class="option-card" data-platform="expedition" data-price="4600" data-weight="36.2" data-name="Nordhavn Expedition">
                  <div>
                    <span class="option-name">Nordhavn Expedition</span>
                    <span class="option-meta">Reinforced gussets, dual-battery mount &amp; high-clearance front fork</span>
                  </div>
                  <span class="option-price">€4,600</span>
                </button>
              </div>
            </div>

            <!-- 2. Powder Finish -->
            <div class="config-group">
              <div class="config-group-head">
                <h3 class="config-group-title">2. Powder-Coated Finish</h3>
                <span class="mono">Marine Zinc Primer</span>
              </div>
              <div class="swatch-row" id="colorOptions">
                <button type="button" class="swatch-btn selected" data-color="#1d362b" data-cname="Nordic Pine" data-price="0">
                  <span class="swatch-dot" style="background: #1d362b;"></span>
                  Nordic Pine
                </button>
                <button type="button" class="swatch-btn" data-color="#a24d2c" data-cname="Oxide Terracotta" data-price="0">
                  <span class="swatch-dot" style="background: #a24d2c;"></span>
                  Oxide Terracotta
                </button>
                <button type="button" class="swatch-btn" data-color="#25282c" data-cname="Midnight Slate" data-price="0">
                  <span class="swatch-dot" style="background: #25282c;"></span>
                  Midnight Slate
                </button>
                <button type="button" class="swatch-btn" data-color="#b8b09c" data-cname="Limestone Matte" data-price="0">
                  <span class="swatch-dot" style="background: #b8b09c;"></span>
                  Limestone Matte
                </button>
                <button type="button" class="swatch-btn" data-color="#7c8285" data-cname="Raw Brushed Clear" data-price="180">
                  <span class="swatch-dot" style="background: linear-gradient(135deg, #9ca2a5, #5e6366);"></span>
                  Raw Clear (+€180)
                </button>
              </div>
            </div>

            <!-- 3. Cargo Box / Deck -->
            <div class="config-group">
              <div class="config-group-head">
                <h3 class="config-group-title">3. Cargo Bay Specification</h3>
                <span class="mono">FSC Certified</span>
              </div>
              <div class="option-cards" id="boxOptions">
                <button type="button" class="option-card selected" data-box="oak" data-price="240" data-weight="4.8" data-bname="FSC Smoked Oak">
                  <div>
                    <span class="option-name">FSC Smoked Oak Box</span>
                    <span class="option-meta">Danish linseed-oiled oak planks with solid brass corner hardware</span>
                  </div>
                  <span class="option-price">+€240</span>
                </button>
                <button type="button" class="option-card" data-box="birch" data-price="0" data-weight="4.2" data-bname="Marine Birch Box">
                  <div>
                    <span class="option-name">Marine-Grade Birch Box</span>
                    <span class="option-meta">Waterproof phenolic birch ply with milled drainage channels</span>
                  </div>
                  <span class="option-price">Included</span>
                </button>
                <button type="button" class="option-card" data-box="flatbed" data-price="120" data-weight="3.1" data-bname="Alloy Flatbed">
                  <div>
                    <span class="option-name">Modular Aluminum Flatbed</span>
                    <span class="option-meta">Anodized deck with L-track tie-down rails for crates &amp; studios</span>
                  </div>
                  <span class="option-price">+€120</span>
                </button>
              </div>
            </div>

            <!-- 4. Drivetrain -->
            <div class="config-group">
              <div class="config-group-head">
                <h3 class="config-group-title">4. Assist &amp; Drivetrain</h3>
                <span class="mono">Gates Carbon Belt</span>
              </div>
              <div class="option-cards" id="driveOptions">
                <button type="button" class="option-card selected" data-drive="bosch" data-price="0" data-weight="0" data-dname="Bosch + Enviolo">
                  <div>
                    <span class="option-name">Bosch Cargo Line (85 Nm) + Enviolo Stepless</span>
                    <span class="option-meta">545 Wh frame battery · Effortless stepless shifting under load</span>
                  </div>
                  <span class="option-price">Included</span>
                </button>
                <button type="button" class="option-card" data-drive="rohloff" data-price="890" data-weight="0.4" data-dname="Shimano EP8 + Rohloff">
                  <div>
                    <span class="option-name">Shimano EP801 + Rohloff Speedhub 14</span>
                    <span class="option-meta">630 Wh battery · Electronic 14-speed internal hub (526% range)</span>
                  </div>
                  <span class="option-price">+€890</span>
                </button>
                <button type="button" class="option-card" data-drive="pinion" data-price="-650" data-weight="-5.8" data-dname="Pure Mechanical Pinion">
                  <div>
                    <span class="option-name">Pure Mechanical Pinion C1.12 (Non-Electric)</span>
                    <span class="option-meta">Zero electronics · Sealed 12-speed gearbox at the bottom bracket</span>
                  </div>
                  <span class="option-price">-€650</span>
                </button>
              </div>
            </div>

            <!-- 5. Workshop Additions -->
            <div class="config-group">
              <div class="config-group-head">
                <h3 class="config-group-title">5. Atelier Additions</h3>
                <span class="mono">Fitted Before Delivery</span>
              </div>
              <div class="addon-list" id="addonOptions">
                <label class="addon-item">
                  <span class="addon-left">
                    <input type="checkbox" data-addon="canopy" data-price="320" data-weight="2.1"/>
                    <span>
                      <span class="option-name">All-Weather Panorama Canopy</span>
                      <span class="option-meta">Waxed canvas &amp; UV window with aluminum hoop frame</span>
                    </span>
                  </span>
                  <span class="option-price">+€320</span>
                </label>
                <label class="addon-item">
                  <span class="addon-left">
                    <input type="checkbox" data-addon="bench" data-price="190" data-weight="1.8"/>
                    <span>
                      <span class="option-name">Double Child Bench + 5-Point Fidlock Harness</span>
                      <span class="option-meta">Foldable upholstered cushion with magnetic buckles</span>
                    </span>
                  </span>
                  <span class="option-price">+€190</span>
                </label>
                <label class="addon-item">
                  <span class="addon-left">
                    <input type="checkbox" data-addon="brooks" data-price="165" data-weight="0.3"/>
                    <span>
                      <span class="option-name">Brooks B17 Honey Leather Saddle &amp; Grips</span>
                      <span class="option-meta">Hand-selected vegetable-tanned leather contact points</span>
                    </span>
                  </span>
                  <span class="option-price">+€165</span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Craftsmanship Pillars -->
    <section id="craft">
      <div class="container">
        <div class="section-head">
          <div>
            <div class="eyebrow">Material Provenance</div>
            <h2 class="section-title">Honest steel, Danish timber, repairable parts.</h2>
          </div>
          <p class="section-desc">
            We refuse proprietary plastic fairings and glued-shut batteries. Every bolt on a Lumen bike uses standard metric hex hardware you can service anywhere in Europe.
          </p>
        </div>

        <div class="craft-grid">
          <article class="craft-card">
            <div class="craft-visual">
              <svg viewBox="0 0 240 110" width="100%" height="100%" aria-hidden="true">
                <circle cx="80" cy="55" r="34" fill="none" stroke="#1d362b" stroke-width="5"/>
                <circle cx="80" cy="55" r="24" fill="none" stroke="#a24d2c" stroke-width="1.5" stroke-dasharray="3 3"/>
                <line x1="114" y1="55" x2="210" y2="55" stroke="#1d362b" stroke-width="10" stroke-linecap="round"/>
                <path d="M104 42 C112 45, 112 65, 104 68" fill="none" stroke="#8d7344" stroke-width="3"/>
                <text x="160" y="34" fill="#565951" font-family="monospace" font-size="10" text-anchor="middle">4130 CrMo · 1.6MM</text>
              </svg>
            </div>
            <h3>Fillet-Brazed Chromoly</h3>
            <p>
              Double-butted 4130 Chromoly steel absorbs cobbles far better than brittle aluminum and can be repaired decades from now. We coat every interior tube with cavity wax before shipping.
            </p>
          </article>

          <article class="craft-card">
            <div class="craft-visual">
              <svg viewBox="0 0 240 110" width="100%" height="100%" aria-hidden="true">
                <rect x="36" y="24" width="168" height="62" rx="3" fill="#8b5f36" stroke="#4f3319" stroke-width="2"/>
                <line x1="36" y1="45" x2="204" y2="45" stroke="#5b3b1e" stroke-width="1.5"/>
                <line x1="36" y1="66" x2="204" y2="66" stroke="#5b3b1e" stroke-width="1.5"/>
                <rect x="192" y="26" width="10" height="14" fill="#9a7d4a"/>
                <rect x="38" y="26" width="10" height="14" fill="#9a7d4a"/>
                <circle cx="43" cy="33" r="1.6" fill="#2c1f10"/>
                <circle cx="197" cy="33" r="1.6" fill="#2c1f10"/>
              </svg>
            </div>
            <h3>Kiln-Dried Danish Oak</h3>
            <p>
              Our cargo boxes are milled in Funen from FSC-certified oak and finished with raw cold-pressed linseed oil. Scuffs sand out in ten minutes and gain character like a boat deck.
            </p>
          </article>

          <article class="craft-card">
            <div class="craft-visual">
              <svg viewBox="0 0 240 110" width="100%" height="100%" aria-hidden="true">
                <circle cx="66" cy="55" r="24" fill="none" stroke="#2c2f2b" stroke-width="6"/>
                <circle cx="174" cy="55" r="16" fill="none" stroke="#2c2f2b" stroke-width="5"/>
                <line x1="66" y1="31" x2="174" y2="39" stroke="#181a17" stroke-width="3.5"/>
                <line x1="66" y1="79" x2="174" y2="71" stroke="#181a17" stroke-width="3.5"/>
                <text x="120" y="100" fill="#565951" font-family="monospace" font-size="10" text-anchor="middle">GATES CDX · 30,000 KM</text>
              </svg>
            </div>
            <h3>Silent Belt &amp; Sealed Hubs</h3>
            <p>
              No greasy chain, no bent derailleur hangers, no frozen winter cables. Gates Carbon Belts run silent in pouring rain and pair seamlessly with Bosch or Rohloff drivetrains.
            </p>
          </article>
        </div>
      </div>
    </section>

    <!-- Owners / Testimonials -->
    <section id="owners" class="stories-section">
      <div class="container">
        <div class="section-head">
          <div>
            <div class="eyebrow">Field Reports</div>
            <h2 class="section-title">Trusted across Copenhagen.</h2>
          </div>
          <p class="section-desc">
            Over 450 bespoke Lumen frames are currently on the bike lanes of Østerbro, Vesterbro, Aarhus, and Hamburg.
          </p>
        </div>

        <div class="stories-grid">
          <article class="story-card">
            <p class="story-quote">
              “We sold our second car the week our Atelier Long-John arrived. Three winters of Amager wind and daily daycare runs later, not a single creak or rusted bolt.”
            </p>
            <div class="story-footer">
              <div>
                <div class="story-author">Freja &amp; Kasper Lindholm</div>
                <div class="story-role">Islands Brygge · Atelier Oak + Bosch</div>
              </div>
              <span class="serial-tag">#LC-0219</span>
            </div>
          </article>

          <article class="story-card">
            <p class="story-quote">
              “The steering geometry is night-and-day compared to mass-market cargo bikes. Even loaded with 60 kg of sourdough crates, it corners like a track bike.”
            </p>
            <div class="story-footer">
              <div>
                <div class="story-author">Morten Vestergaard</div>
                <div class="story-role">Bakery Courier, Nørrebro · Flatbed + Rohloff</div>
              </div>
              <span class="serial-tag">#LC-0341</span>
            </div>
          </article>

          <article class="story-card">
            <p class="story-quote">
              “I chose the mechanical Pinion build because I wanted zero screens and zero obsolescence. Visiting the Refshaleøen workshop to pick my paint swatch sold me instantly.”
            </p>
            <div class="story-footer">
              <div>
                <div class="story-author">Signe Dalgaard</div>
                <div class="story-role">Architect, Frederiksberg · Vesterbro Pinion</div>
              </div>
              <span class="serial-tag">#LC-0408</span>
            </div>
          </article>
        </div>
      </div>
    </section>

    <!-- Workshop & FAQ -->
    <section id="workshop">
      <div class="container workshop-grid">
        <div class="workshop-card">
          <div class="eyebrow">Visit the Atelier</div>
          <h2 class="section-title" style="max-width: 100%; font-size: 2rem;">Refshalevej 167B, Copenhagen</h2>
          <p style="color: var(--ink-muted); margin-top: 14px;">
            Our showroom sits right inside our welding bay. Test ride every frame size over harbor cobbles, inspect raw Chromoly tubing, and choose your timber grain in person.
          </p>

          <div class="workshop-details">
            <div>
              <div class="mono" style="color: var(--ink-muted);">Atelier Hours</div>
              <div style="font-weight: 600; margin-top: 4px;">Tue–Fri 10:00–17:30</div>
              <div style="font-size: 0.85rem; color: var(--ink-muted);">Sat 10:00–15:00</div>
            </div>
            <div>
              <div class="mono" style="color: var(--ink-muted);">Direct Workshop</div>
              <div style="font-weight: 600; margin-top: 4px;">atelier@lumencycles.dk</div>
              <div style="font-size: 0.85rem; color: var(--ink-muted);">+45 31 48 92 10</div>
            </div>
          </div>

          <div style="display: flex; gap: 12px; flex-wrap: wrap;">
            <button type="button" class="btn btn-primary" id="workshopRideBtn">Schedule a Test Ride</button>
            <a href="#configurator" class="btn btn-secondary">Build Online</a>
          </div>
        </div>

        <div>
          <div class="eyebrow">Questions</div>
          <h3 style="font-size: 1.55rem; font-weight: 500; margin: 0 0 20px; letter-spacing: -0.02em;">Transparent answers before you commission.</h3>
          <div class="faq-list" id="faqList">
            <div class="faq-item open">
              <button type="button" class="faq-trigger">
                <span>How does the €400 build deposit and payment schedule work?</span>
                <span class="faq-icon">+</span>
              </button>
              <div class="faq-body">
                Reserving a workshop slot locks your frame batch with a €400 refundable deposit. You may adjust paint, box, or drivetrain specs for 14 days while tubing is prepared. The remaining balance is due only when your bike passes final QC inspection before handover or dispatch.
              </div>
            </div>

            <div class="faq-item">
              <button type="button" class="faq-trigger">
                <span>Do you ship outside Denmark?</span>
                <span class="faq-icon">+</span>
              </button>
              <div class="faq-body">
                Yes. We ship fully assembled bikes in reusable wooden crates across the EU, UK, and Norway (€195 flat rate). You unbolt four crate latches, straighten the handlebar with an included 5 mm hex key, and ride immediately.
              </div>
            </div>

            <div class="faq-item">
              <button type="button" class="faq-trigger">
                <span>Can any local bike shop service a Lumen cargo bike?</span>
                <span class="faq-icon">+</span>
              </button>
              <div class="faq-body">
                Yes—this is a core design principle. Bosch Cargo Line, Shimano EP8, Magura brakes, Gates belts, and Rohloff hubs are standard European workshop components. Any certified Bosch/Shimano dealer can run diagnostics and routine maintenance.
              </div>
            </div>

            <div class="faq-item">
              <button type="button" class="faq-trigger">
                <span>Are B2B commercial leases or Danish Erhvervscykel schemes supported?</span>
                <span class="faq-icon">+</span>
              </button>
              <div class="faq-body">
                Yes. We issue VAT-compliant invoices for companies, architectural studios, and Danish municipal cargo grants, and offer custom frame decals and lockable aluminum boxes for fleets of 2+ bikes.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- Footer -->
  <footer class="site-footer">
    <div class="container">
      <div class="footer-grid">
        <div>
          <div class="footer-brand">Lumen Cycles ApS</div>
          <p class="footer-muted">
            Bespoke steel cargo bicycles designed, brazed, and assembled in Refshaleøen, Copenhagen. Built to outlast three cars.
          </p>
          <div class="mono" style="color: #8f8c82; margin-top: 18px;">55.6934° N, 12.6131° E · CVR 41892034</div>
        </div>
        <div class="footer-col">
          <h4>Atelier</h4>
          <div class="footer-links">
            <a href="#engineering">4130 Engineering</a>
            <a href="#configurator">Custom Configurator</a>
            <a href="#craft">Timber &amp; Steel</a>
            <a href="#owners">Owner Stories</a>
          </div>
        </div>
        <div class="footer-col">
          <h4>Support</h4>
          <div class="footer-links">
            <a href="#workshop">Book Test Ride</a>
            <a href="#workshop">Lifetime Frame Warranty</a>
            <a href="#workshop">EU Crate Shipping</a>
            <a href="#workshop">Fleet &amp; B2B Orders</a>
          </div>
        </div>
        <div class="footer-col">
          <h4>Workshop</h4>
          <div class="footer-links">
            <span>Refshalevej 167B</span>
            <span>1432 København K</span>
            <span>atelier@lumencycles.dk</span>
            <span>+45 31 48 92 10</span>
          </div>
        </div>
      </div>

      <div class="footer-bottom">
        <span>© 2025 Lumen Cycles ApS. Hand-built in Denmark.</span>
        <span class="mono">Batch 14 Allocation Open</span>
      </div>
    </div>
  </footer>

  <!-- Reservation / Test Ride Modal -->
  <div class="modal-backdrop" id="actionModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
    <div class="modal-dialog">
      <button type="button" class="modal-close" id="modalCloseBtn" aria-label="Close modal">×</button>
      <div class="eyebrow" id="modalEyebrow">Workshop Allocation</div>
      <h3 id="modalTitle" style="font-size: 1.5rem; margin: 0 0 8px; font-weight: 500;">Reserve Your Build Slot</h3>
      <p id="modalSubtitle" style="color: var(--ink-muted); font-size: 0.92rem; margin: 0;">
        Lock your frame serial number in Batch 14. No payment is taken on this page—our master builder will send your official specification sheet and invoice within 24 hours.
      </p>

      <div class="build-receipt" id="modalReceipt"></div>

      <form id="modalForm" class="form-grid">
        <div class="form-field">
          <label for="custName">Full Name</label>
          <input id="custName" type="text" required placeholder="Søren Kierkegaard" />
        </div>
        <div class="form-field">
          <label for="custEmail">Email Address</label>
          <input id="custEmail" type="email" required placeholder="name@example.dk" />
        </div>
        <div class="form-field" id="rideDateField" style="display: none;">
          <label for="rideDate">Preferred Atelier Visit</label>
          <select id="rideDate">
            <option>Thursday · 11:00 (Morning Slot)</option>
            <option>Friday · 15:30 (Afternoon Slot)</option>
            <option>Saturday · 11:30 (Weekend Slot)</option>
          </select>
        </div>
        <div class="form-field">
          <label for="custNotes">Rider Height &amp; Fitting Notes (Optional)</label>
          <textarea id="custNotes" rows="2" placeholder="e.g., Primary riders 172 cm and 186 cm, shipping to Aarhus..."></textarea>
        </div>
        <button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 6px;" id="modalSubmitBtn">
          Request Build Sheet &amp; Slot
        </button>
      </form>

      <div id="modalConfirmation" style="display: none; padding-top: 12px;">
        <div style="background: #eef4f0; border: 1px solid #b8d1c1; padding: 18px; border-radius: 6px;">
          <div class="mono" style="color: var(--accent); margin-bottom: 6px;">Confirmed · Ref <span id="confirmRef"></span></div>
          <p style="margin: 0; font-size: 0.94rem;">
            Thank you. Mikkel &amp; the Refshaleøen team have logged your request and will email your CAD build sheet shortly.
          </p>
        </div>
      </div>
    </div>
  </div>

  <script>
    (function () {
      // Mobile nav toggle
      const navToggle = document.getElementById("navToggle");
      const primaryNav = document.getElementById("primaryNav");
      navToggle.addEventListener("click", () => {
        primaryNav.classList.toggle("mobile-open");
      });
      primaryNav.querySelectorAll("a").forEach((link) => {
        link.addEventListener("click", () => primaryNav.classList.remove("mobile-open"));
      });

      // Engineering Hotspot Anatomy Data
      const anatomyData = {
        steering: {
          tag: "01 / Precision Rod Steering",
          title: "Sealed-bearing linkage with zero speed wobble",
          desc: "Instead of cable systems that stretch in winter, we machine a stainless-steel pushrod riding on oversized Japanese SKF ball joints. Steering feels crisp and predictable at 5 km/h with two kids aboard or at 30 km/h empty.",
          specs: [
            ["Joint Hardware", "SKF Sealed Spherical"],
            ["Turning Radius", "2.3 m (Tight Alley)"],
            ["Service Interval", "5 Years / 15,000 km"]
          ]
        },
        frame: {
          tag: "02 / 4130 Chromoly Spine",
          title: "Triple-butted steel brazed in a single harbor jig",
          desc: "Every main tube is CNC-mitred and fillet-brazed by hand for clean load paths. A dual-rail lower cargo cradle prevents torsional flex even when braking hard downhill with 100 kg on board.",
          specs: [
            ["Tubing Grade", "4130 Chromoly Steel"],
            ["Corrosion Shield", "Zinc Coat + Cavity Wax"],
            ["Frame Warranty", "Lifetime Structural"]
          ]
        },
        drivetrain: {
          tag: "03 / Sealed Belt & Gear Hub",
          title: "Silent Gates Carbon Belt with internal planetary gears",
          desc: "Exposed derailleurs hate road salt. Our sliding rear dropouts tension a Gates CDX carbon belt rated for 30,000 km, paired with either Enviolo stepless shifting or a German Rohloff 14-speed hub.",
          specs: [
            ["Belt Spec", "Gates CDX Carbon"],
            ["Lubrication Required", "Zero (Water Rinse Only)"],
            ["Hub Options", "Enviolo / Rohloff / Pinion"]
          ]
        },
        brakes: {
          tag: "04 / Stopping Authority",
          title: "Magura 4-piston cargo calipers & 203 mm rotors",
          desc: "Loaded cargo bikes demand motorcycle-grade stopping power. We fit oversized 203 mm vented steel rotors with four-piston hydraulic calipers and mineral oil lines that stay responsive below -15°C.",
          specs: [
            ["Calipers", "Magura MT5 4-Piston"],
            ["Rotor Diameter", "203 mm Front / 180 mm Rear"],
            ["Brake Fluid", "Mineral Oil (All-Season)"]
          ]
        },
        stand: {
          tag: "05 / Tip-Free Loading",
          title: "Balanced twin-leg kickstand with silent elastomer stops",
          desc: "Our wide-stance tubular stand deploys with a light toe tap and lifts the front wheel clean off the cobblestones, letting children climb in and out without tilting the frame.",
          specs: [
            ["Static Load Rating", "180 kg Unattended"],
            ["Pivot Bearings", "Stainless Bronze Bushings"],
            ["Foot Pads", "Replaceable High-Grip Rubber"]
          ]
        }
      };

      const specTabs = document.querySelectorAll("#specTabs .spec-tab");
      const hotspotPins = document.querySelectorAll("#hotspotContainer .hotspot-pin");
      const anatomyDetail = document.getElementById("anatomyDetail");
      const anatomySpecsList = document.getElementById("anatomySpecsList");

      function selectAnatomy(key) {
        const item = anatomyData[key];
        if (!item) return;

        specTabs.forEach((btn) => btn.classList.toggle("active", btn.dataset.spec === key));
        hotspotPins.forEach((pin) => pin.classList.toggle("active", pin.dataset.spec === key));

        anatomyDetail.innerHTML = `
          <div class="mono" style="color: var(--copper); margin-bottom: 8px;">${item.tag}</div>
          <h3>${item.title}</h3>
          <p>${item.desc}</p>
        `;
        anatomySpecsList.innerHTML = item.specs
          .map((row) => `<div class="anatomy-spec-row"><span>${row[0]}</span><span>${row[1]}</span></div>`)
          .join("");
      }

      specTabs.forEach((btn) => btn.addEventListener("click", () => selectAnatomy(btn.dataset.spec)));
      hotspotPins.forEach((pin) => pin.addEventListener("click", () => selectAnatomy(pin.dataset.spec)));

      // Interactive Bike Configurator State
      const config = {
        platform: "atelier",
        platformName: "Atelier Long-John",
        platformPrice: 4150,
        platformWeight: 34.0,
        color: "#1d362b",
        colorName: "Nordic Pine",
        colorPrice: 0,
        box: "oak",
        boxName: "FSC Smoked Oak",
        boxPrice: 240,
        boxWeight: 4.8,
        drive: "bosch",
        driveName: "Bosch + Enviolo",
        drivePrice: 0,
        driveWeight: 0,
        addons: []
      };

      const svgFrameGroup = document.getElementById("svgFrameGroup");
      const svgCargoGroup = document.getElementById("svgCargoGroup");
      const svgCanopyGroup = document.getElementById("svgCanopyGroup");
      const svgMotorHousing = document.getElementById("svgMotorHousing");
      const svgSaddle = document.getElementById("svgSaddle");
      const svgGrip = document.getElementById("svgGrip");

      function renderCargoSvg() {
        let html = "";
        if (config.box === "oak") {
          html = `
            <polygon points="222,226 436,214 432,312 246,312" fill="#8b5f36" stroke="#4c3119" stroke-width="2"/>
            <line x1="230" y1="254" x2="434" y2="246" stroke="#5a3b1f" stroke-width="1.4" opacity="0.8"/>
            <line x1="238" y1="282" x2="433" y2="278" stroke="#5a3b1f" stroke-width="1.4" opacity="0.8"/>
            <rect x="424" y="216" width="10" height="16" fill="#9a7d4a" rx="1"/>
            <rect x="223" y="226" width="10" height="14" fill="#9a7d4a" rx="1"/>
          `;
        } else if (config.box === "birch") {
          html = `
            <polygon points="222,226 436,214 432,312 246,312" fill="#dcc6a2" stroke="#857253" stroke-width="2"/>
            <line x1="230" y1="254" x2="434" y2="246" stroke="#aa9574" stroke-width="1.2"/>
            <line x1="238" y1="282" x2="433" y2="278" stroke="#aa9574" stroke-width="1.2"/>
            <rect x="424" y="216" width="10" height="16" fill="#5e5a52" rx="1"/>
            <rect x="223" y="226" width="10" height="14" fill="#5e5a52" rx="1"/>
          `;
        } else {
          // Alloy Flatbed
          html = `
            <rect x="226" y="294" width="210" height="16" rx="2" fill="#7c8285" stroke="#3c4042" stroke-width="2"/>
            <polyline points="234,294 234,264 430,264 430,294" fill="none" stroke="#4d5255" stroke-width="4" stroke-linejoin="round"/>
            <line x1="280" y1="264" x2="280" y2="294" stroke="#4d5255" stroke-width="2.5"/>
            <line x1="382" y1="264" x2="382" y2="294" stroke="#4d5255" stroke-width="2.5"/>
          `;
        }
        svgCargoGroup.innerHTML = html;
      }

      function updateConfigurator() {
        // Update SVG Frame color
        svgFrameGroup.setAttribute("stroke", config.color);

        // Update cargo box visual
        renderCargoSvg();

        // Update motor housing size for mechanical Pinion vs E-assist
        if (config.drive === "pinion") {
          svgMotorHousing.setAttribute("r", "15");
          svgMotorHousing.setAttribute("fill", "#6c7175");
        } else {
          svgMotorHousing.setAttribute("r", "22");
          svgMotorHousing.setAttribute("fill", "#2c2f2b");
        }

        // Update addons visuals
        const hasCanopy = config.addons.some((a) => a.id === "canopy");
        const hasBrooks = config.addons.some((a) => a.id === "brooks");
        svgCanopyGroup.style.display = hasCanopy ? "block" : "none";

        const leatherColor = hasBrooks ? "#704221" : "#262825";
        svgSaddle.setAttribute("fill", leatherColor);
        svgGrip.setAttribute("fill", leatherColor);

        // Compute totals
        const addonPrice = config.addons.reduce((acc, a) => acc + a.price, 0);
        const addonWeight = config.addons.reduce((acc, a) => acc + a.weight, 0);

        const totalEur = config.platformPrice + config.colorPrice + config.boxPrice + config.drivePrice + addonPrice;
        const totalKg = Math.max(20, config.platformWeight + config.boxWeight + config.driveWeight + addonWeight);

        document.getElementById("cfgModelBadge").textContent = config.platformName;
        document.getElementById("sumFinish").textContent = config.colorName;
        document.getElementById("sumWeight").textContent = totalKg.toFixed(1) + " kg";
        document.getElementById("sumDrive").textContent = config.driveName;
        document.getElementById("totalPrice").textContent = "€" + totalEur.toLocaleString("en-IE");
      }

      // Bind Platform Buttons
      document.querySelectorAll("#platformOptions .option-card").forEach((btn) => {
        btn.addEventListener("click", () => {
          document.querySelectorAll("#platformOptions .option-card").forEach((b) => b.classList.remove("selected"));
          btn.classList.add("selected");
          config.platform = btn.dataset.platform;
          config.platformName = btn.dataset.name;
          config.platformPrice = Number(btn.dataset.price);
          config.platformWeight = Number(btn.dataset.weight);
          updateConfigurator();
        });
      });

      // Bind Color Swatches
      document.querySelectorAll("#colorOptions .swatch-btn").forEach((btn) => {
        btn.addEventListener("click", () => {
          document.querySelectorAll("#colorOptions .swatch-btn").forEach((b) => b.classList.remove("selected"));
          btn.classList.add("selected");
          config.color = btn.dataset.color;
          config.colorName = btn.dataset.cname;
          config.colorPrice = Number(btn.dataset.price);
          updateConfigurator();
        });
      });

      // Bind Box Options
      document.querySelectorAll("#boxOptions .option-card").forEach((btn) => {
        btn.addEventListener("click", () => {
          document.querySelectorAll("#boxOptions .option-card").forEach((b) => b.classList.remove("selected"));
          btn.classList.add("selected");
          config.box = btn.dataset.box;
          config.boxName = btn.dataset.bname;
          config.boxPrice = Number(btn.dataset.price);
          config.boxWeight = Number(btn.dataset.weight);
          updateConfigurator();
        });
      });

      // Bind Drive Options
      document.querySelectorAll("#driveOptions .option-card").forEach((btn) => {
        btn.addEventListener("click", () => {
          document.querySelectorAll("#driveOptions .option-card").forEach((b) => b.classList.remove("selected"));
          btn.classList.add("selected");
          config.drive = btn.dataset.drive;
          config.driveName = btn.dataset.dname;
          config.drivePrice = Number(btn.dataset.price);
          config.driveWeight = Number(btn.dataset.weight);
          updateConfigurator();
        });
      });

      // Bind Addon Checkboxes
      document.querySelectorAll("#addonOptions input[type='checkbox']").forEach((chk) => {
        chk.addEventListener("change", () => {
          const checked = Array.from(document.querySelectorAll("#addonOptions input[type='checkbox']:checked"));
          config.addons = checked.map((el) => ({
            id: el.dataset.addon,
            price: Number(el.dataset.price),
            weight: Number(el.dataset.weight)
          }));
          updateConfigurator();
        });
      });

      updateConfigurator();

      // FAQ Accordion
      document.querySelectorAll("#faqList .faq-trigger").forEach((trigger) => {
        trigger.addEventListener("click", () => {
          const item = trigger.parentElement;
          const isOpen = item.classList.contains("open");
          document.querySelectorAll("#faqList .faq-item").forEach((i) => i.classList.remove("open"));
          if (!isOpen) item.classList.add("open");
        });
      });

      // Modal Handling (Reserve Build vs Book Test Ride)
      const modal = document.getElementById("actionModal");
      const modalCloseBtn = document.getElementById("modalCloseBtn");
      const modalEyebrow = document.getElementById("modalEyebrow");
      const modalTitle = document.getElementById("modalTitle");
      const modalSubtitle = document.getElementById("modalSubtitle");
      const modalReceipt = document.getElementById("modalReceipt");
      const rideDateField = document.getElementById("rideDateField");
      const modalForm = document.getElementById("modalForm");
      const modalSubmitBtn = document.getElementById("modalSubmitBtn");
      const modalConfirmation = document.getElementById("modalConfirmation");
      const confirmRef = document.getElementById("confirmRef");

      function openModal(mode) {
        modalForm.style.display = "grid";
        modalConfirmation.style.display = "none";
        modalForm.reset();

        if (mode === "ride") {
          modalEyebrow.textContent = "Refshaleøen Showroom";
          modalTitle.textContent = "Book a Harbor Test Ride";
          modalSubtitle.textContent = "Ride our demo bikes across cobbles and harbor hills with one of our frame builders.";
          modalReceipt.style.display = "none";
          rideDateField.style.display = "block";
          modalSubmitBtn.textContent = "Confirm Atelier Visit";
        } else {
          const totalText = document.getElementById("totalPrice").textContent;
          const addonsText = config.addons.length
            ? config.addons.map((a) => a.id).join(", ")
            : "None";

          modalEyebrow.textContent = "Batch 14 Build Allocation";
          modalTitle.textContent = "Reserve Your Build Slot";
          modalSubtitle.textContent = "No payment is charged here. Our master builder will email your CAD build sheet and €400 deposit invoice within 24 hours.";
          rideDateField.style.display = "none";
          modalReceipt.style.display = "block";
          modalReceipt.innerHTML = `
            <div class="mono" style="margin-bottom: 8px; color: var(--copper);">Current Specification</div>
            <div><strong>Model:</strong> ${config.platformName}</div>
            <div><strong>Finish:</strong> ${config.colorName}</div>
            <div><strong>Cargo Bay:</strong> ${config.boxName}</div>
            <div><strong>Drivetrain:</strong> ${config.driveName}</div>
            <div><strong>Additions:</strong> ${addonsText}</div>
            <div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-weight: 600;">
              Estimated Build Total: ${totalText} (incl. VAT)
            </div>
          `;
          modalSubmitBtn.textContent = "Request Build Sheet & Slot";
        }
        modal.classList.add("open");
      }

      document.getElementById("reserveBuildBtn").addEventListener("click", () => openModal("build"));
      document.getElementById("openTestRideBtn").addEventListener("click", () => openModal("ride"));
      document.getElementById("workshopRideBtn").addEventListener("click", () => openModal("ride"));

      modalCloseBtn.addEventListener("click", () => modal.classList.remove("open"));
      modal.addEventListener("click", (e) => {
        if (e.target === modal) modal.classList.remove("open");
      });

      modalForm.addEventListener("submit", (e) => {
        e.preventDefault();
        const randomCode = "LC-" + Math.floor(460 + Math.random() * 520);
        confirmRef.textContent = randomCode;
        modalForm.style.display = "none";
        modalConfirmation.style.display = "block";
      });
    })();
  </script>
</body>
</html>

Compare with

Gemini 4 Hydrogen: other attempts