hypeorcode
Network offOpen alone (new tab)

Run details

Model
minimax/minimax-m3.1-flash:free
Route
OpenRouter API, one user message
Reasoning
provider default, 15,567 reasoning tokens
Limits
60 min · 524,288 output tokens
Date
21 Oct 2026
Time
6 min 26 s
Size
122 kB
Tokens
288 in, 50,669 out
List price
free (list price $0)
Paid
$0 (free route)

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

122 kB 4,343 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#173b31">
  <meta name="description" content="Lumen Cycles builds made-to-order cargo bikes in Copenhagen. Custom frames, considered components and a fit built around your life.">
  <title>Lumen Cycles — Custom cargo bikes, built in Copenhagen</title>
  <script>document.documentElement.classList.add('js')</script>
  <style>
    :root {
      --ink: #17241f;
      --ink-soft: #34453e;
      --muted: #6a7771;
      --paper: #f4f0e7;
      --paper-deep: #e9e3d6;
      --white: #fffdf8;
      --forest: #173b31;
      --forest-dark: #102c25;
      --forest-light: #2c5548;
      --accent: #c85e3d;
      --accent-dark: #9f4129;
      --gold: #e4b65c;
      --sage: #a9b9ae;
      --line: rgba(23, 36, 31, 0.14);
      --line-light: rgba(255, 253, 248, 0.18);
      --shadow: 0 24px 70px rgba(16, 44, 37, 0.14);
      --radius-lg: 32px;
      --radius-md: 22px;
      --radius-sm: 14px;
      --font-sans: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
      --font-serif: Georgia, "Times New Roman", serif;
    }

    * {
      box-sizing: border-box;
    }

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

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

    body.menu-open {
      overflow: hidden;
    }

    button,
    input,
    textarea,
    select {
      font: inherit;
    }

    button,
    a {
      -webkit-tap-highlight-color: transparent;
    }

    button {
      color: inherit;
    }

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

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

    p,
    h1,
    h2,
    h3,
    figure,
    blockquote {
      margin: 0;
    }

    [hidden] {
      display: none !important;
    }

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

    :focus-visible {
      outline: 3px solid var(--gold);
      outline-offset: 4px;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .skip-link {
      position: fixed;
      z-index: 200;
      top: 12px;
      left: 12px;
      padding: 10px 16px;
      border-radius: 10px;
      color: var(--white);
      background: var(--ink);
      transform: translateY(-160%);
      transition: transform 0.2s ease;
    }

    .skip-link:focus {
      transform: translateY(0);
    }

    .container {
      width: min(100% - 48px, 1320px);
      margin-inline: auto;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--ink-soft);
      font-size: 0.75rem;
      font-weight: 750;
      letter-spacing: 0.14em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .eyebrow::before {
      width: 24px;
      height: 2px;
      content: "";
      background: var(--accent);
    }

    .eyebrow--light {
      color: rgba(255, 253, 248, 0.68);
    }

    .eyebrow--light::before {
      background: var(--gold);
    }

    .section-title {
      max-width: 780px;
      font-size: clamp(2.8rem, 5.5vw, 5.5rem);
      font-weight: 610;
      letter-spacing: -0.065em;
      line-height: 0.98;
    }

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

    .section-intro {
      max-width: 580px;
      color: var(--muted);
      font-size: 1.08rem;
      line-height: 1.75;
    }

    .btn {
      display: inline-flex;
      min-height: 52px;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 0 22px;
      border: 1px solid transparent;
      border-radius: 999px;
      cursor: pointer;
      font-size: 0.88rem;
      font-weight: 750;
      letter-spacing: 0.015em;
      line-height: 1;
      transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn svg {
      width: 17px;
      height: 17px;
      transition: transform 0.2s ease;
    }

    .btn:hover svg {
      transform: translateX(3px);
    }

    .btn-accent {
      color: var(--ink);
      background: var(--accent);
      box-shadow: 0 10px 26px rgba(200, 94, 61, 0.23);
    }

    .btn-accent:hover {
      background: #d56a49;
      box-shadow: 0 14px 30px rgba(200, 94, 61, 0.29);
    }

    .btn-dark {
      color: var(--white);
      background: var(--ink);
    }

    .btn-dark:hover {
      background: var(--forest);
    }

    .btn-light {
      color: var(--ink);
      background: var(--white);
    }

    .btn-light:hover {
      background: var(--paper);
    }

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

    .btn-outline:hover {
      border-color: var(--ink);
      background: rgba(255, 255, 255, 0.42);
    }

    .btn-outline-light {
      color: var(--white);
      border-color: var(--line-light);
      background: transparent;
    }

    .btn-outline-light:hover {
      color: var(--ink);
      border-color: var(--white);
      background: var(--white);
    }

    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid currentColor;
      padding-bottom: 3px;
      font-size: 0.88rem;
      font-weight: 750;
    }

    .text-link svg {
      width: 16px;
      height: 16px;
      transition: transform 0.2s ease;
    }

    .text-link:hover svg {
      transform: translateX(3px);
    }

    .announcement {
      position: relative;
      z-index: 60;
      color: rgba(255, 253, 248, 0.84);
      background: var(--ink);
      font-size: 0.75rem;
      font-weight: 650;
      letter-spacing: 0.055em;
    }

    .announcement .container {
      display: flex;
      min-height: 36px;
      align-items: center;
      justify-content: center;
      gap: 18px;
    }

    .announcement a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--gold);
      font-weight: 750;
    }

    .announcement a:hover {
      color: var(--white);
    }

    .announcement svg {
      width: 13px;
      height: 13px;
    }

    .site-header {
      position: sticky;
      z-index: 50;
      top: 0;
      border-bottom: 1px solid transparent;
      background: rgba(244, 240, 231, 0.88);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .site-header.scrolled {
      border-color: var(--line);
      box-shadow: 0 8px 30px rgba(23, 36, 31, 0.06);
    }

    .nav-shell {
      display: grid;
      min-height: 78px;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 30px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      justify-self: start;
      gap: 11px;
    }

    .brand-mark {
      width: 35px;
      height: 35px;
    }

    .brand-type {
      display: flex;
      flex-direction: column;
      line-height: 1;
    }

    .brand-type strong {
      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: 0.18em;
    }

    .brand-type small {
      margin-top: 5px;
      color: var(--muted);
      font-size: 0.52rem;
      font-weight: 750;
      letter-spacing: 0.24em;
    }

    .nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(22px, 3vw, 42px);
    }

    .nav-links a {
      position: relative;
      color: var(--ink-soft);
      font-size: 0.82rem;
      font-weight: 680;
    }

    .nav-links a::after {
      position: absolute;
      right: 0;
      bottom: -7px;
      left: 0;
      height: 1px;
      content: "";
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.25s ease;
    }

    .nav-links a:hover::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      justify-self: end;
    }

    .nav-actions .btn {
      min-height: 44px;
      padding-inline: 19px;
    }

    .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: transparent;
      cursor: pointer;
    }

    .menu-toggle span,
    .menu-toggle span::before,
    .menu-toggle span::after {
      display: block;
      width: 18px;
      height: 1.5px;
      background: var(--ink);
      content: "";
      transition: transform 0.2s ease;
    }

    .menu-toggle span {
      position: relative;
    }

    .menu-toggle span::before {
      position: absolute;
      top: -6px;
    }

    .menu-toggle span::after {
      position: absolute;
      top: 6px;
    }

    .menu-toggle[aria-expanded="true"] span {
      background: transparent;
    }

    .menu-toggle[aria-expanded="true"] span::before {
      top: 0;
      transform: rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] span::after {
      top: 0;
      transform: rotate(-45deg);
    }

    .mobile-menu {
      display: none;
    }

    .hero {
      position: relative;
      padding: 58px 0 98px;
      overflow: hidden;
    }

    .hero::before {
      position: absolute;
      top: 18%;
      left: -180px;
      width: 430px;
      height: 430px;
      border: 1px solid rgba(23, 36, 31, 0.08);
      border-radius: 50%;
      content: "";
      pointer-events: none;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.88fr) minmax(570px, 1.12fr);
      align-items: center;
      gap: clamp(40px, 6vw, 90px);
    }

    .hero-copy {
      position: relative;
      z-index: 2;
      padding: 40px 0;
    }

    .hero-title {
      max-width: 690px;
      margin: 25px 0 27px;
      font-size: clamp(4rem, 7.4vw, 7.15rem);
      font-weight: 610;
      letter-spacing: -0.075em;
      line-height: 0.87;
    }

    .hero-title em {
      display: block;
      color: var(--accent);
      font-family: var(--font-serif);
      font-weight: 400;
      letter-spacing: -0.055em;
    }

    .hero-lead {
      max-width: 575px;
      color: var(--ink-soft);
      font-size: clamp(1.05rem, 1.4vw, 1.22rem);
      line-height: 1.7;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 25px;
      margin-top: 34px;
    }

    .hero-assurances {
      display: grid;
      max-width: 600px;
      grid-template-columns: repeat(3, 1fr);
      margin-top: 42px;
      border-top: 1px solid var(--line);
    }

    .hero-assurance {
      padding: 20px 22px 0 0;
    }

    .hero-assurance + .hero-assurance {
      padding-left: 22px;
      border-left: 1px solid var(--line);
    }

    .hero-assurance strong {
      display: block;
      margin-bottom: 2px;
      font-size: 0.9rem;
    }

    .hero-assurance span {
      color: var(--muted);
      font-size: 0.74rem;
    }

    .hero-visual {
      position: relative;
    }

    .bike-stage {
      --bike-frame: #315848;
      position: relative;
      min-height: 625px;
      overflow: hidden;
      border-radius: var(--radius-lg);
      background:
        radial-gradient(circle at 78% 18%, rgba(228, 182, 92, 0.19), transparent 27%),
        linear-gradient(145deg, #1e493c 0%, var(--forest-dark) 100%);
      box-shadow: var(--shadow);
      isolation: isolate;
    }

    .bike-stage::before {
      position: absolute;
      z-index: -1;
      inset: 0;
      content: "";
      opacity: 0.14;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px);
      background-size: 58px 58px;
      mask-image: linear-gradient(to bottom, black, transparent 74%);
      -webkit-mask-image: linear-gradient(to bottom, black, transparent 74%);
    }

    .bike-stage::after {
      position: absolute;
      z-index: 0;
      right: 12%;
      bottom: 10%;
      width: 65%;
      height: 11%;
      border-radius: 50%;
      content: "";
      background: rgba(0, 0, 0, 0.32);
      filter: blur(18px);
      transform: perspective(200px) rotateX(65deg);
    }

    .stage-top {
      position: absolute;
      z-index: 3;
      top: 30px;
      right: 30px;
      left: 30px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      color: var(--white);
    }

    .stage-kicker {
      display: block;
      margin-bottom: 7px;
      color: rgba(255, 253, 248, 0.58);
      font-size: 0.65rem;
      font-weight: 750;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    .stage-model {
      display: block;
      font-size: clamp(1.35rem, 2.2vw, 2rem);
      font-weight: 580;
      letter-spacing: -0.045em;
      line-height: 1;
    }

    .stage-sub {
      display: block;
      margin-top: 8px;
      color: rgba(255, 253, 248, 0.66);
      font-size: 0.72rem;
    }

    .stage-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 999px;
      color: rgba(255, 253, 248, 0.8);
      background: rgba(255, 255, 255, 0.07);
      font-size: 0.61rem;
      font-weight: 750;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      backdrop-filter: blur(8px);
    }

    .stage-badge::before {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      content: "";
      background: var(--gold);
      box-shadow: 0 0 0 4px rgba(228, 182, 92, 0.13);
    }

    .stage-load {
      position: absolute;
      z-index: 3;
      top: 115px;
      right: 28px;
      width: 118px;
      padding: 14px 15px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 15px;
      color: var(--white);
      background: rgba(8, 27, 22, 0.25);
      backdrop-filter: blur(8px);
    }

    .stage-load span {
      display: block;
      color: rgba(255, 255, 248, 0.56);
      font-size: 0.61rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .stage-load strong {
      display: block;
      margin-top: 3px;
      font-size: 1.25rem;
      font-weight: 600;
      letter-spacing: -0.04em;
    }

    .bike-illustration {
      position: absolute;
      z-index: 1;
      right: -3%;
      bottom: 44px;
      width: 106%;
      max-width: none;
      height: auto;
      filter: drop-shadow(0 24px 24px rgba(0, 0, 0, 0.19));
    }

    .bike-frame {
      fill: none;
      stroke: var(--bike-frame);
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .bike-frame-fill {
      fill: var(--bike-frame);
    }

    .stage-foot {
      position: absolute;
      z-index: 3;
      right: 30px;
      bottom: 26px;
      left: 30px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      color: rgba(255, 253, 248, 0.62);
      font-size: 0.64rem;
      font-weight: 650;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .stage-foot span:last-child {
      color: var(--gold);
    }

    .hero-controls {
      position: relative;
      z-index: 5;
      display: flex;
      min-height: 86px;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin: -27px 26px 0;
      padding: 17px 20px 17px 24px;
      border: 1px solid rgba(23, 36, 31, 0.1);
      border-radius: 18px;
      background: rgba(255, 253, 248, 0.96);
      box-shadow: 0 16px 45px rgba(16, 44, 37, 0.14);
      backdrop-filter: blur(12px);
    }

    .finish-info {
      min-width: 140px;
    }

    .finish-info span {
      display: block;
      margin-bottom: 3px;
      color: var(--muted);
      font-size: 0.62rem;
      font-weight: 750;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .finish-info strong {
      font-size: 0.92rem;
      font-weight: 720;
    }

    .swatches {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .swatch {
      position: relative;
      width: 31px;
      height: 31px;
      padding: 0;
      border: 2px solid var(--white);
      border-radius: 50%;
      outline: 1px solid var(--line);
      background: var(--swatch);
      cursor: pointer;
      transition: transform 0.18s ease, outline-color 0.18s ease;
    }

    .swatch:hover {
      transform: scale(1.08);
    }

    .swatch[aria-pressed="true"] {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }

    .hero-price {
      text-align: right;
      white-space: nowrap;
    }

    .hero-price span {
      display: block;
      color: var(--muted);
      font-size: 0.62rem;
      font-weight: 750;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .hero-price strong {
      font-size: 1.12rem;
      font-weight: 730;
      letter-spacing: -0.03em;
    }

    .credibility {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: rgba(255, 253, 248, 0.34);
    }

    .credibility-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

    .credibility-item {
      min-height: 112px;
      padding: 25px 28px;
    }

    .credibility-item + .credibility-item {
      border-left: 1px solid var(--line);
    }

    .credibility-item strong {
      display: block;
      margin-bottom: 5px;
      font-size: 0.92rem;
      font-weight: 740;
    }

    .credibility-item span {
      color: var(--muted);
      font-size: 0.75rem;
    }

    .collection {
      padding: 135px 0 150px;
    }

    .collection-intro {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      align-items: end;
      gap: 70px;
      margin-bottom: 66px;
    }

    .collection-intro .section-title {
      margin-top: 24px;
    }

    .collection-intro .section-intro {
      padding-bottom: 5px;
    }

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

    .product-card {
      display: flex;
      min-width: 0;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: rgba(255, 253, 248, 0.7);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .product-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 50px rgba(16, 44, 37, 0.1);
    }

    .product-visual {
      position: relative;
      display: grid;
      min-height: 260px;
      place-items: center;
      overflow: hidden;
      background: #d8dfd7;
    }

    .product-visual--clay {
      background: #e7c7b8;
    }

    .product-visual--dark {
      color: var(--white);
      background: var(--forest);
    }

    .product-visual::before {
      position: absolute;
      width: 230px;
      height: 230px;
      border: 1px solid rgba(23, 36, 31, 0.09);
      border-radius: 50%;
      content: "";
    }

    .product-visual--dark::before {
      border-color: rgba(255, 255, 255, 0.11);
    }

    .product-visual svg {
      position: relative;
      z-index: 1;
      width: 92%;
      max-width: 390px;
      filter: drop-shadow(0 18px 15px rgba(23, 36, 31, 0.15));
    }

    .visual-index {
      position: absolute;
      z-index: 2;
      top: 18px;
      left: 19px;
      font-size: 0.64rem;
      font-weight: 750;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .product-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 27px 25px 24px;
    }

    .product-meta {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
    }

    .product-meta h3 {
      font-size: 1.5rem;
      font-weight: 650;
      letter-spacing: -0.045em;
      line-height: 1.1;
    }

    .product-meta span {
      color: var(--muted);
      font-size: 0.75rem;
      font-weight: 700;
    }

    .product-body > p {
      margin: 16px 0 22px;
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.65;
    }

    .product-specs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 26px;
    }

    .product-specs span {
      padding: 6px 9px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--ink-soft);
      font-size: 0.66rem;
      font-weight: 650;
    }

    .product-action {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: auto;
      padding-top: 20px;
      border-top: 1px solid var(--line);
    }

    .product-action strong {
      font-size: 1rem;
      font-weight: 730;
    }

    .product-action button {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      font-size: 0.75rem;
      font-weight: 750;
    }

    .product-action button svg {
      width: 15px;
      height: 15px;
    }

    .brief-card {
      position: relative;
      display: flex;
      min-height: 100%;
      flex-direction: column;
      justify-content: space-between;
      padding: 30px;
      overflow: hidden;
      color: var(--white);
      background: var(--accent);
    }

    .brief-card::after {
      position: absolute;
      right: -90px;
      bottom: -95px;
      width: 280px;
      height: 280px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      content: "";
    }

    .brief-card .eyebrow {
      color: rgba(255, 255, 255, 0.72);
    }

    .brief-card .eyebrow::before {
      background: var(--white);
    }

    .brief-card h3 {
      max-width: 330px;
      margin: 58px 0 17px;
      font-size: clamp(2rem, 3vw, 3.2rem);
      font-weight: 600;
      letter-spacing: -0.06em;
      line-height: 1;
    }

    .brief-card p {
      max-width: 310px;
      color: rgba(255, 255, 255, 0.78);
      font-size: 0.9rem;
    }

    .brief-card .btn {
      position: relative;
      z-index: 2;
      align-self: flex-start;
      margin-top: 34px;
    }

    .configurator {
      position: relative;
      padding: 130px 0;
      overflow: hidden;
      color: var(--white);
      background: var(--forest-dark);
    }

    .configurator::before {
      position: absolute;
      top: -270px;
      left: -230px;
      width: 620px;
      height: 620px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 50%;
      content: "";
    }

    .configurator::after {
      position: absolute;
      right: -150px;
      bottom: -240px;
      width: 520px;
      height: 520px;
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 50%;
      content: "";
    }

    .config-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 0.78fr 1.22fr;
      align-items: start;
      gap: clamp(50px, 7vw, 110px);
    }

    .config-copy {
      position: sticky;
      top: 120px;
    }

    .config-copy .section-title {
      margin: 24px 0 27px;
    }

    .config-copy .section-title em {
      color: var(--gold);
    }

    .config-copy > p {
      max-width: 470px;
      color: rgba(255, 253, 248, 0.64);
      line-height: 1.75;
    }

    .config-steps {
      display: grid;
      gap: 0;
      margin-top: 48px;
    }

    .config-step {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 14px;
      padding: 19px 0;
      border-top: 1px solid var(--line-light);
    }

    .config-step span {
      color: var(--gold);
      font-size: 0.68rem;
      font-weight: 750;
      letter-spacing: 0.08em;
    }

    .config-step strong {
      display: block;
      margin-bottom: 3px;
      font-size: 0.9rem;
    }

    .config-step p {
      color: rgba(255, 253, 248, 0.55);
      font-size: 0.77rem;
      line-height: 1.55;
    }

    .config-panel {
      overflow: hidden;
      border-radius: 28px;
      color: var(--ink);
      background: var(--white);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.24);
    }

    .config-panel-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 30px;
      padding: 30px 32px 25px;
      border-bottom: 1px solid var(--line);
    }

    .config-panel-header h3 {
      font-size: 1.25rem;
      font-weight: 680;
      letter-spacing: -0.035em;
    }

    .config-panel-header p {
      margin-top: 5px;
      color: var(--muted);
      font-size: 0.76rem;
    }

    .config-code {
      padding: 7px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      font-size: 0.6rem;
      font-weight: 750;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .config-panel-body {
      padding: 28px 32px 32px;
    }

    .config-group + .config-group {
      margin-top: 34px;
      padding-top: 31px;
      border-top: 1px solid var(--line);
    }

    .config-group legend,
    .config-group-title {
      display: block;
      width: 100%;
      margin-bottom: 15px;
      padding: 0;
      font-size: 0.72rem;
      font-weight: 780;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .config-group-title small {
      float: right;
      color: var(--muted);
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0;
      text-transform: none;
    }

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

    .variant-option {
      position: relative;
      cursor: pointer;
    }

    .variant-option input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
    }

    .variant-body {
      display: flex;
      min-height: 112px;
      flex-direction: column;
      justify-content: space-between;
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--paper);
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .variant-option input:checked + .variant-body {
      border-color: var(--forest);
      background: #eef1eb;
      box-shadow: inset 0 0 0 1px var(--forest);
    }

    .variant-option input:focus-visible + .variant-body {
      outline: 3px solid var(--gold);
      outline-offset: 2px;
    }

    .variant-body strong {
      font-size: 0.82rem;
      font-weight: 720;
      line-height: 1.2;
    }

    .variant-body span {
      color: var(--muted);
      font-size: 0.68rem;
      line-height: 1.45;
    }

    .variant-body b {
      color: var(--ink);
      font-size: 0.76rem;
      font-weight: 750;
    }

    .color-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .color-options {
      display: flex;
      gap: 12px;
    }

    .color-choice {
      position: relative;
      display: block;
      width: 36px;
      height: 36px;
      cursor: pointer;
    }

    .color-choice input {
      position: absolute;
      opacity: 0;
    }

    .color-dot {
      display: block;
      width: 36px;
      height: 36px;
      border: 3px solid var(--white);
      border-radius: 50%;
      outline: 1px solid var(--line);
      background: var(--swatch);
      transition: transform 0.18s ease, outline-color 0.18s ease;
    }

    .color-choice:hover .color-dot {
      transform: scale(1.08);
    }

    .color-choice input:checked + .color-dot {
      outline: 2px solid var(--ink);
      outline-offset: 3px;
    }

    .color-choice input:focus-visible + .color-dot {
      outline: 3px solid var(--gold);
      outline-offset: 3px;
    }

    .selected-color {
      font-size: 0.78rem;
      font-weight: 700;
    }

    .extra-list {
      display: grid;
      gap: 8px;
    }

    .extra-option {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      cursor: pointer;
      transition: border-color 0.2s ease, background 0.2s ease;
    }

    .extra-option:hover {
      border-color: rgba(23, 36, 31, 0.3);
    }

    .extra-option:has(input:checked) {
      border-color: rgba(23, 59, 49, 0.5);
      background: #f1f2ec;
    }

    .extra-option input {
      position: absolute;
      opacity: 0;
    }

    .extra-check {
      display: grid;
      width: 20px;
      height: 20px;
      flex: 0 0 auto;
      place-items: center;
      border: 1px solid rgba(23, 36, 31, 0.28);
      border-radius: 6px;
      background: var(--white);
    }

    .extra-option input:checked + .extra-check {
      border-color: var(--forest);
      background: var(--forest);
    }

    .extra-check svg {
      width: 13px;
      height: 13px;
      opacity: 0;
      color: var(--white);
    }

    .extra-option input:checked + .extra-check svg {
      opacity: 1;
    }

    .extra-option input:focus-visible + .extra-check {
      outline: 3px solid var(--gold);
      outline-offset: 2px;
    }

    .extra-copy {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .extra-copy strong {
      font-size: 0.78rem;
      font-weight: 700;
    }

    .extra-copy span {
      color: var(--muted);
      font-size: 0.72rem;
      white-space: nowrap;
    }

    .config-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      margin-top: 34px;
      padding-top: 28px;
      border-top: 1px solid var(--line);
    }

    .summary-copy span {
      display: block;
      color: var(--muted);
      font-size: 0.64rem;
      font-weight: 750;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .summary-copy strong {
      display: block;
      margin: 4px 0;
      font-size: 0.9rem;
    }

    .summary-copy small {
      color: var(--muted);
      font-size: 0.69rem;
    }

    .summary-total {
      text-align: right;
      white-space: nowrap;
    }

    .summary-total span {
      display: block;
      color: var(--muted);
      font-size: 0.62rem;
      font-weight: 750;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .summary-total strong {
      display: block;
      font-size: 2rem;
      font-weight: 650;
      letter-spacing: -0.055em;
      line-height: 1.15;
    }

    .config-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 9px;
      margin-top: 22px;
    }

    .config-note {
      margin-top: 12px;
      color: var(--muted);
      font-size: 0.65rem;
      text-align: right;
    }

    .story {
      padding: 140px 0;
    }

    .story-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      align-items: center;
      gap: clamp(55px, 7vw, 105px);
    }

    .workshop-frame {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-lg);
      background: #c5b797;
      box-shadow: 0 24px 60px rgba(23, 36, 31, 0.12);
    }

    .workshop-frame svg {
      width: 100%;
      height: auto;
    }

    .workshop-caption {
      position: absolute;
      right: 22px;
      bottom: 22px;
      left: 22px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      padding: 16px 18px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 15px;
      color: var(--white);
      background: rgba(16, 44, 37, 0.75);
      backdrop-filter: blur(10px);
    }

    .workshop-caption span {
      display: block;
      color: rgba(255, 253, 248, 0.6);
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .workshop-caption strong {
      display: block;
      margin-top: 3px;
      font-size: 0.86rem;
    }

    .workshop-caption b {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.06em;
    }

    .story-copy .section-title {
      margin: 24px 0 28px;
    }

    .story-copy > p {
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.8;
    }

    .material-list {
      margin: 38px 0 32px;
      border-top: 1px solid var(--line);
    }

    .material-item {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 15px;
      padding: 19px 0;
      border-bottom: 1px solid var(--line);
    }

    .material-item span {
      color: var(--accent);
      font-size: 0.66rem;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .material-item strong {
      display: block;
      margin-bottom: 3px;
      font-size: 0.9rem;
    }

    .material-item p {
      color: var(--muted);
      font-size: 0.77rem;
      line-height: 1.55;
    }

    .features {
      padding: 120px 0 130px;
      background: var(--white);
    }

    .features-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 40px;
      margin-bottom: 55px;
    }

    .features-head .section-title {
      margin-top: 23px;
    }

    .features-head p {
      max-width: 400px;
      color: var(--muted);
      font-size: 0.93rem;
      line-height: 1.7;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }

    .feature-card {
      min-height: 280px;
      padding: 31px 28px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .feature-card--accent {
      color: var(--white);
      background: var(--forest);
    }

    .feature-icon {
      display: grid;
      width: 47px;
      height: 47px;
      place-items: center;
      margin-bottom: 50px;
      border: 1px solid var(--line);
      border-radius: 50%;
    }

    .feature-card--accent .feature-icon {
      border-color: var(--line-light);
      background: rgba(255, 255, 255, 0.05);
    }

    .feature-icon svg {
      width: 22px;
      height: 22px;
    }

    .feature-card h3 {
      margin-bottom: 10px;
      font-size: 1.25rem;
      font-weight: 650;
      letter-spacing: -0.035em;
    }

    .feature-card p {
      max-width: 320px;
      color: var(--muted);
      font-size: 0.83rem;
      line-height: 1.65;
    }

    .feature-card--accent p {
      color: rgba(255, 253, 248, 0.62);
    }

    .process {
      padding: 125px 0 140px;
      background: var(--paper-deep);
    }

    .process-head {
      display: grid;
      grid-template-columns: 1fr 0.8fr;
      align-items: end;
      gap: 50px;
      margin-bottom: 65px;
    }

    .process-head .section-title {
      margin-top: 23px;
    }

    .process-head p {
      color: var(--muted);
      line-height: 1.75;
    }

    .process-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid rgba(23, 36, 31, 0.2);
    }

    .process-step {
      position: relative;
      padding: 29px 27px 0 0;
    }

    .process-step + .process-step {
      padding-left: 27px;
      border-left: 1px solid rgba(23, 36, 31, 0.2);
    }

    .step-number {
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      margin-bottom: 44px;
      border: 1px solid rgba(23, 36, 31, 0.25);
      border-radius: 50%;
      background: var(--paper-deep);
      font-size: 0.67rem;
      font-weight: 780;
    }

    .process-step h3 {
      margin-bottom: 12px;
      font-size: 1.18rem;
      font-weight: 660;
      letter-spacing: -0.035em;
    }

    .process-step p {
      max-width: 250px;
      color: var(--muted);
      font-size: 0.8rem;
      line-height: 1.65;
    }

    .owner-story {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      min-height: 620px;
    }

    .quote-panel {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: clamp(60px, 8vw, 120px);
      background: var(--paper);
    }

    .stars {
      color: var(--accent);
      font-size: 0.88rem;
      letter-spacing: 0.16em;
    }

    .quote-panel blockquote {
      max-width: 760px;
      margin: 50px 0;
      font-size: clamp(2rem, 4vw, 4.2rem);
      font-weight: 520;
      letter-spacing: -0.055em;
      line-height: 1.1;
    }

    .quote-panel blockquote em {
      color: var(--accent);
      font-family: var(--font-serif);
      font-weight: 400;
    }

    .reviewer {
      display: flex;
      align-items: center;
      gap: 13px;
    }

    .reviewer-avatar {
      display: grid;
      width: 45px;
      height: 45px;
      place-items: center;
      border-radius: 50%;
      color: var(--white);
      background: var(--forest);
      font-size: 0.72rem;
      font-weight: 800;
    }

    .reviewer strong,
    .reviewer span {
      display: block;
    }

    .reviewer strong {
      font-size: 0.86rem;
    }

    .reviewer span {
      color: var(--muted);
      font-size: 0.7rem;
    }

    .owner-proof {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(45px, 6vw, 85px);
      color: var(--white);
      background:
        radial-gradient(circle at 90% 10%, rgba(228, 182, 92, 0.14), transparent 32%),
        var(--forest);
    }

    .owner-proof-label {
      color: rgba(255, 253, 248, 0.58);
      font-size: 0.67rem;
      font-weight: 750;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .rating-number {
      margin: 25px 0 0;
      font-size: clamp(5rem, 9vw, 8.5rem);
      font-weight: 560;
      letter-spacing: -0.08em;
      line-height: 0.9;
    }

    .rating-number span {
      margin-left: 8px;
      color: var(--gold);
      font-size: 0.27em;
      font-weight: 650;
      letter-spacing: 0;
      vertical-align: top;
    }

    .owner-proof .stars {
      margin: 20px 0 35px;
      color: var(--gold);
    }

    .proof-list {
      margin: 0;
      border-top: 1px solid var(--line-light);
    }

    .proof-list div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 17px 0;
      border-bottom: 1px solid var(--line-light);
    }

    .proof-list dt {
      color: rgba(255, 253, 248, 0.6);
      font-size: 0.77rem;
    }

    .proof-list dd {
      margin: 0;
      font-size: 0.82rem;
      font-weight: 720;
    }

    .guarantee-note {
      margin-top: 35px;
      padding: 20px;
      border: 1px solid var(--line-light);
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.05);
    }

    .guarantee-note strong {
      display: block;
      margin-bottom: 5px;
      font-size: 0.85rem;
    }

    .guarantee-note p {
      color: rgba(255, 253, 248, 0.58);
      font-size: 0.72rem;
      line-height: 1.55;
    }

    .faq {
      padding: 130px 0;
      background: var(--white);
    }

    .faq-grid {
      display: grid;
      grid-template-columns: 0.72fr 1.28fr;
      align-items: start;
      gap: clamp(55px, 8vw, 130px);
    }

    .faq-intro {
      position: sticky;
      top: 120px;
    }

    .faq-intro .section-title {
      margin: 23px 0 25px;
    }

    .faq-intro p {
      max-width: 360px;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.7;
    }

    .faq-intro .text-link {
      margin-top: 28px;
    }

    .faq-list {
      border-top: 1px solid var(--line);
    }

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

    .faq-item summary {
      display: flex;
      min-height: 82px;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      padding: 20px 0;
      cursor: pointer;
      list-style: none;
      font-size: 1.02rem;
      font-weight: 680;
      letter-spacing: -0.02em;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-plus {
      position: relative;
      width: 24px;
      height: 24px;
      flex: 0 0 auto;
      border: 1px solid var(--line);
      border-radius: 50%;
    }

    .faq-plus::before,
    .faq-plus::after {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 9px;
      height: 1px;
      content: "";
      background: var(--ink);
      transform: translate(-50%, -50%);
      transition: transform 0.2s ease;
    }

    .faq-plus::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .faq-item[open] .faq-plus::after {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    .faq-answer {
      max-width: 680px;
      padding: 0 50px 25px 0;
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.75;
    }

    .visit {
      position: relative;
      padding: 125px 0;
      overflow: hidden;
      color: var(--white);
      text-align: center;
      background:
        radial-gradient(circle at 50% 120%, rgba(228, 182, 92, 0.18), transparent 39%),
        var(--forest-dark);
    }

    .visit::before,
    .visit::after {
      position: absolute;
      width: 420px;
      height: 420px;
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 50%;
      content: "";
    }

    .visit::before {
      top: -270px;
      left: -130px;
    }

    .visit::after {
      right: -180px;
      bottom: -290px;
    }

    .visit .container {
      position: relative;
      z-index: 1;
    }

    .visit .eyebrow {
      color: rgba(255, 253, 248, 0.64);
    }

    .visit .eyebrow::before {
      background: var(--gold);
    }

    .visit h2 {
      max-width: 850px;
      margin: 27px auto 25px;
      font-size: clamp(3.4rem, 7vw, 7rem);
      font-weight: 580;
      letter-spacing: -0.075em;
      line-height: 0.92;
    }

    .visit h2 em {
      color: var(--gold);
      font-family: var(--font-serif);
      font-weight: 400;
    }

    .visit p {
      max-width: 620px;
      margin: 0 auto;
      color: rgba(255, 253, 248, 0.64);
      line-height: 1.75;
    }

    .visit-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-top: 36px;
    }

    .visit-details {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px 32px;
      margin-top: 42px;
      color: rgba(255, 253, 248, 0.52);
      font-size: 0.72rem;
    }

    .visit-details span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .visit-details svg {
      width: 15px;
      height: 15px;
      color: var(--gold);
    }

    .site-footer {
      padding: 70px 0 28px;
      color: var(--white);
      background: #0b241e;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr repeat(3, 0.7fr);
      gap: 60px;
      padding-bottom: 65px;
    }

    .footer-brand .brand {
      color: var(--white);
    }

    .footer-brand .brand-type small {
      color: rgba(255, 253, 248, 0.48);
    }

    .footer-brand > p {
      max-width: 340px;
      margin-top: 24px;
      color: rgba(255, 253, 248, 0.52);
      font-size: 0.8rem;
      line-height: 1.7;
    }

    .footer-column h3 {
      margin: 3px 0 20px;
      color: rgba(255, 253, 248, 0.42);
      font-size: 0.62rem;
      font-weight: 750;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .footer-column a,
    .footer-column span {
      display: block;
      margin: 10px 0;
      color: rgba(255, 253, 248, 0.72);
      font-size: 0.78rem;
    }

    .footer-column a:hover {
      color: var(--gold);
    }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      padding-top: 25px;
      border-top: 1px solid rgba(255, 255, 255, 0.11);
      color: rgba(255, 253, 248, 0.38);
      font-size: 0.67rem;
    }

    .footer-bottom-links {
      display: flex;
      gap: 24px;
    }

    .footer-bottom a:hover {
      color: var(--white);
    }

    dialog {
      width: min(calc(100% - 32px), 720px);
      max-height: calc(100vh - 32px);
      padding: 0;
      overflow: auto;
      border: 0;
      border-radius: 27px;
      color: var(--ink);
      background: var(--white);
      box-shadow: 0 30px 100px rgba(0, 0, 0, 0.34);
    }

    dialog::backdrop {
      background: rgba(8, 26, 21, 0.72);
      backdrop-filter: blur(6px);
    }

    .dialog-inner {
      position: relative;
      padding: 38px;
    }

    .dialog-close {
      position: absolute;
      z-index: 2;
      top: 22px;
      right: 22px;
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: transparent;
      cursor: pointer;
    }

    .dialog-close:hover {
      color: var(--white);
      background: var(--ink);
    }

    .dialog-close svg {
      width: 16px;
      height: 16px;
    }

    .dialog-title {
      max-width: 560px;
      margin: 18px 0 12px;
      font-size: clamp(2.4rem, 6vw, 4rem);
      font-weight: 610;
      letter-spacing: -0.06em;
      line-height: 0.98;
    }

    .dialog-copy {
      max-width: 540px;
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.7;
    }

    .modal-build {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin: 25px 0;
      padding: 17px 18px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--paper);
    }

    .modal-build span {
      display: block;
      color: var(--muted);
      font-size: 0.62rem;
      font-weight: 750;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .modal-build strong {
      display: block;
      margin-top: 3px;
      font-size: 0.88rem;
    }

    .modal-build b {
      font-size: 1.08rem;
      white-space: nowrap;
    }

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

    .form-field {
      display: grid;
      gap: 7px;
    }

    .form-field--full {
      grid-column: 1 / -1;
    }

    .form-field label {
      font-size: 0.72rem;
      font-weight: 720;
    }

    .form-field input,
    .form-field textarea,
    .form-field select {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 11px;
      outline: 0;
      color: var(--ink);
      background: var(--paper);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .form-field input,
    .form-field select {
      height: 50px;
      padding: 0 14px;
    }

    .form-field textarea {
      min-height: 105px;
      padding: 13px 14px;
      resize: vertical;
    }

    .form-field input:focus,
    .form-field textarea:focus,
    .form-field select:focus {
      border-color: var(--forest);
      box-shadow: 0 0 0 3px rgba(23, 59, 49, 0.09);
    }

    .consent {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 18px 0;
      color: var(--muted);
      font-size: 0.7rem;
      line-height: 1.5;
    }

    .consent input {
      width: 17px;
      height: 17px;
      flex: 0 0 auto;
      margin-top: 2px;
      accent-color: var(--forest);
    }

    .form-submit {
      width: 100%;
    }

    .form-footnote {
      margin-top: 12px;
      color: var(--muted);
      font-size: 0.64rem;
      text-align: center;
    }

    .success-view {
      padding: 35px 0 15px;
      text-align: center;
    }

    .success-icon {
      display: grid;
      width: 68px;
      height: 68px;
      place-items: center;
      margin: 0 auto 24px;
      border-radius: 50%;
      color: var(--white);
      background: var(--forest);
    }

    .success-icon svg {
      width: 28px;
      height: 28px;
    }

    .success-view h2 {
      margin-bottom: 12px;
      font-size: 2.4rem;
      font-weight: 620;
      letter-spacing: -0.055em;
    }

    .success-view p {
      max-width: 500px;
      margin: 0 auto 26px;
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.7;
    }

    .toast {
      position: fixed;
      z-index: 120;
      right: 22px;
      bottom: 22px;
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: min(380px, calc(100% - 44px));
      padding: 14px 17px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 13px;
      color: var(--white);
      background: var(--ink);
      box-shadow: 0 16px 50px rgba(0, 0, 0, 0.22);
      font-size: 0.78rem;
      opacity: 0;
      pointer-events: none;
      transform: translateY(14px);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .toast.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .toast svg {
      width: 17px;
      height: 17px;
      color: var(--gold);
    }

    .js .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .js .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .js .reveal-delay {
      transition-delay: 0.12s;
    }

    @media (max-width: 1150px) {
      .hero-grid {
        grid-template-columns: 1fr;
      }

      .hero-copy {
        max-width: 850px;
        padding-bottom: 0;
      }

      .hero-title {
        max-width: 820px;
      }

      .bike-stage {
        min-height: 680px;
      }

      .bike-illustration {
        right: 0;
        bottom: 35px;
        width: 100%;
      }

      .config-grid {
        grid-template-columns: 0.7fr 1.3fr;
        gap: 45px;
      }

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

      .variant-body {
        min-height: auto;
        gap: 6px;
      }

      .story-grid {
        gap: 50px;
      }
    }

    @media (max-width: 960px) {
      .nav-shell {
        grid-template-columns: 1fr auto;
      }

      .nav-links,
      .nav-actions {
        display: none;
      }

      .menu-toggle {
        display: flex;
        justify-self: end;
      }

      .mobile-menu {
        position: fixed;
        z-index: 45;
        top: 114px;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        align-content: start;
        gap: 0;
        padding: 20px 24px 40px;
        background: var(--paper);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-12px);
        transition: opacity 0.2s ease, transform 0.2s ease;
      }

      .mobile-menu.open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }

      .mobile-menu a {
        padding: 20px 0;
        border-bottom: 1px solid var(--line);
        font-size: 1.35rem;
        font-weight: 600;
        letter-spacing: -0.04em;
      }

      .mobile-menu .btn {
        width: 100%;
        margin-top: 25px;
      }

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

      .credibility-item:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--line);
      }

      .credibility-item:nth-child(4) {
        border-top: 1px solid var(--line);
      }

      .collection-intro,
      .process-head {
        grid-template-columns: 1fr;
        gap: 25px;
      }

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

      .brief-card {
        grid-column: 1 / -1;
        min-height: 410px;
      }

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

      .config-copy {
        position: static;
      }

      .variant-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .story-grid,
      .faq-grid {
        grid-template-columns: 1fr;
      }

      .faq-intro {
        position: static;
      }

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

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

      .process-step:nth-child(3) {
        border-left: 0;
      }

      .process-step:nth-child(n+3) {
        border-top: 1px solid rgba(23, 36, 31, 0.2);
      }

      .owner-story {
        grid-template-columns: 1fr;
      }

      .owner-proof {
        min-height: 570px;
      }

      .footer-grid {
        grid-template-columns: 1.4fr repeat(2, 0.8fr);
      }

      .footer-column:last-child {
        grid-column: 2 / 4;
      }
    }

    @media (max-width: 720px) {
      .container {
        width: min(100% - 30px, 1320px);
      }

      .announcement .container {
        min-height: 42px;
        justify-content: flex-start;
        font-size: 0.66rem;
      }

      .announcement a {
        display: none;
      }

      .nav-shell {
        min-height: 70px;
      }

      .mobile-menu {
        top: 112px;
      }

      .hero {
        padding: 26px 0 70px;
      }

      .hero-copy {
        padding-top: 25px;
      }

      .hero-title {
        margin-top: 20px;
        font-size: clamp(3.65rem, 19vw, 5.8rem);
      }

      .hero-lead {
        font-size: 1rem;
      }

      .hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
      }

      .hero-assurances {
        grid-template-columns: 1fr;
      }

      .hero-assurance {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 20px;
        padding: 13px 0;
        border-bottom: 1px solid var(--line);
      }

      .hero-assurance + .hero-assurance {
        padding-left: 0;
        border-left: 0;
      }

      .hero-assurance span {
        text-align: right;
      }

      .bike-stage {
        min-height: 480px;
        border-radius: 24px;
      }

      .stage-top {
        top: 21px;
        right: 20px;
        left: 20px;
      }

      .stage-badge {
        padding: 8px 10px;
        font-size: 0.52rem;
      }

      .stage-load {
        top: 91px;
        right: 19px;
        width: 100px;
        padding: 11px 12px;
      }

      .stage-load strong {
        font-size: 1.05rem;
      }

      .bike-illustration {
        right: -20%;
        bottom: 35px;
        width: 140%;
      }

      .stage-foot {
        right: 20px;
        bottom: 18px;
        left: 20px;
      }

      .hero-controls {
        flex-wrap: wrap;
        margin: -22px 12px 0;
        padding: 17px;
      }

      .finish-info {
        flex: 1;
      }

      .swatches {
        order: 3;
        width: 100%;
        justify-content: space-between;
      }

      .hero-price {
        margin-left: auto;
      }

      .credibility-item {
        min-height: 100px;
        padding: 20px 16px;
      }

      .credibility-item strong {
        font-size: 0.8rem;
      }

      .credibility-item span {
        font-size: 0.68rem;
      }

      .collection,
      .story,
      .features,
      .process,
      .faq {
        padding: 90px 0;
      }

      .configurator {
        padding: 90px 0;
      }

      .section-title {
        font-size: clamp(2.75rem, 13vw, 4.4rem);
      }

      .collection-intro {
        margin-bottom: 42px;
      }

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

      .brief-card {
        grid-column: auto;
        min-height: 390px;
      }

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

      .config-panel-header,
      .config-panel-body {
        padding-right: 20px;
        padding-left: 20px;
      }

      .config-panel-header {
        display: block;
      }

      .config-code {
        display: inline-block;
        margin-top: 13px;
      }

      .color-row {
        align-items: flex-start;
        flex-direction: column;
      }

      .config-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
      }

      .summary-total {
        text-align: left;
      }

      .config-actions {
        justify-content: stretch;
      }

      .config-actions .btn {
        flex: 1;
      }

      .config-note {
        text-align: left;
      }

      .workshop-caption {
        right: 14px;
        bottom: 14px;
        left: 14px;
      }

      .workshop-caption b {
        display: none;
      }

      .features-head {
        display: block;
        margin-bottom: 40px;
      }

      .features-head p {
        margin-top: 20px;
      }

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

      .feature-card {
        min-height: 240px;
      }

      .feature-icon {
        margin-bottom: 38px;
      }

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

      .process-step,
      .process-step + .process-step {
        min-height: 210px;
        padding: 26px 0;
        border-left: 0;
      }

      .process-step + .process-step {
        border-top: 1px solid rgba(23, 36, 31, 0.2);
      }

      .step-number {
        margin-bottom: 30px;
      }

      .quote-panel {
        min-height: 570px;
        padding: 65px 25px;
      }

      .quote-panel blockquote {
        margin: 42px 0;
      }

      .owner-proof {
        min-height: 520px;
        padding: 60px 25px;
      }

      .faq-item summary {
        min-height: 74px;
        font-size: 0.93rem;
      }

      .faq-answer {
        padding-right: 15px;
      }

      .visit {
        padding: 95px 0;
      }

      .visit h2 {
        font-size: clamp(3.2rem, 16vw, 5rem);
      }

      .visit-actions {
        flex-direction: column;
      }

      .visit-details {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 45px 25px;
      }

      .footer-brand {
        grid-column: 1 / -1;
      }

      .footer-column:last-child {
        grid-column: auto;
      }

      .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
      }

      .dialog-inner {
        padding: 30px 20px;
      }

      .dialog-title {
        padding-right: 35px;
      }

      .modal-build {
        align-items: flex-start;
        flex-direction: column;
      }

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

      .form-field--full {
        grid-column: auto;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }

      .js .reveal {
        opacity: 1;
        transform: none;
      }
    }
  </style>
