/* laserlabo.be. Visual system: _design/laserlabo-behance.md. Brand blue sampled from the
   original wordmark (assets/Logo.png): #0A56C3. The lit variant is the same hue (215deg),
   lifted so it reads on the dark ground. The lit wordmark is the one glow on the page. */

/* Type: Barlow (headings) has the shapes of licence plates and DIN road signage, so it reads
   like a machine plate without a techno look. Hanken Grotesk carries text, captions and the
   live readouts (tabular figures). Both self-hosted, Google Fonts, OFL. No mono in the UI. */
@font-face { font-family: 'Barlow'; src: url('../assets/fonts/barlow-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../assets/fonts/barlow-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('../assets/fonts/hanken-grotesk-var.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  /* warm graphite ground, light comes from the work itself */
  --bg: #12110F;
  --bg-2: #161512;      /* alternate section band */
  --surface: #1D1B18;   /* tonal layer: secondary buttons, swatches */
  --surface-2: #26231F; /* hover */
  --rule: rgba(236, 232, 225, .10);  /* hairlines between rows */
  --line: #2A2723;      /* machine bed grid */
  --line-2: #3A3630;
  --ink: #ECE8E1;
  --ink-2: #C9C3B9;     /* body text on dark */
  --muted: #9E978C;
  --brand: #0A56C3;
  --neon: #4A8CFF;
  --neon-hi: #A8C7FF;
  --spark: #FF8A3D;
  --l-bg: #F1EEE8;
  --l-surface: #FBFAF7;
  --l-ink: #161411;
  --l-muted: #6B645A;
  --l-rule: rgba(22, 20, 17, .12);
  --r: 4px;
  --display: 'Barlow', 'Arial Narrow', Arial, sans-serif;
  --body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: 13px; --fs-sm: 14px; --fs-base: 17px; --fs-md: 20px;
  --fs-lg: clamp(22px, 2vw, 26px);
  --fs-xl: clamp(26px, 2.4vw, 32px);
  --fs-2xl: clamp(32px, 3.6vw, 48px);
  --fs-3xl: clamp(42px, 5.6vw, 80px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap: calc(1200px + 2 * var(--pad));
  --pad: clamp(20px, 4vw, 40px);
  --header: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 8px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.005em; line-height: 1.08; margin: 0; }
h1, h2 { letter-spacing: -.015em; }
h3 { line-height: 1.2; }
p { margin: 0 0 1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.icon { width: 22px; height: 22px; flex: none; }
.icon-xs { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; margin-left: 4px; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
.light :focus-visible { outline-color: var(--brand); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: var(--r); text-decoration: none; }
.skip:focus { top: 12px; }

/* Lenis (desktop smooth scroll) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ------------------------------------------------------------ buttons (patterns.md) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; min-width: 96px; padding: 0 22px; border: 0; border-radius: 10px;
  font: 600 15px/1 var(--body); letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease-out, box-shadow .15s ease-out, transform .15s ease-out;
}
.btn .icon { width: 16px; height: 16px; }
.btn:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.btn:active { transform: translateY(0) scale(.98); transition-duration: 80ms; }
.btn-primary { background: var(--neon); color: #07101E; box-shadow: 0 1px 0 rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn-primary:hover { background: #5E99FF; transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(74, 140, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn-secondary { background: rgba(255, 255, 255, .08); color: var(--ink); }
.btn-secondary:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); padding: 0 14px; }
.btn-ghost:hover { background: rgba(255, 255, 255, .05); }
.btn-ghost .icon { transition: transform .15s ease-out; }
.btn-ghost:hover .icon { transform: translateX(2px); }
.btn-sm { height: 44px; padding: 0 18px; }
.light .btn-primary { background: var(--brand); color: #fff; }
.light .btn-primary:hover { background: #1463D6; box-shadow: 0 6px 16px -6px rgba(10, 86, 195, .45), inset 0 1px 0 rgba(255, 255, 255, .18); }
.light .btn:focus-visible { outline-color: var(--brand); }
@media (max-width: 767px) { .btn { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active, .btn-ghost:hover .icon { transform: none; } }

/* ------------------------------------------------------------ header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header);
  background: rgba(18, 17, 15, .94); border-bottom: 1px solid var(--rule);
}
.header-in { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; min-height: 44px; color: var(--neon); margin-right: auto; }
.logo-wm { width: 132px; height: auto; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.nav-list a { display: block; padding: 10px 12px; text-decoration: none; color: var(--muted); font-size: 15px; font-weight: 500; border-radius: var(--r); }
.nav-list a:hover { color: var(--ink); }
.nav-toggle { display: none; }
@media (max-width: 899px) {
  .header-in { gap: 10px; }
  .nav { order: 3; }
  .nav-toggle {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    background: rgba(255, 255, 255, .08); border: 0; border-radius: 10px; color: var(--ink); cursor: pointer;
  }
  .nav-close, .nav-toggle[aria-expanded="true"] .nav-open { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-close { display: block; }
  .nav-list {
    position: absolute; top: var(--header); left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--bg-2); padding: 8px var(--pad) 16px;
  }
  .nav-list a { padding: 14px 0; font-size: 17px; color: var(--ink); border-bottom: 1px solid var(--rule); border-radius: 0; }
  .js .nav-list { display: none; }
  .js .nav-list.is-open { display: flex; }
  /* Without JS the menu cannot toggle: hide the button and show the links as a wrapped row. */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .nav-list { position: static; flex-direction: row; flex-wrap: wrap; border: 0; padding: 0; background: none; }
  html:not(.js) .site-header { height: auto; position: static; }
  html:not(.js) .header-in { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  html:not(.js) .nav-list a { padding: 10px 8px; border: 0; font-size: 15px; }
}
html:not(.js) .hero { padding-top: 0; }

/* ------------------------------------------------------------ machine bed (shared) */
.bed {
  position: relative; border: 1px solid var(--line);
  background-color: #0F0E0C;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px;
}
.bed-label { position: absolute; font-size: 12px; color: var(--muted); pointer-events: none; }
.bed-label-br { right: 14px; bottom: 10px; }

.gantry { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gantry::before, .gantry::after { content: ''; position: absolute; top: 0; bottom: 0; width: 3px; background: var(--line-2); }
.gantry::before { left: 0; }
.gantry::after { right: 0; }
.gantry-beam {
  position: absolute; left: 0; right: 0; top: calc(100% - 22px); height: 14px; margin-top: -7px;
  background: linear-gradient(#2B2824, #1D1B18); border-top: 1px solid #45403A; border-bottom: 1px solid #0C0B0A;
  will-change: transform;
}
.gantry-head {
  position: absolute; left: 50%; top: calc(100% - 22px); width: 26px; height: 32px; margin: -16px 0 0 -13px;
  background: linear-gradient(#3A3630, #26231F); border: 1px solid #514B43; border-radius: 3px;
  will-change: transform;
}
.head-dot { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #514B43; }
.head-dot::after {
  content: ''; position: absolute; inset: -9px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 138, 61, .85), rgba(255, 138, 61, 0) 70%);
  transition: opacity .12s;
}
.gantry-head.is-on .head-dot { background: #FFE2C8; }
.gantry-head.is-on .head-dot::after { opacity: 1; }
.sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
.motion .sparks.is-live { display: block; }
.motion .gantry-beam, .motion .gantry-head { top: 0; left: 0; }

/* Live readouts: one quiet caption line in the text face, tabular figures. */
.readout { margin: 0; display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 2px; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums; }
.readout .hud-s { color: var(--ink-2); white-space: pre; }
.hud-g { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ hero */
.hero { position: relative; padding-top: var(--header); }
.hero-pin {
  position: relative; min-height: calc(100svh - var(--header));
  display: flex; flex-direction: column; justify-content: center;
  padding: 32px 0 48px; overflow: hidden;
}
.hero-bed {
  z-index: 1; width: min(1200px, calc(100% - 2 * var(--pad))); margin: 0 auto;
  padding: 56px clamp(16px, 5vw, 80px);
}
.wm-box { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; }
.wm { width: 100%; height: auto; overflow: visible; }
.wm-ghost { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 5; }
.wm-c { fill: none; stroke: var(--neon); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wm-lit {
  fill: url(#wm-lit-fill); stroke: var(--neon-hi); stroke-width: 1.6; stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(74, 140, 255, .95)) drop-shadow(0 0 16px rgba(74, 140, 255, .4));
}
.motion .wm-c { stroke-dasharray: 1000 1000; stroke-dashoffset: 1000; }
.motion .wm-lit { opacity: 0; will-change: opacity; }
/* progress: a hairline along the bottom edge of the bed */
.hud-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; pointer-events: none; }
.hud-bar-fill { display: block; height: 100%; background: var(--neon); transform-origin: 0 50%; }

/* caption under the bed: status and position left, what is on the bed right */
.hero-cap {
  position: relative; z-index: 1; width: min(1200px, calc(100% - 2 * var(--pad))); margin: 12px auto 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px;
}
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.chip-ui + .chip-ui::before { content: '·'; margin-right: 18px; color: var(--line-2); }

.hero-copy { position: relative; z-index: 1; display: grid; gap: 24px; margin-top: clamp(36px, 6vh, 64px); }
.hero h1 { font-size: var(--fs-3xl); line-height: 1.02; max-width: 12em; }
.lead { font-size: var(--fs-md); line-height: 1.5; color: var(--ink-2); max-width: 30em; margin: 0 0 28px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
@media (min-width: 1024px) {
  .hero-copy { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
  .hero h1 { max-width: none; }
}
@media (max-width: 767px) {
  .hero-bed { padding: 44px 14px 40px; }
  .chip-c { display: none; }
  .mat-sheet { aspect-ratio: 5 / 4; max-width: none; }
  .gantry-head { width: 18px; height: 22px; margin: -11px 0 0 -9px; }
  .gantry-beam { height: 10px; margin-top: -5px; }
  .bed { background-size: 32px 32px; }
  .hero-cap { flex-direction: column; }
  .readout { font-size: 13px; }
  .chips { font-size: 13px; }
}

/* ------------------------------------------------------------ sections */
.sec { padding: 72px 0; position: relative; }
.diensten, .werk { background: var(--bg-2); }
@media (min-width: 900px) { .sec { padding: 128px 0; } }
/* Section title: plain, sentence case, one weight step above body; lead beside it on desktop. */
.sec-head { margin-bottom: 40px; display: grid; gap: 14px; }
.sec h2 { font-size: var(--fs-2xl); }
.sec-lead { color: var(--muted); font-size: var(--fs-md); line-height: 1.5; max-width: 32em; margin: 0; }
@media (min-width: 900px) {
  .sec-head { margin-bottom: 64px; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: 64px; align-items: end; }
  .sec-head > .sec-lead { padding-bottom: 4px; }
  .off-grid .sec-head, .contact-grid .sec-head { grid-template-columns: 1fr; }
}
.light { background: var(--l-bg); color: var(--l-ink); }
.light .sec-lead { color: var(--l-muted); }

/* ------------------------------------------------------------ material textures */
.tex { background-color: #555; }
.tex-hout {
  background-color: #C9A273;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.11' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.21 0 0 0 0 0.09 0 0 0 1.5 -0.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(170deg, #D6B386, #C29667 60%, #B98C5E);
  background-size: 100% 100%, 100% 100%;
}
.tex-leder {
  background-color: #6B3E24;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.06 0 0 0 0 0.03 0 0 0 1.1 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 30% 20%, #87522F, #5E331C 70%, #4A2715);
  background-size: 260px 260px, 100% 100%;
}
.tex-plexi {
  background-color: rgba(150, 190, 255, .07);
  background-image:
    linear-gradient(125deg, rgba(220, 235, 255, .16) 0%, rgba(220, 235, 255, .03) 38%, rgba(255, 255, 255, .13) 52%, rgba(220, 235, 255, .02) 66%, rgba(220, 235, 255, .08) 100%);
  box-shadow: inset 0 0 0 1px rgba(200, 225, 255, .35);
}
.tex-alu {
  background-color: #A9B1B8;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .09) 0 1px, rgba(0, 0, 0, .05) 1px 2px, rgba(255, 255, 255, 0) 2px 3px),
    linear-gradient(105deg, #8C959D, #CDD3D8 32%, #99A2AA 58%, #D3D9DE 84%, #A1A9B0);
}

/* plate engraving + kerf colours per material (the plate is engraved, so caps belong here) */
.pl-num { font: 600 124px var(--display); }
.pl-sub { font: 500 16px var(--display); letter-spacing: 5px; }
.pl-engr-hout { fill: #4A2B14; opacity: .82; }
.pl-engr-leder { fill: #2B160B; opacity: .8; }
.pl-engr-plexi { fill: rgba(235, 243, 255, .78); }
.pl-engr-alu { fill: #FFFFFF; }
.pl-kerf { fill: none; stroke-width: 2.2; }
.pl-kerf-hout { stroke: #3A200D; }
.pl-kerf-leder { stroke: #1E0F07; }
.pl-kerf-plexi { stroke: rgba(225, 238, 255, .95); }
.pl-kerf-alu { stroke: #fff; stroke-width: 1.6; }

/* ------------------------------------------------------------ materials: readable list (default) */
.mat-list { display: grid; gap: 0; }
.mat { display: grid; gap: 24px; padding: 32px 0; }
.mat + .mat { border-top: 1px solid var(--rule); }
.mat h3 { font-size: var(--fs-xl); }
.mat-tech { margin: 4px 0 18px; color: var(--muted); font-size: 15px; }
.mat-kop { font-size: var(--fs-md); line-height: 1.4; color: var(--ink); margin-bottom: 10px; }
.mat-text > p:not(.mat-tech):not(.mat-kop) { color: var(--ink-2); }
/* Spec rows: plain two-column table on hairlines. */
.specs { margin: 20px 0 0; display: grid; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.specs div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; }
.specs div + div { border-top: 1px solid var(--rule); }
.specs dt { font-size: 15px; color: var(--muted); }
.specs dd { margin: 0; text-align: right; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mat-fig { margin: 0; }
.mat-sheet { position: relative; aspect-ratio: 1; max-width: 420px; overflow: hidden; border-radius: 1px; }
.mat-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mat-beam { position: absolute; inset: 0; border-right: 2px solid var(--neon); opacity: 0; pointer-events: none; }
.stage { display: none; }
@media (min-width: 768px) {
  .mat { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
  .mat-fig { order: 2; }
}

/* ------------------------------------------------------------ materials: pinned laser stage (desktop + motion) */
.is-desk .mat-pin { height: 100vh; display: flex; align-items: center; padding-top: var(--header); }
.is-desk .mat-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.is-desk .mat-list { position: relative; min-height: 440px; margin-top: 40px; }
/* Panel switch is sequenced, never a crossfade: the outgoing panel fades out and moves 8px away
   (up when going forward, down when going back) in .16s; the incoming one starts after .2s. */
.is-desk .mat { position: absolute; inset: 0 0 auto 0; display: block; padding: 0; border: 0; opacity: 0; transform: translateY(-8px); transition: opacity .16s ease-in, transform .16s ease-in; pointer-events: none; }
.is-desk .mat.is-next { transform: translateY(8px); }
.is-desk .mat.is-on { opacity: 1; transform: none; pointer-events: auto; transition: opacity .26s var(--ease) .2s, transform .26s var(--ease) .2s; }
.is-desk .mat-fig { display: none; }
.is-desk .stage { display: block; }
.is-desk .materialen { padding-bottom: 0; }

.st-bed { width: 100%; aspect-ratio: 4 / 3; max-height: calc(100vh - var(--header) - 150px); margin-left: auto; overflow: hidden; }
.st-sheets { position: absolute; top: 11%; height: 78%; aspect-ratio: 1; left: 50%; transform: translateX(-50%); }
.st-sheet { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; }
.st-sheet[data-i="0"] { opacity: 1; }
.st-engr, .st-cut { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st-engr { clip-path: inset(0 0 100% 0); }
.st-path { fill: none; stroke: var(--neon); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1000 1000; stroke-dashoffset: 1000; }
.st-path-engr { stroke: #fff; stroke-width: 1.6; }
.st-hole, .st-piece, .st-slot-piece {
  -webkit-mask: url('../assets/img/plaat-masker.svg') center / 100% 100% no-repeat;
  mask: url('../assets/img/plaat-masker.svg') center / 100% 100% no-repeat;
}
.st-hole { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 40%, #141210, #080706); }
.st-piece { position: absolute; inset: 0; opacity: 0; will-change: transform, opacity; }
.st-piece svg { width: 100%; height: 100%; }
.st-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 12px; }
.st-foot .readout { min-width: 0; }
/* material switch above the bed: plain words, the active one in ink with a rule under it */
.st-steps { list-style: none; margin: 0 0 12px; padding: 0; display: flex; gap: 22px; font-size: 15px; font-weight: 500; color: var(--muted); }
.st-steps li { padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color .16s ease-in, border-color .16s ease-in; }
.st-steps li.is-on { color: var(--ink); border-color: var(--ink); transition: color .26s var(--ease) .2s, border-color .26s var(--ease) .2s; }
.st-bak { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; }
.st-slot { display: grid; justify-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.st-slot-piece { width: 36px; height: 36px; opacity: .14; transform: translateY(-8px); transition: opacity .3s, transform .4s cubic-bezier(.34, 1.4, .64, 1); }
.st-slot.is-full .st-slot-piece { opacity: 1; transform: none; }

/* ------------------------------------------------------------ 3D-printen
   Default (no JS, reduced motion) = end state: part complete and lifted off the bed.
   .motion hides the part; motion.js builds it layer by layer (clip-path from the bottom). */
.pr-grid { display: grid; gap: 40px; }
.pr-text h2 { margin-bottom: 16px; }
.pr-uses { list-style: none; margin: 28px 0 0; padding: 0; }
.pr-uses li { padding: 11px 0; color: var(--ink-2); }
.pr-uses li + li { border-top: 1px solid var(--rule); }
.pr-specs { margin-top: 28px; }
.pr-cta { margin: 24px 0 0; }
.pr-cta .btn { margin-left: -14px; }
.pr-bed { aspect-ratio: 4 / 3; overflow: hidden; }
.pr-base, .pr-part { position: absolute; inset: 0; width: 100%; height: 100%; }
.pr-part { transform: translateY(-6%); will-change: transform, clip-path; }
.pr-ghost { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 4; }
.pr-shadow { fill: rgba(0, 0, 0, .55); opacity: 1; }
.pr-plate { fill: #2E2B27; }
.pr-plate-edge { fill: #1C1A17; }
.pr-body { fill: #8C5A34; }
.pr-detail { fill: none; stroke: #5A3519; stroke-width: 2.2; stroke-linecap: round; }
.motion .pr-part { clip-path: inset(100% 0 0 0); transform: none; }
.motion .pr-shadow { opacity: 0; }
/* the hotend: nozzle tip sits on the point, body above it */
.pr-head { width: 30px; height: 40px; margin: -40px 0 0 -15px; background: linear-gradient(#3A3630, #26231F); }
.pr-head .head-dot { top: auto; bottom: -3px; }
.pr-gantry .gantry-beam { margin-top: -30px; }
.pr-gantry .gantry-head { left: calc(100% - 50px); top: 22%; }
.motion .pr-gantry .gantry-head { left: 0; top: 0; }
.pr-foot { display: grid; gap: 10px; margin-top: 12px; }
.pr-bar { display: block; height: 1px; background: var(--rule); overflow: hidden; }
.pr-bar-fill { display: block; height: 100%; background: var(--neon); transform-origin: 0 50%; }
@media (min-width: 900px) {
  .pr-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
}
.is-desk .printen { padding: 0; }
.is-desk .pr-pin { height: 100vh; display: flex; align-items: center; padding-top: var(--header); }
.is-desk .pr-bed { width: min(100%, calc((100vh - var(--header) - 120px) * 4 / 3)); margin-left: auto; }
.is-desk .pr-foot { width: min(100%, calc((100vh - var(--header) - 120px) * 4 / 3)); margin-left: auto; }

/* ------------------------------------------------------------ touch / narrow + motion (.is-touch, set by motion.js)
   Same pinned, scrubbed stages as desktop, 120vh each, laid out in one column for phones and
   tablets. Sized in svh (fallback vh) so the address bar never pushes a pinned block off screen.
   Materials: one compact panel above the bed (all panels share one grid cell, so the bed does
   not jump between materials); the bed takes the height that is left. */
.is-touch .materialen { padding-bottom: 0; }
.is-touch .mat-pin {
  height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header) + 12px) 0 16px;
}
.is-touch .mat-grid { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.is-touch .mat-list { display: grid; flex: none; }
.is-touch .mat { grid-area: 1 / 1; display: block; padding: 0; border: 0; opacity: 0; transform: translateY(-8px); transition: opacity .16s ease-in, transform .16s ease-in; pointer-events: none; }
.is-touch .mat.is-next { transform: translateY(8px); }
.is-touch .mat.is-on { opacity: 1; transform: none; pointer-events: auto; transition: opacity .26s var(--ease) .2s, transform .26s var(--ease) .2s; }
.is-touch .mat-fig, .is-touch .st-steps { display: none; }
.is-touch .mat h3 { font-size: var(--fs-lg); }
.is-touch .mat-tech { margin: 2px 0 8px; font-size: 14px; }
.is-touch .mat-kop { font-size: 17px; margin-bottom: 6px; }
.is-touch .mat-text > p:not(.mat-tech):not(.mat-kop) { margin: 0; font-size: 15px; line-height: 1.45; }
.is-touch .mat .specs { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 2px 16px; border: 0; }
.is-touch .mat .specs div { padding: 0; border: 0; gap: 6px; }
.is-touch .mat .specs dt, .is-touch .mat .specs dd { font-size: 14px; }
.is-touch .stage { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; }
.is-touch .st-bed { flex: 0 1 auto; min-height: 140px; max-height: calc(100vw - 2 * var(--pad)); }
.is-touch .st-foot { flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.is-touch .st-bak { gap: 10px; }
.is-touch .st-slot-piece { width: 28px; height: 28px; }
/* Landscape phones: too little height for the long text, keep name, technique and specs. */
@media (orientation: landscape) and (max-height: 520px) {
  .is-touch .mat-kop, .is-touch .mat-text > p:not(.mat-tech):not(.mat-kop) { display: none; }
}
/* Hero on short phones (Safari with its toolbars is about 390 x 664): tighten the spacing so
   both buttons stay on screen while the hero is pinned. */
@media (max-height: 760px) {
  .is-touch .hero-pin { padding: 12px 0 16px; }
  .is-touch .hero-bed { padding-top: 32px; padding-bottom: 28px; }
  .is-touch .hero-copy { margin-top: 20px; gap: 16px; }
  .is-touch .hero .lead { margin-bottom: 20px; }
}
/* Printer: the text column stays above it; motion.js pins the block when its bottom reaches the
   bottom of the screen, so it needs a little air under the readout. */
.is-touch .printen { padding-bottom: 0; }
.is-touch .pr-pin { padding-bottom: 20px; }
.is-touch .pr-bed, .is-touch .pr-foot { width: min(100%, calc((100vh - var(--header) - 110px) * 4 / 3)); width: min(100%, calc((100svh - var(--header) - 110px) * 4 / 3)); margin-inline: auto; }

/* ------------------------------------------------------------ diensten */
.dienst-list { list-style: none; margin: 0; padding: 0; display: grid; }
.dienst { display: grid; grid-template-columns: 28px 1fr; gap: 18px; padding: 28px 0; border-top: 1px solid var(--rule); }
.dienst-ico { display: block; padding-top: 2px; color: var(--muted); }
.dienst-ico .icon { width: 24px; height: 24px; }
.dienst h3 { font-size: var(--fs-lg); margin: 0 0 8px; }
.dienst p { color: var(--ink-2); margin: 0; }
.inline-link { color: var(--neon); text-decoration: none; white-space: nowrap; }
.inline-link:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .dienst-list { grid-template-columns: 1fr 1fr; column-gap: 56px; }
}

.feature { display: grid; gap: 32px; padding: clamp(48px, 7vw, 88px) 0; align-items: center; border-top: 1px solid var(--rule); }
.feature h3 { font-size: var(--fs-2xl); margin-bottom: 14px; }
.feature-kop { font-size: var(--fs-md); line-height: 1.4; color: var(--ink); }
.feature-text > p:not(.feature-kop) { color: var(--ink-2); }
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
}

.led { position: relative; }
.led > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.led-photo { position: relative; overflow: hidden; isolation: isolate; background: #050505; border-radius: var(--r); }
.led-photo img { width: 100%; }
.led-neutral, .led-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .32s var(--ease); }
.led-neutral { background: url('../assets/img/led-noe-neutraal.webp') center / 100% 100% no-repeat; }
.led-layer {
  background: var(--led); mix-blend-mode: multiply;
  -webkit-mask: url('../assets/img/led-noe-masker.webp') center / 100% 100% no-repeat;
  mask: url('../assets/img/led-noe-masker.webp') center / 100% 100% no-repeat;
}
.led-note { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.led-chips { border: 0; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.led-chips legend { font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 12px; padding: 0; }
/* colour swatches: real radio controls, so they stay a control (tonal, small radius) */
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  background: var(--surface); color: var(--ink-2); border-radius: 8px; cursor: pointer;
  font: 500 14px/1 var(--body); user-select: none; transition: background-color .15s, color .15s;
}
.chip::after { content: ''; position: absolute; inset: -2px 0; } /* 44px tap target */
.chip:hover { background: var(--surface-2); color: var(--ink); }
.chip .chip-check { display: none; width: 16px; height: 16px; margin-left: -2px; }
.chip-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.chip-blauw { background: #2F6BFF; }
.chip-rood { background: #FF3030; }
.chip-groen { background: #30E070; }
.chip-zachtwit { background: #FFD9A8; }
.chip-felwit { background: #FFFFFF; }

/* ------------------------------------------------------------ werk: photography first, caption under */
.werk-grid { display: grid; gap: 40px 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .werk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .werk-grid { grid-template-columns: repeat(3, 1fr); gap: 48px 28px; } }
.werk-item { margin: 0; }
.werk-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--surface); border-radius: var(--r); }
.werk-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.werk-item:hover .werk-media img { transform: scale(1.02); }
.werk-contain .werk-media { background-color: #070706; }
.werk-contain .werk-media img { object-fit: contain; }
.werk-item figcaption { padding-top: 12px; display: grid; gap: 2px; }
.werk-titel { font-size: 16px; font-weight: 500; color: var(--ink); }
.werk-mat { font-size: var(--fs-sm); color: var(--muted); }
.sk svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sk-alu { fill: none; stroke: #7B848C; stroke-width: 1.2; }
.sk-alu-hole { fill: #1D1B18; stroke: #7B848C; }
.sk-engr path { stroke: #fff; stroke-width: 1.4; fill: none; }
.sk-engr text { fill: #fff; font: 600 22px var(--display); letter-spacing: 1px; }
.sk-engr .sk-small { font: 500 10px var(--display); letter-spacing: 3px; }
.sk-maquette .sk-cut { fill: none; stroke: #3A200D; stroke-width: 1.4; stroke-linejoin: round; }
.sk-num { fill: #3A200D; font: 500 10px var(--display); }
.sk-geschenk { background: radial-gradient(90% 80% at 50% 40%, #1C1A17, #0A0908); }
.sk-plexi { fill: rgba(74, 140, 255, .07); stroke: rgba(150, 190, 255, .85); stroke-width: 1.4; }
.sk-plexi-t { fill: rgba(200, 220, 255, .9); font: 600 30px var(--display); }
.sk-foot { fill: #8E979F; stroke: #B5BCC3; }
@media (prefers-reduced-motion: reduce) { .werk-item:hover .werk-media img { transform: none; } }

/* ------------------------------------------------------------ werkwijze */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px; position: relative; }
.step { position: relative; padding-top: 22px; border-top: 1px solid var(--rule); }
.step-n { display: block; font: 500 var(--fs-xl)/1 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 18px; }
.step h3 { font-size: var(--fs-lg); margin-bottom: 10px; }
.step p { color: var(--ink-2); margin: 0; }
.steps::before {
  content: ''; position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--neon);
  transform-origin: 0 50%; transform: scaleX(1); z-index: 1;
}
.steps-line { display: none; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}

/* ------------------------------------------------------------ offerte (light) */
.off-grid { display: grid; gap: 40px; }
.off-grid .sec-head { margin-bottom: 0; }
.off-facts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 4px; }
.off-facts li { display: flex; align-items: center; gap: 12px; }
.off-facts .icon { color: var(--brand); }
.off-facts a { display: inline-block; padding: 10px 0; font-size: 18px; text-decoration: none; font-weight: 500; }
.off-facts a:hover { text-decoration: underline; }
@media (min-width: 960px) {
  .off-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
}
.form { display: grid; gap: 20px; grid-template-columns: 1fr; padding: 20px; background: var(--l-surface); border-radius: 12px; box-shadow: 0 1px 2px rgba(40, 30, 10, .06), 0 8px 24px -12px rgba(40, 30, 10, .16); }
@media (min-width: 640px) {
  .form { grid-template-columns: 1fr 1fr; padding: 28px; }
  .field-wide { grid-column: 1 / -1; }
}
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-weight: 500; font-size: 15px; }
.opt { color: var(--l-muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; font: 400 16px/1.4 var(--body); color: var(--l-ink);
  background: #F1EEE8; border: 0; border-bottom: 1px solid #8F877B; border-radius: 8px 8px 0 0;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); background: #fff; }
.field input::placeholder, .field textarea::placeholder { color: #857D71; }
.file-note { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0 0; border-top: 1px solid var(--l-rule); }
.file-note .icon { color: var(--l-muted); margin-top: 2px; }
.file-note p { margin: 0; font-size: 15px; color: #3A352E; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-msg { margin: 0; color: var(--l-muted); font-size: 15px; }
.btn-trace { position: relative; }
.trace-svg { position: absolute; left: -5px; top: -5px; width: calc(100% + 10px); height: calc(100% + 10px); overflow: visible; pointer-events: none; }
.trace-svg rect { width: calc(100% - 2px); height: calc(100% - 2px); fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-dasharray: 1000 1000; stroke-dashoffset: 1000; }
.btn-trace.is-tracing .trace-svg rect { animation: trace-btn .9s linear forwards; }
@keyframes trace-btn { to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------ over */
.over-grid { display: grid; gap: 44px; }
.over-text h2 { margin-bottom: 24px; }
.over-text p { color: var(--ink-2); max-width: 36em; }
.over-text a { color: var(--neon); }
.sign { color: var(--muted) !important; font-weight: 500; margin-top: 24px; }
.over-photo { margin: 0 0 28px; }
.over-photo img { width: 100%; border-radius: var(--r); }
.over-photo figcaption { font-size: var(--fs-sm); color: var(--muted); margin-top: 10px; }
.machine { margin: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.machine div { display: grid; grid-template-columns: 130px 1fr; align-items: baseline; gap: 16px; padding: 11px 0; }
.machine div + div { border-top: 1px solid var(--rule); }
.machine dt { font-size: 15px; color: var(--muted); }
.machine dd { margin: 0; font-size: 15px; font-weight: 500; }
.machine a { color: var(--neon); }
@media (min-width: 900px) {
  .over-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 72px; align-items: start; }
}

/* ------------------------------------------------------------ contact (light) */
.contact-grid { display: grid; gap: 8px; }
.contact-list { font-style: normal; display: grid; }
.contact-item {
  display: flex; gap: 16px; align-items: center; padding: 20px 0;
  text-decoration: none; font: 500 var(--fs-lg)/1.25 var(--display); min-width: 0; overflow-wrap: anywhere;
}
.contact-item + .contact-item { border-top: 1px solid var(--l-rule); }
.contact-item .icon { color: var(--l-muted); width: 24px; height: 24px; }
.contact-item:hover { color: var(--brand); }
.ci-k { display: block; font: 400 var(--fs-sm)/1.3 var(--body); color: var(--l-muted); margin-bottom: 4px; }
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; }
}

/* ------------------------------------------------------------ footer */
.site-footer { background: #0C0B0A; padding: 56px 0 calc(48px + env(safe-area-inset-bottom)); }
.footer-in { display: grid; gap: 28px; }
.footer-brand { color: var(--neon); }
.footer-brand .logo-wm { width: 160px; margin-bottom: 12px; }
.footer-brand p { color: var(--muted); margin: 0; }
.footer-col { font-size: 15px; color: var(--muted); }
.footer-col p { margin: 0 0 6px; }
.footer-col a { color: var(--ink); text-decoration: none; display: inline-block; padding: 4px 0; }
.footer-col a:hover { color: var(--neon); }
@media (min-width: 800px) {
  .footer-in { grid-template-columns: 1.2fr 1fr 1fr; }
}

/* ------------------------------------------------------------ scroll reveals
   Native scroll-driven animations where supported. Otherwise motion.js/site.js adds .in via
   IntersectionObserver. Without .motion (reduced motion, no JS) everything is simply shown. */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes line-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sheet-cut { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes beam-sweep { 0% { transform: translateX(-100%); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }

@supports (animation-timeline: view()) {
  .motion [data-reveal] { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
  .motion .steps::before { animation: line-draw linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
  .motion:not(.is-desk) .mat-svg { animation: sheet-cut linear both; animation-timeline: view(); animation-range: entry 35% cover 50%; }
  .motion:not(.is-desk) .mat-beam { animation: beam-sweep linear both; animation-timeline: view(); animation-range: entry 35% cover 50%; }
}
.motion.no-sdt [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.motion.no-sdt [data-reveal].in { opacity: 1; transform: none; }
.motion.no-sdt .steps::before { transform: scaleX(0); transition: transform 1.2s var(--ease); }
.motion.no-sdt .steps.in::before { transform: scaleX(1); }
.motion.no-sdt:not(.is-desk) .mat-svg { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s linear; }
.motion.no-sdt:not(.is-desk) .mat.in .mat-svg { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}