</head>
<body id="top">
  <a class="skip-link" href="#main">Skip to content</a>

  <div class="announcement">
    <div class="container">
      <span>Workshop appointments are now open in Copenhagen</span>
      <a href="#visit">
        Find a time
        <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
          <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </a>
    </div>
  </div>

  <header class="site-header" id="siteHeader">
    <div class="container nav-shell">
      <a class="brand" href="#top" aria-label="Lumen Cycles home">
        <svg class="brand-mark" viewBox="0 0 40 40" fill="none" aria-hidden="true">
          <circle cx="20" cy="20" r="18.5" stroke="currentColor" stroke-width="1.5"/>
          <path d="M20 7.5v7M10.7 12.1l5.1 5.1M29.3 12.1l-5.1 5.1M20 25.5v7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          <circle cx="20" cy="20" r="3.7" fill="#c85e3d"/>
        </svg>
        <span class="brand-type">
          <strong>LUMEN</strong>
          <small>CYCLES · COPENHAGEN</small>
        </span>
      </a>

      <nav class="nav-links" aria-label="Main navigation">
        <a href="#bikes">The bikes</a>
        <a href="#configure">Your build</a>
        <a href="#workshop">Our workshop</a>
        <a href="#faq">FAQ</a>
      </nav>

      <div class="nav-actions">
        <button class="btn btn-dark" type="button" data-open-dialog>
          Book a test ride
          <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
            <path d="M3 9h12M10.5 4.5 15 9l-4.5 4.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
      </div>

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

  <div class="mobile-menu" id="mobileMenu">
    <a href="#bikes">The bikes</a>
    <a href="#configure">Your build</a>
    <a href="#workshop">Our workshop</a>
    <a href="#faq">FAQ</a>
    <button class="btn btn-accent" type="button" data-open-dialog>Book a test ride</button>
  </div>

  <main id="main">
    <section class="hero" aria-labelledby="heroTitle">
      <div class="container hero-grid">
        <div class="hero-copy">
          <span class="eyebrow">Custom cargo bikes · Copenhagen</span>
          <h1 class="hero-title" id="heroTitle">
            Carry more.
            <em>Live lighter.</em>
          </h1>
          <p class="hero-lead">
            Custom longtails and compact cargo bikes, built around your commute, your family and your city — then tuned to you in our Copenhagen workshop.
          </p>
          <div class="hero-actions">
            <a class="btn btn-accent" href="#configure">
              Build your bike
              <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
                <path d="M3 9h12M10.5 4.5 15 9l-4.5 4.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </a>
            <a class="text-link" href="#workshop">
              See how we work
              <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
                <path d="M3 9h12M10.5 4.5 15 9l-4.5 4.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </a>
          </div>
          <div class="hero-assurances" aria-label="Purchase assurances">
            <div class="hero-assurance">
              <strong>From €3,650</strong>
              <span>Clear, itemised pricing</span>
            </div>
            <div class="hero-assurance">
              <strong>5-year frame</strong>
              <span>Long-term warranty</span>
            </div>
            <div class="hero-assurance">
              <strong>8–10 weeks</strong>
              <span>Made-to-order lead time</span>
            </div>
          </div>
        </div>

        <figure class="hero-visual">
          <div class="bike-stage" id="bikeStage">
            <div class="stage-top">
              <div>
                <span class="stage-kicker">Lumen / 01</span>
                <strong class="stage-model" id="stageModel">Lumen One</strong>
                <span class="stage-sub" id="stageSub">Longtail · Everyday cargo system</span>
              </div>
              <span class="stage-badge">Made to order</span>
            </div>

            <div class="stage-load">
              <span>Total load</span>
              <strong>200 kg</strong>
            </div>

            <svg class="bike-illustration" viewBox="0 0 820 600" role="img" aria-labelledby="bikeTitle bikeDescription">
              <title id="bikeTitle">Lumen One custom cargo bicycle</title>
              <desc id="bikeDescription">A longtail cargo bike with a rear cargo deck, upright bars, integrated lighting and a deep green frame.</desc>
              <defs>
                <g id="lcWheel">
                  <circle r="121" fill="none" stroke="#111916" stroke-width="15"/>
                  <circle r="107" fill="none" stroke="#b8c0ba" stroke-width="3"/>
                  <g stroke="#9ca8a1" stroke-width="1.2" opacity="0.8">
                    <line x1="0" y1="-103" x2="0" y2="103"/>
                    <line x1="0" y1="-103" x2="0" y2="103" transform="rotate(30)"/>
                    <line x1="0" y1="-103" x2="0" y2="103" transform="rotate(60)"/>
                    <line x1="0" y1="-103" x2="0" y2="103" transform="rotate(90)"/>
                    <line x1="0" y1="-103" x2="0" y2="103" transform="rotate(120)"/>
                    <line x1="0" y1="-103" x2="0" y2="103" transform="rotate(150)"/>
                  </g>
                  <circle r="13" fill="#28322e" stroke="#d7ddd8" stroke-width="3"/>
                </g>
                <filter id="lcShadow" x="-20%" y="-20%" width="140%" height="140%">
                  <feDropShadow dx="0" dy="8" stdDeviation="7" flood-color="#06100d" flood-opacity="0.24"/>
                </filter>
              </defs>

              <g opacity="0.28">
                <path d="M65 485h695" stroke="#e6ede7" stroke-width="1" stroke-dasharray="5 9"/>
                <path d="M94 460h640" stroke="#e6ede7" stroke-width="1" opacity="0.35"/>
              </g>

              <g filter="url(#lcShadow)">
                <use href="#lcWheel" transform="translate(195 398)"/>
                <use href="#lcWheel" transform="translate(625 398)"/>

                <path d="M92 320a111 111 0 0 1 202-42" fill="none" stroke="#25312c" stroke-width="8" stroke-linecap="round"/>
                <path d="M530 326a111 111 0 0 1 178-36" fill="none" stroke="#25312c" stroke-width="8" stroke-linecap="round"/>

                <g class="bike-frame" stroke-width="18">
                  <path d="M195 398 392 398"/>
                  <path d="M195 398 350 218"/>
                  <path d="M350 218 392 398"/>
                  <path d="M350 218 545 248"/>
                  <path d="M392 398 563 319"/>
                  <path d="M545 248 563 319"/>
                  <path d="M563 319 625 398"/>
                </g>

                <path d="M407 383 542 318" class="bike-frame" stroke-width="24" opacity="0.84"/>
                <path d="M414 372 535 315" stroke="#d4dbd5" stroke-width="2" opacity="0.45"/>

                <path d="M350 218 336 173" stroke="#222b27" stroke-width="12" stroke-linecap="round"/>
                <path d="M303 169c17-8 47-8 67 0-13 16-52 18-67 0Z" fill="#aa6e47"/>
                <path d="M306 168c15-4 44-4 61 0" fill="none" stroke="#d1a278" stroke-width="2" stroke-linecap="round"/>

                <path d="M545 248 535 181 570 161" fill="none" stroke="#222b27" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M568 162 589 154" stroke="#9b6b49" stroke-width="15" stroke-linecap="round"/>
                <path d="M570 162 584 167" stroke="#151b18" stroke-width="7" stroke-linecap="round"/>
                <path d="M536 195 516 211" fill="none" stroke="#222b27" stroke-width="5" stroke-linecap="round"/>
                <rect x="503" y="204" width="24" height="16" rx="5" fill="#18201d"/>
                <circle cx="515" cy="212" r="4" fill="#f1cf75"/>

                <path d="M118 275H344" stroke="#c49668" stroke-width="12" stroke-linecap="round"/>
                <path d="M127 290 195 398M315 290 350 218" fill="none" stroke="#252e2a" stroke-width="7" stroke-linecap="round"/>
                <path d="M128 257H335" stroke="#d7b183" stroke-width="8" stroke-linecap="round"/>
                <path d="M153 249 151 281M320 249 319 281" stroke="#2b332f" stroke-width="5"/>
                <path d="M142 250H334" stroke="#e1c59f" stroke-width="2" stroke-dasharray="3 8" stroke-linecap="round"/>

                <circle cx="392" cy="398" r="31" fill="#1b2420" stroke="#c4cbc6" stroke-width="5"/>
                <circle cx="392" cy="398" r="9" fill="#b7bfba"/>
                <path d="M392 398 359 377" stroke="#c6cec8" stroke-width="6" stroke-linecap="round"/>
                <path d="M359 377h-19" stroke="#222b27" stroke-width="7" stroke-linecap="round"/>
                <path d="M195 398 392 398" stroke="#d2d7d2" stroke-width="3" stroke-dasharray="4 5"/>
                <circle cx="195" cy="398" r="18" fill="#26302b" stroke="#bbc2bd" stroke-width="4"/>

                <circle cx="625" cy="398" r="38" fill="none" stroke="#9fa9a3" stroke-width="2" opacity="0.65"/>
                <circle cx="625" cy="398" r="18" fill="none" stroke="#9fa9a3" stroke-width="2" opacity="0.65"/>
                <circle cx="195" cy="398" r="35" fill="none" stroke="#9fa9a3" stroke-width="2" opacity="0.65"/>
                <circle cx="195" cy="398" r="16" fill="none" stroke="#9fa9a3" stroke-width="2" opacity="0.65"/>

                <path d="M621 340c13-14 31-19 45-16" fill="none" stroke="#222b27" stroke-width="5" stroke-linecap="round"/>
                <rect x="659" y="308" width="24" height="17" rx="6" fill="#1b231f"/>
                <circle cx="672" cy="316" r="5" fill="#f4d17c"/>

                <text x="405" y="251" fill="#e8eee9" font-family="Arial, sans-serif" font-size="13" font-weight="700" letter-spacing="2" opacity="0.8">LUMEN</text>
              </g>
            </svg>

            <div class="stage-foot">
              <span>Copenhagen / DK</span>
              <span>Frame 01 · Hand finished</span>
            </div>
          </div>

          <div class="hero-controls">
            <div class="finish-info">
              <span>Frame finish</span>
              <strong id="heroColorName">Forest green</strong>
            </div>
            <div class="swatches" aria-label="Choose a frame finish">
              <button class="swatch" type="button" data-color="forest" style="--swatch:#315848" aria-label="Forest green" aria-pressed="true"></button>
              <button class="swatch" type="button" data-color="ember" style="--swatch:#a9573f" aria-label="Ember red" aria-pressed="false"></button>
              <button class="swatch" type="button" data-color="sand" style="--swatch:#c8b998" aria-label="Warm sand" aria-pressed="false"></button>
              <button class="swatch" type="button" data-color="ink" style="--swatch:#252b29" aria-label="Midnight ink" aria-pressed="false"></button>
              <button class="swatch" type="button" data-color="steel" style="--swatch:#71847a" aria-label="Coastal steel" aria-pressed="false"></button>
            </div>
            <div class="hero-price">
              <span>From</span>
              <strong id="heroPrice">€4,250</strong>
            </div>
          </div>
        </figure>
      </div>
    </section>

    <section class="credibility" aria-label="Why choose Lumen">
      <div class="container credibility-grid">
        <div class="credibility-item">
          <strong>Designed & built in Copenhagen</strong>
          <span>One workshop, one dedicated builder</span>
        </div>
        <div class="credibility-item">
          <strong>Built around your actual load</strong>
          <span>Geometry and cargo measured in person</span>
        </div>
        <div class="credibility-item">
          <strong>Five-year frame warranty</strong>
          <span>Two-year component warranty</span>
        </div>
        <div class="credibility-item">
          <strong>Lifetime workshop support</strong>
          <span>We service what we build</span>
        </div>
      </div>
    </section>

    <section class="collection" id="bikes" aria-labelledby="collectionTitle">
      <div class="container">
        <div class="collection-intro reveal">
          <div>
            <span class="eyebrow">Two foundations. One way of building.</span>
            <h2 class="section-title" id="collectionTitle">Made for your kind of <em>everyday.</em></h2>
          </div>
          <p class="section-intro">
            We don’t sell catalogue models. We start with a well-made platform, then adapt its geometry, cargo system and finish to the way you really move through the city.
          </p>
        </div>

        <div class="product-grid">
          <article class="product-card reveal">
            <div class="product-visual">
              <span class="visual-index">01 / Longtail</span>
              <svg viewBox="0 0 420 240" aria-hidden="true">
                <g fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="100" cy="158" r="61" stroke="#17231f" stroke-width="8"/>
                  <circle cx="319" cy="158" r="61" stroke="#17231f" stroke-width="8"/>
                  <circle cx="100" cy="158" r="48" stroke="#8e9a93" stroke-width="2"/>
                  <circle cx="319" cy="158" r="48" stroke="#8e9a93" stroke-width="2"/>
                  <path d="M100 158 184 158 157 72 260 86 277 122 184 158" stroke="#315848" stroke-width="11"/>
                  <path d="M157 72 146 50M260 86 255 47 277 39" stroke="#1b2521" stroke-width="7"/>
                  <path d="M64 91H145" stroke="#bd8b60" stroke-width="8"/>
                  <path d="M77 96 100 158M133 96 157 72" stroke="#28312d" stroke-width="4"/>
                  <path d="M130 50h38" stroke="#a36d49" stroke-width="8"/>
                  <path d="M268 123 319 158" stroke="#315848" stroke-width="10"/>
                </g>
              </svg>
            </div>
            <div class="product-body">
              <div class="product-meta">
                <h3>Lumen One</h3>
                <span>Longtail</span>
              </div>
              <p>The full-volume workhorse for school runs, market hauls and cargo that should disappear into the city rather than dominate it.</p>
              <div class="product-specs">
                <span>200 kg total load</span>
                <span>180 kg rear payload</span>
                <span>Up to 1,000 L</span>
              </div>
              <div class="product-action">
                <strong>€4,250</strong>
                <a href="#configure">Configure <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M2 8h12M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
              </div>
            </div>
          </article>

          <article class="product-card reveal reveal-delay">
            <div class="product-visual product-visual--clay">
              <span class="visual-index">02 / Compact</span>
              <svg viewBox="0 0 420 240" aria-hidden="true">
                <g fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="111" cy="158" r="61" stroke="#17231f" stroke-width="8"/>
                  <circle cx="311" cy="158" r="61" stroke="#17231f" stroke-width="8"/>
                  <circle cx="111" cy="158" r="48" stroke="#8e9a93" stroke-width="2"/>
                  <circle cx="311" cy="158" r="48" stroke="#8e9a93" stroke-width="2"/>
                  <path d="M111 158 197 158 169 74 253 93 270 125 197 158" stroke="#a9573f" stroke-width="11"/>
                  <path d="M169 74 156 50M253 93 247 54 271 43" stroke="#1b2521" stroke-width="7"/>
                  <path d="M145 50h37" stroke="#a36d49" stroke-width="8"/>
                  <path d="M72 99h79" stroke="#bd8b60" stroke-width="8"/>
                  <path d="M81 104 111 158M139 104 169 74" stroke="#28312d" stroke-width="4"/>
                  <path d="M260 125 311 158" stroke="#a9573f" stroke-width="10"/>
                </g>
              </svg>
            </div>
            <div class="product-body">
              <div class="product-meta">
                <h3>Lumen City</h3>
                <span>Compact</span>
              </div>
              <p>Slim, agile and surprisingly capable. A practical companion for apartment living, local errands and streets that get narrow fast.</p>
              <div class="product-specs">
                <span>140 kg total load</span>
                <span>90 kg rear payload</span>
                <span>Up to 320 L</span>
              </div>
              <div class="product-action">
                <strong>€3,650</strong>
                <a href="#configure">Configure <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M2 8h12M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
              </div>
            </div>
          </article>

          <article class="brief-card reveal reveal-delay">
            <div>
              <span class="eyebrow">Your brief, not a catalogue</span>
              <h3>Need something a little more particular?</h3>
              <p>Longer wheelbase, a custom box, lower step-through or a carry system built for work. We design around the cargo, not the other way around.</p>
            </div>
            <button class="btn btn-light" type="button" data-open-dialog>
              Talk to a builder
              <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
                <path d="M3 9h12M10.5 4.5 15 9l-4.5 4.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
          </article>
        </div>
      </div>
    </section>

    <section class="configurator" id="configure" aria-labelledby="configureTitle">
      <div class="container config-grid">
        <div class="config-copy reveal">
          <span class="eyebrow eyebrow--light">Your build</span>
          <h2 class="section-title" id="configureTitle">Better starts with your <em>routine.</em></h2>
          <p>
            Choose a foundation, then make it fit. Every configuration is reviewed by a builder before your order is confirmed, so the price you see remains honest and itemised.
          </p>
          <div class="config-steps">
            <div class="config-step">
              <span>01</span>
              <div>
                <strong>Tell us what you carry</strong>
                <p>Kids, work, groceries or tools — your real routine sets the design brief.</p>
              </div>
            </div>
            <div class="config-step">
              <span>02</span>
              <div>
                <strong>Choose a sensible starting point</strong>
                <p>Use the estimator below, then refine every detail with your builder.</p>
              </div>
            </div>
            <div class="config-step">
              <span>03</span>
              <div>
                <strong>Confirm the fit, not just the frame</strong>
                <p>We measure reach, standover and cargo placement before a single tube is cut.</p>
              </div>
            </div>
          </div>
        </div>

        <div class="config-panel reveal reveal-delay">
          <div class="config-panel-header">
            <div>
              <h3>Build estimator</h3>
              <p>A considered starting point, not a final quote.</p>
            </div>
            <span class="config-code" id="configCode">LC-01-FOR</span>
          </div>

          <div class="config-panel-body">
            <fieldset class="config-group">
              <legend>Choose your Lumen</legend>
              <div class="variant-grid">
                <label class="variant-option">
                  <input type="radio" name="variant" value="one" checked>
                  <span class="variant-body">
                    <strong>Lumen One</strong>
                    <span>Longtail with everyday rear rails</span>
                    <b>€4,250</b>
                  </span>
                </label>
                <label class="variant-option">
                  <input type="radio" name="variant" value="plus">
                  <span class="variant-body">
                    <strong>Lumen One +</strong>
                    <span>Reinforced cargo deck and low loader</span>
                    <b>€4,750</b>
                  </span>
                </label>
                <label class="variant-option">
                  <input type="radio" name="variant" value="electric">
                  <span class="variant-body">
                    <strong>Lumen Electric</strong>
                    <span>Quiet belt drive and removable battery</span>
                    <b>€5,350</b>
                  </span>
                </label>
              </div>
            </fieldset>

            <fieldset class="config-group">
              <legend>Frame finish</legend>
              <div class="color-row">
                <div class="color-options">
                  <label class="color-choice" title="Forest green">
                    <input type="radio" name="frameColor" value="forest" checked>
                    <span class="color-dot" style="--swatch:#315848"></span>
                    <span class="sr-only">Forest green</span>
                  </label>
                  <label class="color-choice" title="Ember red">
                    <input type="radio" name="frameColor" value="ember">
                    <span class="color-dot" style="--swatch:#a9573f"></span>
                    <span class="sr-only">Ember red</span>
                  </label>
                  <label class="color-choice" title="Warm sand">
                    <input type="radio" name="frameColor" value="sand">
                    <span class="color-dot" style="--swatch:#c8b998"></span>
                    <span class="sr-only">Warm sand</span>
                  </label>
                  <label class="color-choice" title="Midnight ink">
                    <input type="radio" name="frameColor" value="ink">
                    <span class="color-dot" style="--swatch:#252b29"></span>
                    <span class="sr-only">Midnight ink</span>
                  </label>
                  <label class="color-choice" title="Coastal steel">
                    <input type="radio" name="frameColor" value="steel">
                    <span class="color-dot" style="--swatch:#71847a"></span>
                    <span class="sr-only">Coastal steel</span>
                  </label>
                </div>
                <span class="selected-color" id="configColorName">Forest green</span>
              </div>
            </fieldset>

            <fieldset class="config-group">
              <legend class="config-group-title">Useful additions <small>Choose as many as you need</small></legend>
              <div class="extra-list">
                <label class="extra-option">
                  <input type="checkbox" data-extra data-price="180" data-label="Solid oak cargo deck">
                  <span class="extra-check">
                    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="m3 8 3 3 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                  </span>
                  <span class="extra-copy">
                    <strong>Solid oak cargo deck</strong>
                    <span>+ €180</span>
                  </span>
                </label>
                <label class="extra-option">
                  <input type="checkbox" data-extra data-price="340" data-label="Weatherproof cargo box">
                  <span class="extra-check">
                    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="m3 8 3 3 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                  </span>
                  <span class="extra-copy">
                    <strong>Weatherproof cargo box</strong>
                    <span>+ €340</span>
                  </span>
                </label>
                <label class="extra-option">
                  <input type="checkbox" data-extra data-price="850" data-label="Second removable battery">
                  <span class="extra-check">
                    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="m3 8 3 3 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                  </span>
                  <span class="extra-copy">
                    <strong>Second removable battery</strong>
                    <span>+ €850</span>
                  </span>
                </label>
              </div>
            </fieldset>

            <div class="config-summary" aria-live="polite">
              <div class="summary-copy">
                <span>Your selection</span>
                <strong id="summaryVariant">Lumen One · Forest green</strong>
                <small id="summaryExtras">Rear cargo rails included</small>
              </div>
              <div class="summary-total">
                <span>Estimated total</span>
                <strong id="configTotal">€4,250</strong>
              </div>
            </div>

            <div class="config-actions">
              <button class="btn btn-outline" id="saveBuild" type="button">Save this build</button>
              <button class="btn btn-dark" type="button" data-open-dialog>
                Continue with this build
                <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
                  <path d="M3 9h12M10.5 4.5 15 9l-4.5 4.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </button>
            </div>
            <p class="config-note">Estimate includes Danish VAT. Your final quote is confirmed after a free fit consultation.</p>
          </div>
        </div>
      </div>
    </section>

    <section class="story" id="workshop" aria-labelledby="storyTitle">
      <div class="container story-grid">
        <figure class="workshop-frame reveal">
          <svg viewBox="0 0 900 720" role="img" aria-labelledby="workshopTitle workshopDescription">
            <title id="workshopTitle">Inside the Lumen workshop in Copenhagen</title>
            <desc id="workshopDescription">A warm illustrated workshop with a bicycle frame on a bench, hand tools, a city window and a work lamp.</desc>
            <defs>
              <linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stop-color="#d8e6e3"/>
                <stop offset="1" stop-color="#f0d9b4"/>
              </linearGradient>
              <linearGradient id="wallGradient" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0" stop-color="#d7c7a8"/>
                <stop offset="1" stop-color="#bda982"/>
              </linearGradient>
              <pattern id="pegHoles" width="22" height="22" patternUnits="userSpaceOnUse">
                <circle cx="5" cy="5" r="2" fill="#8f7e61" opacity="0.55"/>
              </pattern>
              <filter id="lampGlow" x="-100%" y="-100%" width="300%" height="300%">
                <feGaussianBlur stdDeviation="8"/>
              </filter>
              <filter id="workshopShadow" x="-30%" y="-30%" width="160%" height="160%">
                <feDropShadow dx="0" dy="10" stdDeviation="8" flood-color="#5d4c36" flood-opacity="0.2"/>
              </filter>
            </defs>

            <rect width="900" height="720" fill="url(#wallGradient)"/>
            <rect x="42" y="42" width="510" height="324" rx="5" fill="#eee7d7"/>
            <rect x="53" y="53" width="488" height="302" fill="url(#skyGradient)"/>
            <path d="M53 285h94v-44l24-20 25 20v44h55v-67h40v67h75v-36l32-24 31 24v36h84v70H53Z" fill="#9da89e" opacity="0.75"/>
            <path d="M53 321h488v34H53Z" fill="#71867d"/>
            <path d="M97 240h28v-52h8v52M363 218h7v-66h7v66" fill="#6d7b73" opacity="0.7"/>
            <path d="M299 54v301M53 212h488" stroke="#eee7d7" stroke-width="10"/>

            <rect x="606" y="54" width="246" height="330" rx="5" fill="#a58e69"/>
            <rect x="616" y="64" width="226" height="310" fill="url(#pegHoles)"/>
            <g fill="none" stroke="#34443e" stroke-width="7" stroke-linecap="round" stroke-linejoin="round">
              <path d="M657 109h36v62h-36zM675 171v30"/>
              <path d="M725 99v66M710 118h30M710 145h30"/>
              <path d="M789 104c19 11 26 36 15 57-10 19-35 25-51 12 20-4 31-17 31-36 0-12-2-24 5-33Z"/>
              <path d="M651 249c18-19 44-18 59 0l-8 48h-43Z"/>
            </g>
            <g fill="#d7d0be" stroke="#34443e" stroke-width="4">
              <circle cx="675" cy="111" r="6"/>
              <circle cx="725" cy="108" r="7"/>
              <circle cx="786" cy="112" r="7"/>
            </g>

            <g transform="translate(642 249) rotate(-3)">
              <rect width="167" height="97" fill="#d0c3a8" stroke="#8a7b62" stroke-width="3"/>
              <text x="17" y="27" fill="#31413a" font-family="Arial, sans-serif" font-size="13" font-weight="700" letter-spacing="2">LUMEN / 01</text>
              <path d="M17 43h128M17 56h102M17 69h116M17 82h82" stroke="#897b64" stroke-width="2" opacity="0.7"/>
            </g>

            <rect x="0" y="500" width="900" height="220" fill="#8d7757"/>
            <path d="M0 516h900" stroke="#c4a982" stroke-width="13"/>
            <path d="M0 525h900" stroke="#725f47" stroke-width="7"/>

            <g filter="url(#workshopShadow)">
              <circle cx="195" cy="478" r="102" fill="none" stroke="#293630" stroke-width="10"/>
              <circle cx="515" cy="478" r="102" fill="none" stroke="#293630" stroke-width="10"/>
              <circle cx="195" cy="478" r="83" fill="none" stroke="#9aa49e" stroke-width="2"/>
              <circle cx="515" cy="478" r="83" fill="none" stroke="#9aa49e" stroke-width="2"/>
              <path d="M195 478 333 478 291 279 425 300 447 360 333 478" fill="none" stroke="#315848" stroke-width="15" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M291 279 277 243M425 300 419 260 445 246" fill="none" stroke="#28342f" stroke-width="8" stroke-linecap="round"/>
              <path d="M250 241h56" stroke="#a66e48" stroke-width="10" stroke-linecap="round"/>
            </g>

            <path d="M575 349c-44 24-76 49-99 80" fill="none" stroke="#263a33" stroke-width="38" stroke-linecap="round"/>
            <path d="M476 429c-7 8-13 20-10 30 3 11 19 13 29 7l23-16-13-28Z" fill="#b97b55"/>
            <path d="m478 430-28 24" stroke="#4e5a55" stroke-width="11" stroke-linecap="round"/>
            <circle cx="451" cy="451" r="9" fill="#f7d27a"/>

            <g fill="#ffc666">
              <circle cx="442" cy="443" r="4"/>
              <circle cx="431" cy="429" r="3"/>
              <circle cx="435" cy="462" r="2.5"/>
              <circle cx="418" cy="450" r="2"/>
              <circle cx="459" cy="426" r="2.5"/>
            </g>

            <path d="M710 0v225c0 24-18 42-42 42h-88" fill="none" stroke="#2b3732" stroke-width="8"/>
            <path d="M541 259h86l-16 45h-54Z" fill="#34463e"/>
            <path d="M584 304v56" stroke="#34463e" stroke-width="6"/>
            <ellipse cx="584" cy="350" rx="40" ry="15" fill="#c7a968" opacity="0.28" filter="url(#lampGlow)"/>
            <ellipse cx="584" cy="350" rx="25" ry="8" fill="#f3d184" opacity="0.55"/>

            <path d="M69 510v120M221 510v120" stroke="#5d4d39" stroke-width="15"/>
            <path d="M58 628h145" stroke="#5d4d39" stroke-width="12" stroke-linecap="round"/>
            <path d="M58 628 41 698M202 628l20 70" stroke="#5d4d39" stroke-width="12" stroke-linecap="round"/>

            <g transform="translate(65 520)">
              <rect x="0" y="0" width="132" height="27" rx="5" fill="#2b3933"/>
              <rect x="8" y="6" width="116" height="6" rx="3" fill="#d6b978"/>
              <rect x="8" y="16" width="85" height="4" rx="2" fill="#a89778"/>
            </g>
          </svg>
          <figcaption class="workshop-caption">
            <div>
              <span>Inside the workshop</span>
              <strong>Refshaleøen · Copenhagen</strong>
            </div>
            <b>55°41' N / 12°36' E</b>
          </figcaption>
        </figure>

        <div class="story-copy reveal reveal-delay">
          <span class="eyebrow">Made, not manufactured</span>
          <h2 class="section-title" id="storyTitle">One pair of hands. <em>One bike at a time.</em></h2>
          <p>
            Your Lumen starts as a drawing, a conversation and a set of measurements. From there, one builder takes ownership of your frame through welding, finishing, assembly and the final road test.
          </p>
          <div class="material-list">
            <div class="material-item">
              <span>01</span>
              <div>
                <strong>Custom-drawn 6061 aluminium</strong>
                <p>Light enough to lift, stiff enough to carry, and shaped around your proportions rather than a size chart.</p>
              </div>
            </div>
            <div class="material-item">
              <span>02</span>
              <div>
                <strong>Serviceable by design</strong>
                <p>Standard connectors, accessible cable routes and replacement parts chosen for long-term ownership.</p>
              </div>
            </div>
            <div class="material-item">
              <span>03</span>
              <div>
                <strong>Finished and tested by hand</strong>
                <p>Every weld is dressed, every bearing checked, and every completed bike loaded and ridden before handover.</p>
              </div>
            </div>
          </div>
          <a class="text-link" href="#visit">
            Visit the workshop
            <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
              <path d="M3 9h12M10.5 4.5 15 9l-4.5 4.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </a>
        </div>
      </div>
    </section>

    <section class="features" aria-labelledby="featuresTitle">
      <div class="container">
        <div class="features-head reveal">
          <div>
            <span class="eyebrow">Quietly capable</span>
            <h2 class="section-title" id="featuresTitle">Every detail has a <em>reason.</em></h2>
          </div>
          <p>
            No novelty parts. No disposable design. Just considered components, weatherproof details and a fit that stays comfortable on the long way home.
          </p>
        </div>

        <div class="feature-grid">
          <article class="feature-card feature-card--accent reveal">
            <div class="feature-icon">
              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path d="M4 8.5 12 4l8 4.5v8L12 21l-8-4.5v-8Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
                <path d="m4.5 8.5 7.5 4 7.5-4M12 12.5V21" stroke="currentColor" stroke-width="1.5"/>
              </svg>
            </div>
            <h3>Cargo that stays composed</h3>
            <p>Low-loading rails and adaptable mounting points keep weight low and predictable, even on a wet cobbled street.</p>
          </article>

          <article class="feature-card reveal">
            <div class="feature-icon">
              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path d="M5 6h14M5 12h14M5 18h14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                <circle cx="9" cy="6" r="2" fill="#f4f0e7" stroke="currentColor" stroke-width="1.5"/>
                <circle cx="15" cy="12" r="2" fill="#f4f0e7" stroke="currentColor" stroke-width="1.5"/>
                <circle cx="10" cy="18" r="2" fill="#f4f0e7" stroke="currentColor" stroke-width="1.5"/>
              </svg>
            </div>
            <h3>Geometry made personal</h3>
            <p>Stem, saddle and bar position are set to your reach, comfort and the size of the people riding with you.</p>
          </article>

          <article class="feature-card reveal">
            <div class="feature-icon">
              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="1.5"/>
                <circle cx="12" cy="12" r="2" stroke="currentColor" stroke-width="1.5"/>
                <path d="m12 4 2 6-2 2-2-2 2-6ZM20 12l-6 2-2-2 2-2 6 2ZM12 20l-2-6 2-2 2 2-2 6ZM4 12l6-2 2 2-2 2-6-2Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
              </svg>
            </div>
            <h3>Quiet, clean drivetrains</h3>
            <p>Full chain guards, sealed bearings and low-maintenance belt options keep your weekly miles feeling effortless.</p>
          </article>

          <article class="feature-card reveal">
            <div class="feature-icon">
              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path d="M12 3 20 6v6c0 4.8-3.2 7.8-8 9-4.8-1.2-8-4.2-8-9V6l8-3Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
                <path d="M8.5 12 11 14.5 16 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <h3>Visible at every hour</h3>
            <p>Integrated front and rear lights, reflectors and a clear bell make your intentions unmistakable in city traffic.</p>
          </article>

          <article class="feature-card reveal">
            <div class="feature-icon">
              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path d="M14.7 6.3a4.5 4.5 0 0 0-6 6L3.8 17a2.2 2.2 0 0 0 3.1 3.1l4.7-4.7a4.5 4.5 0 0 0 6-6l-3 3-3-3 3-3Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <h3>Kept working</h3>
            <p>Wear parts are standard sizes, major assemblies are accessible, and our workshop keeps a record of your build.</p>
          </article>

          <article class="feature-card reveal">
            <div class="feature-icon">
              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <circle cx="12" cy="7" r="3" stroke="currentColor" stroke-width="1.5"/>
                <path d="M6 21v-3a6 6 0 0 1 12 0v3M4 11h4M16 11h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
              </svg>
            </div>
            <h3>A fit guarantee</h3>
            <p>If the fit is not right in the first 90 days, we adjust it at no charge. Your body gets a say, too.</p>
          </article>
        </div>
      </div>
    </section>

    <section class="process" aria-labelledby="processTitle">
      <div class="container">
        <div class="process-head reveal">
          <div>
            <span class="eyebrow">From conversation to first ride</span>
            <h2 class="section-title" id="processTitle">A simple process. <em>Carefully made.</em></h2>
          </div>
          <p>
            You will always know what is happening, what comes next and what it costs. A single builder remains responsible for your bike from first sketch to final adjustment.
          </p>
        </div>

        <div class="process-grid">
          <article class="process-step reveal">
            <div class="step-number">01</div>
            <h3>Your week</h3>
            <p>Tell us your routes, cargo, passengers and the compromises you no longer want to make.</p>
          </article>
          <article class="process-step reveal reveal-delay">
            <div class="step-number">02</div>
            <h3>Your drawing</h3>
            <p>We draw the geometry and carry system, then agree every component and final price with you.</p>
          </article>
          <article class="process-step reveal">
            <div class="step-number">03</div>
            <h3>Our workshop</h3>
            <p>Your frame is cut, welded, finished and assembled over eight to ten patient weeks.</p>
          </article>
          <article class="process-step reveal reveal-delay">
            <div class="step-number">04</div>
            <h3>Your first ride</h3>
            <p>We adjust the bike with you, load it with your cargo and hand over a bike that feels like yours.</p>
          </article>
        </div>
      </div>
    </section>

    <section class="owner-story" aria-label="Customer story">
      <div class="quote-panel reveal">
        <div>
          <div class="stars" aria-label="Five out of five stars">★★★★★</div>
          <blockquote>“I stopped planning the week around what the car could carry. The Lumen took the school run, the market and half the office with <em>one calm ride.</em>”</blockquote>
        </div>
        <div class="reviewer">
          <span class="reviewer-avatar">MK</span>
          <div>
            <strong>Maria K.</strong>
            <span>Lumen One owner · Vesterbro</span>
          </div>
        </div>
      </div>

      <aside class="owner-proof reveal reveal-delay">
        <span class="owner-proof-label">The Copenhagen standard</span>
        <p class="rating-number">4.9<span>/ 5</span></p>
        <div class="stars" aria-label="Five out of five stars">★★★★★</div>
        <dl class="proof-list">
          <div>
            <dt>Local riders</dt>
            <dd>126 families</dd>
          </div>
          <div>
            <dt>Workshop rating</dt>
            <dd>4.9 / 5</dd>
          </div>
          <div>
            <dt>Would recommend</dt>
            <dd>98%</dd>
          </div>
          <div>
            <dt>Average build time</dt>
            <dd>8.4 weeks</dd>
          </div>
        </dl>
        <div class="guarantee-note">
          <strong>The Lumen build guarantee</strong>
          <p>Five years on the frame, two on components, and a 90-day fit adjustment promise. If something is not right, we make it right.</p>
        </div>
      </aside>
    </section>

    <section class="faq" id="faq" aria-labelledby="faqTitle">
      <div class="container faq-grid">
        <div class="faq-intro reveal">
          <span class="eyebrow">Before you ask</span>
          <h2 class="section-title" id="faqTitle">Useful answers, <em>plainly put.</em></h2>
          <p>
            Still deciding? Bring your route and your questions to the workshop. There is no sales script and no obligation.
          </p>
          <button class="text-link" type="button" data-open-dialog>
            Ask a builder
            <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
              <path d="M3 9h12M10.5 4.5 15 9l-4.5 4.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>

        <div class="faq-list reveal reveal-delay">
          <details class="faq-item" open>
            <summary>
              How long does a custom build take?
              <span class="faq-plus" aria-hidden="true"></span>
            </summary>
            <div class="faq-answer">
              Most bikes take eight to ten weeks from approved design to collection. Complex cargo systems or a second battery can add two to three weeks. You receive a workshop date before the build begins, and we will never move it without speaking to you.
            </div>
          </details>

          <details class="faq-item">
            <summary>
              Can you carry children or heavy work cargo?
              <span class="faq-plus" aria-hidden="true"></span>
            </summary>
            <div class="faq-answer">
              Yes. The Lumen One is designed for up to 180 kg on the rear cargo area and can be fitted with one or two certified child seats. For tools, deliveries or unusual loads, we design the mounting points and reinforcement around the exact work.
            </div>
          </details>

          <details class="faq-item">
            <summary>
              What is included in the price?
              <span class="faq-plus" aria-hidden="true"></span>
            </summary>
            <div class="faq-answer">
              Every price includes the custom frame, hand finish, wheels, transmission, brakes, lights, fenders, rack or deck as specified, assembly, workshop test ride and a full handover fitting. VAT and Danish registration are included. Accessories are shown separately.
            </div>
          </details>

          <details class="faq-item">
            <summary>
              How does the reservation and payment work?
              <span class="faq-plus" aria-hidden="true"></span>
            </summary>
            <div class="faq-answer">
              A €500 reservation holds a build slot and is deducted from the final price. The balance is due when the bike is ready for handover. You receive a written specification and final price before anything is committed, and you can change non-structural details during the build.
            </div>
          </details>

          <details class="faq-item">
            <summary>
              What happens after I collect the bike?
              <span class="faq-plus" aria-hidden="true"></span>
            </summary>
            <div class="faq-answer">
              Your build record, serial number and component list stay on file at the workshop. We offer a complimentary adjustment within 90 days, a five-year frame warranty, a two-year component warranty, and priority workshop support for the life of the bike.
            </div>
          </details>

          <details class="faq-item">
            <summary>
              What range does the electric version have?
              <span class="faq-plus" aria-hidden="true"></span>
            </summary>
            <div class="faq-answer">
              The removable 650 Wh battery is rated for approximately 45–90 km depending on load, hills, weather and assist level. We calculate a realistic range for your usual route and size the battery accordingly.
            </div>
          </details>
        </div>
      </div>
    </section>

    <section class="visit" id="visit" aria-labelledby="visitTitle">
      <div class="container reveal">
        <span class="eyebrow eyebrow--light">Come and see the bikes</span>
        <h2 id="visitTitle">Ready to carry <em>more?</em></h2>
        <p>
          Book a 30-minute fit and test ride at the workshop. Bring your route, your cargo and your questions. We will sketch a bike around your life — with no obligation to order.
        </p>
        <div class="visit-actions">
          <button class="btn btn-accent" type="button" data-open-dialog>
            Book a fit &amp; test ride
            <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
              <path d="M3 9h12M10.5 4.5 15 9l-4.5 4.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <a class="btn btn-outline-light" href="#configure">Build your configuration</a>
        </div>
        <div class="visit-details">
          <span>
            <svg viewBox="0 0 18 18" fill="none" aria-hidden="true"><path d="M9 16s5-4.3 5-9a5 5 0 1 0-10 0c0 4.7 5 9 5 9Z" stroke="currentColor" stroke-width="1.4"/><circle cx="9" cy="7" r="1.8" stroke="currentColor" stroke-width="1.4"/></svg>
            Refshaleøen, Copenhagen
          </span>
          <span>
            <svg viewBox="0 0 18 18" fill="none" aria-hidden="true"><circle cx="9" cy="9" r="6.5" stroke="currentColor" stroke-width="1.4"/><path d="M9 5v4l3 2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
            Tuesday–Saturday, 09:00–17:00
          </span>
          <span>
            <svg viewBox="0 0 18 18" fill="none" aria-hidden="true"><rect x="2.5" y="4" width="13" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><path d="m3 6 6 5 6-5" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
            hello@lumencycles.dk
          </span>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-brand">
          <a class="brand" href="#top" aria-label="Lumen Cycles home">
            <svg class="brand-mark" viewBox="0 0 40 40" fill="none" aria-hidden="true">
              <circle cx="20" cy="20" r="18.5" stroke="currentColor" stroke-width="1.5"/>
              <path d="M20 7.5v7M10.7 12.1l5.1 5.1M29.3 12.1l-5.1 5.1M20 25.5v7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              <circle cx="20" cy="20" r="3.7" fill="#c85e3d"/>
            </svg>
            <span class="brand-type">
              <strong>LUMEN</strong>
              <small>CYCLES · COPENHAGEN</small>
            </span>
          </a>
          <p>Made-to-order cargo bikes for the distance between home and everything else. Designed, built and repaired in Copenhagen.</p>
        </div>

        <div class="footer-column">
          <h3>Bikes</h3>
          <a href="#bikes">Lumen One</a>
          <a href="#bikes">Lumen City</a>
          <a href="#configure">Build estimator</a>
          <a href="#visit">Test rides</a>
        </div>

        <div class="footer-column">
          <h3>Ownership</h3>
          <a href="#faq">Delivery</a>
          <a href="#faq">Warranty</a>
          <a href="#faq">Service</a>
          <a href="#faq">Questions</a>
        </div>

        <div class="footer-column">
          <h3>Workshop</h3>
          <span>Refshaleøen</span>
          <span>Copenhagen, Denmark</span>
          <span>Tue–Sat, 09–17</span>
          <span>hello@lumencycles.dk</span>
        </div>
      </div>

      <div class="footer-bottom">
        <span>© <span id="currentYear">2025</span> Lumen Cycles ApS · CVR 41 28 17 09</span>
        <div class="footer-bottom-links">
          <span>No cookies. No trackers.</span>
          <a href="#top">Back to top ↑</a>
        </div>
      </div>
    </div>
  </footer>

  <dialog id="buildDialog" aria-labelledby="dialogTitle">
    <div class="dialog-inner">
      <button class="dialog-close" id="dialogClose" type="button" aria-label="Close dialog">
        <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
          <path d="m3 3 10 10M13 3 3 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
      </button>

      <div id="formView">
        <span class="eyebrow">Start a conversation</span>
        <h2 class="dialog-title" id="dialogTitle">Tell us what you carry.</h2>
        <p class="dialog-copy">
          Share a little about your routine and the bike you have in mind. A builder will review it and reply with useful next steps within one working day.
        </p>

        <div class="modal-build">
          <div>
            <span>Selected build</span>
            <strong id="modalBuildName">Lumen One · Forest green</strong>
          </div>
          <b id="modalBuildPrice">€4,250</b>
        </div>

        <form id="buildForm">
          <div class="form-grid">
            <div class="form-field">
              <label for="customerName">Your name</label>
              <input id="customerName" name="name" type="text" autocomplete="name" required placeholder="First and last name">
            </div>
            <div class="form-field">
              <label for="customerEmail">Email address</label>
              <input id="customerEmail" name="email" type="email" autocomplete="email" required placeholder="you@example.com">
            </div>
            <div class="form-field">
              <label for="customerPostcode">Postcode / district</label>
              <input id="customerPostcode" name="postcode" type="text" autocomplete="postal-code" placeholder="e.g. 2200 København N">
            </div>
            <div class="form-field">
              <label for="customerUse">Primary use</label>
              <select id="customerUse" name="use">
                <option>Everyday city riding</option>
                <option>Children and school runs</option>
                <option>Work and tools</option>
                <option>Deliveries and business</option>
                <option>Leisure and touring</option>
                <option>Something else</option>
              </select>
            </div>
            <div class="form-field form-field--full">
              <label for="customerMessage">What should your bike make possible?</label>
              <textarea id="customerMessage" name="message" placeholder="Tell us about your routes, cargo, passengers or the problem you want to solve."></textarea>
            </div>
          </div>

          <label class="consent">
            <input type="checkbox" required>
            <span>I agree that Lumen Cycles may use these details to reply to my enquiry. Nothing is added to a marketing list.</span>
          </label>

          <button class="btn btn-accent form-submit" type="submit">
            Request my build slot
            <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
              <path d="M3 9h12M10.5 4.5 15 9l-4.5 4.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <p class="form-footnote">No payment is due today. We will confirm the next step and any workshop fee before booking.</p>
        </form>
      </div>

      <div class="success-view" id="successView" hidden>
        <div class="success-icon">
          <svg viewBox="0 0 28 28" fill="none" aria-hidden="true">
            <path d="m6 14 5 5L22 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <h2>Your build brief is ready.</h2>
        <p id="successMessage">Thanks. We have prepared your request and will be in touch within one working day.</p>
        <button class="btn btn-dark" type="button" id="successClose">Back to the bikes</button>
      </div>
    </div>
  </dialog>

  <div class="toast" id="toast" role="status" aria-live="polite">
    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
      <path d="m3 9 4 4 8-8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    <span id="toastText">Build saved to this device.</span>
  </div>

  <script>
    (() => {
      const money = new Intl.NumberFormat("en-IE", {
        style: "currency",
        currency: "EUR",
        maximumFractionDigits: 0
      });

      const variants = {
        one: {
          label: "Lumen One",
          sub: "Longtail · Everyday cargo system",
          base: 4250,
          code: "01"
        },
        plus: {
          label: "Lumen One +",
          sub: "Cargo Plus · Reinforced low loader",
          base: 4750,
          code: "01P"
        },
        electric: {
          label: "Lumen Electric",
          sub: "E-One · Quiet belt drive",
          base: 5350,
          code: "01E"
        }
      };

      const colors = {
        forest: { name: "Forest green", hex: "#315848" },
        ember: { name: "Ember red", hex: "#a9573f" },
        sand: { name: "Warm sand", hex: "#c8b998" },
        ink: { name: "Midnight ink", hex: "#252b29" },
        steel: { name: "Coastal steel", hex: "#71847a" }
      };

      const header = document.getElementById("siteHeader");
      const menuToggle = document.getElementById("menuToggle");
      const mobileMenu = document.getElementById("mobileMenu");
      const bikeStage = document.getElementById("bikeStage");
      const stageModel = document.getElementById("stageModel");
      const stageSub = document.getElementById("stageSub");
      const heroColorName = document.getElementById("heroColorName");
      const configColorName = document.getElementById("configColorName");
      const heroPrice = document.getElementById("heroPrice");
      const configTotal = document.getElementById("configTotal");
      const summaryVariant = document.getElementById("summaryVariant");
      const summaryExtras = document.getElementById("summaryExtras");
      const configCode = document.getElementById("configCode");
      const modalBuildName = document.getElementById("modalBuildName");
      const modalBuildPrice = document.getElementById("modalBuildPrice");
      const saveBuild = document.getElementById("saveBuild");
      const toast = document.getElementById("toast");
      const toastText = document.getElementById("toastText");
      const dialog = document.getElementById("buildDialog");
      const dialogClose = document.getElementById("dialogClose");
      const formView = document.getElementById("formView");
      const successView = document.getElementById("successView");
      const successClose = document.getElementById("successClose");
      const buildForm = document.getElementById("buildForm");
      const successMessage = document.getElementById("successMessage");

      let currentState = getCurrentState();
      let toastTimer;

      function getCurrentState() {
        const variant = document.querySelector('input[name="variant"]:checked')?.value || "one";
        const color = document.querySelector('input[name="frameColor"]:checked')?.value || "forest";
        const extras = Array.from(document.querySelectorAll("[data-extra]:checked"));
        const extraTotal = extras.reduce((sum, item) => sum + Number(item.dataset.price || 0), 0);
        const total = variants[variant].base + extraTotal;

        return {
          variant,
          color,
          extraTotal,
          total,
          extras: extras.map(item => item.dataset.label)
        };
      }

      function updateBuild() {
        currentState = getCurrentState();
        const variant = variants[currentState.variant];
        const color = colors[currentState.color];
        const extraText = currentState.extras.length
          ? currentState.extras.join(" · ")
          : "Rear cargo rails included";

        bikeStage.style.setProperty("--bike-frame", color.hex);
        stageModel.textContent = variant.label;
        stageSub.textContent = variant.sub;
        heroColorName.textContent = color.name;
        configColorName.textContent = color.name;
        heroPrice.textContent = money.format(variant.base);
        configTotal.textContent = money.format(currentState.total);
        summaryVariant.textContent = `${variant.label} · ${color.name}`;
        summaryExtras.textContent = extraText;
        configCode.textContent = `LC-${variant.code}-${currentState.color.slice(0, 3).toUpperCase()}`;
        modalBuildName.textContent = `${variant.label} · ${color.name}`;
        modalBuildPrice.textContent = money.format(currentState.total);

        document.querySelectorAll("[data-color]").forEach(button => {
          button.setAttribute("aria-pressed", String(button.dataset.color === currentState.color));
        });
      }

      function selectColor(color) {
        document.querySelectorAll('input[name="frameColor"]').forEach(input => {
          input.checked = input.value === color;
        });
        updateBuild();
      }

      document.querySelectorAll("[data-color]").forEach(button => {
        button.addEventListener("click", () => selectColor(button.dataset.color));
      });

      document.querySelectorAll('input[name="variant"], input[name="frameColor"], [data-extra]').forEach(input => {
        input.addEventListener("change", updateBuild);
      });

      function showToast(message) {
        toastText.textContent = message;
        toast.classList.add("visible");
        clearTimeout(toastTimer);
        toastTimer = setTimeout(() => toast.classList.remove("visible"), 2800);
      }

      saveBuild.addEventListener("click", () => {
        try {
          localStorage.setItem("lumen-saved-build", JSON.stringify({
            ...currentState,
            savedAt: new Date().toISOString()
          }));
          showToast("Your build has been saved on this device.");
        } catch (error) {
          showToast("Your build is ready — we could not save it locally.");
        }
      });

      function openDialog() {
        updateBuild();
        formView.hidden = false;
        successView.hidden = true;
        if (typeof dialog.showModal === "function") {
          dialog.showModal();
        } else {
          dialog.setAttribute("open", "");
        }
        document.body.classList.add("menu-open");
        setTimeout(() => document.getElementById("customerName").focus(), 80);
      }

      function closeDialog() {
        if (typeof dialog.close === "function") {
          dialog.close();
        } else {
          dialog.removeAttribute("open");
        }
        document.body.classList.remove("menu-open");
      }

      document.querySelectorAll("[data-open-dialog]").forEach(button => {
        button.addEventListener("click", openDialog);
      });

      dialogClose.addEventListener("click", closeDialog);
      successClose.addEventListener("click", closeDialog);

      dialog.addEventListener("close", () => {
        document.body.classList.remove("menu-open");
      });

      dialog.addEventListener("click", event => {
        const rect = dialog.getBoundingClientRect();
        const outside = event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom;
        if (outside) closeDialog();
      });

      buildForm.addEventListener("submit", event => {
        event.preventDefault();

        const formData = new FormData(buildForm);
        const firstName = String(formData.get("name") || "").trim().split(/\s+/)[0] || "there";

        const request = {
          ...currentState,
          name: formData.get("name"),
          email: formData.get("email"),
          postcode: formData.get("postcode"),
          use: formData.get("use"),
          message: formData.get("message"),
          submittedAt: new Date().toISOString()
        };

        try {
          localStorage.setItem("lumen-last-request", JSON.stringify(request));
        } catch (error) {
          // The page remains fully functional if browser storage is unavailable.
        }

        successMessage.textContent = `Thanks, ${firstName}. Your ${variants[currentState.variant].label} brief is prepared. A builder will be in touch within one working day.`;
        formView.hidden = true;
        successView.hidden = false;
        buildForm.reset();
      });

      function setMenu(open) {
        menuToggle.setAttribute("aria-expanded", String(open));
        menuToggle.setAttribute("aria-label", open ? "Close menu" : "Open menu");
        mobileMenu.classList.toggle("open", open);
        document.body.classList.toggle("menu-open", open);
      }

      menuToggle.addEventListener("click", () => {
        setMenu(menuToggle.getAttribute("aria-expanded") !== "true");
      });

      mobileMenu.querySelectorAll("a").forEach(link => {
        link.addEventListener("click", () => setMenu(false));
      });

      window.addEventListener("resize", () => {
        if (window.innerWidth > 960) setMenu(false);
      });

      function updateHeader() {
        header.classList.toggle("scrolled", window.scrollY > 10);
      }

      window.addEventListener("scroll", updateHeader, { passive: true });
      updateHeader();

      const revealItems = document.querySelectorAll(".reveal");
      if ("IntersectionObserver" in window) {
        const revealObserver = new IntersectionObserver(entries => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              entry.target.classList.add("is-visible");
              revealObserver.unobserve(entry.target);
            }
          });
        }, { threshold: 0.12, rootMargin: "0px 0px -40px" });

        revealItems.forEach(item => revealObserver.observe(item));
      } else {
        revealItems.forEach(item => item.classList.add("is-visible"));
      }

      document.querySelectorAll(".faq-item").forEach(item => {
        item.addEventListener("toggle", () => {
          if (!item.open) return;
          document.querySelectorAll(".faq-item").forEach(other => {
            if (other !== item) other.open = false;
          });
        });
      });

      document.getElementById("currentYear").textContent = new Date().getFullYear();
      updateBuild();
    })();
  </script>
</body>
</html>

Compare with

MiniMax M3.1 Flash: other attempts