@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;500&family=Roboto:wght@300;500&display=swap');

/* ==========================================================================
   Marjoliving — marjoliving.nl · variant_s4
   Built to DESIGN.md. Identity from the brand board, composition + motion
   from the imported site. One stylesheet, no dependencies, no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens  (DESIGN.md §2, §3, §5, §7)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --mlv-plum:        #61304D;  --mlv-plum-rgb:      97, 48, 77;
  --mlv-plum-deep:   #3E1E31;  --mlv-plum-deep-rgb: 62, 30, 49;
  --mlv-plum-soft:   #7B4765;  --mlv-plum-soft-rgb: 123, 71, 101;
  --mlv-plum-wash:   #F1EBEE;  --mlv-plum-wash-rgb: 241, 235, 238;

  --mlv-greige:      #EAE8E4;  --mlv-greige-rgb:      234, 232, 228;
  --mlv-greige-deep: #DCD8D2;  --mlv-greige-deep-rgb: 220, 216, 210;
  --mlv-line:        #D8D4CE;  --mlv-line-rgb:        216, 212, 206;
  --mlv-border:      #8C867E;  --mlv-border-rgb:      140, 134, 126;

  --mlv-ink:         #141314;  --mlv-ink-rgb:     20, 19, 20;
  --mlv-muted:       #5C5854;  --mlv-muted-rgb:   92, 88, 84;
  --mlv-canvas:      #FAF9F7;  --mlv-canvas-rgb:  250, 249, 247;
  --mlv-surface:     #FFFFFF;  --mlv-surface-rgb: 255, 255, 255;
  --mlv-on-dark:     #F4F2EF;  --mlv-on-dark-rgb: 244, 242, 239;

  --mlv-ok:     #2F6B4F;  --mlv-ok-wash:    #ECF1EE;
  --mlv-warn:   #8A5A12;  --mlv-warn-wash:  #F6F0E5;
  --mlv-error:  #A32A21;  --mlv-error-wash: #F8ECEA;

  --mlv-font-display: "Raleway", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mlv-font-text:    "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --mlv-w-light:  300;
  --mlv-w-medium: 500;

  --mlv-size-micro: 0.625rem;
  --mlv-size-small: 0.8125rem;
  --mlv-size-body:  1rem;
  --mlv-size-lead:  1.125rem;
  --mlv-size-h4:    1.5rem;
  --mlv-size-h3:    2.25rem;
  --mlv-size-h2:    2.5rem;
  --mlv-size-h1:    3rem;
  --mlv-size-hero:  4rem;

  --mlv-lh-tight: 1.15;
  --mlv-lh-snug:  1.35;
  --mlv-lh-body:  1.65;

  --mlv-track-hero:  -0.03em;
  --mlv-track-head:  -0.015em;
  --mlv-track-micro:  0.12em;

  --mlv-s1: 4px;  --mlv-s2: 8px;   --mlv-s3: 12px;  --mlv-s4: 16px;
  --mlv-s5: 20px; --mlv-s6: 24px;  --mlv-s8: 32px;  --mlv-s10: 40px;
  --mlv-s14: 56px; --mlv-s20: 80px; --mlv-s28: 112px;

  --mlv-r-none: 0; --mlv-r-sm: 2px; --mlv-r-md: 4px;
  --mlv-hair: 1px; --mlv-rule: 2px;

  --mlv-t-tap:   120ms;
  --mlv-t-ui:    200ms;
  --mlv-t-move:  300ms;
  --mlv-t-stage: 500ms;
  --mlv-t-amb:   14s;

  --mlv-ease-jimdo: cubic-bezier(.4, 0, .22, 1);
  --mlv-ease-out:   cubic-bezier(.16, .84, .44, 1);
  --mlv-ease-soft:  cubic-bezier(.4, 0, .2, 1);

  --mlv-shadow-1: 0 1px 2px rgba(var(--mlv-ink-rgb), .06);
  --mlv-shadow-2: 0 2px 5px rgba(var(--mlv-ink-rgb), .25);

  --mlv-measure: 66ch;
  --mlv-page: 1180px;
  --mlv-page-narrow: 760px;
  --mlv-gutter: var(--mlv-s6);
  --mlv-band-y: var(--mlv-s20);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;            /* the source's own scroll technique */
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--mlv-canvas);
  color: var(--mlv-ink);
  font-family: var(--mlv-font-text);
  font-weight: var(--mlv-w-light);
  font-size: var(--mlv-size-lead);
  line-height: var(--mlv-lh-body);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  font-family: var(--mlv-font-display);
  font-weight: var(--mlv-w-light);
  line-height: var(--mlv-lh-tight);
  letter-spacing: var(--mlv-track-head);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--mlv-s5); max-width: var(--mlv-measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--mlv-plum); }

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

strong, b { font-weight: var(--mlv-w-medium); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mlv-plum);
  outline-offset: 2px;
  border-radius: var(--mlv-r-sm);
}

::selection { background: var(--mlv-plum); color: var(--mlv-on-dark); }

.mlv-skip {
  position: absolute; left: var(--mlv-s5); top: -5rem; z-index: 90;
  background: var(--mlv-plum); color: var(--mlv-on-dark);
  padding: var(--mlv-s3) var(--mlv-s5);
  font-size: var(--mlv-size-small);
  letter-spacing: var(--mlv-track-micro);
  text-transform: uppercase; text-decoration: none;
  transition: top var(--mlv-t-ui) var(--mlv-ease-out);
}
.mlv-skip:focus { top: var(--mlv-s5); }

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

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.mlv-shell { width: 100%; max-width: var(--mlv-page); margin: 0 auto; padding: 0 var(--mlv-gutter); }
.mlv-shell--narrow { max-width: var(--mlv-page-narrow); }

.mlv-band { padding: var(--mlv-band-y) 0; border-top: var(--mlv-hair) solid var(--mlv-line); }
.mlv-band--greige { background: var(--mlv-greige); border-top-color: var(--mlv-greige-deep); }
.mlv-band--plum   { background: var(--mlv-plum); color: var(--mlv-on-dark); border-top-color: var(--mlv-plum); }
.mlv-band--plum h1, .mlv-band--plum h2, .mlv-band--plum h3, .mlv-band--plum h4 { color: var(--mlv-on-dark); }
.mlv-band--plum a { color: var(--mlv-on-dark); }
.mlv-band--flush  { border-top: 0; }
.mlv-band--tight  { padding: var(--mlv-s14) 0; }

.mlv-grid { display: grid; gap: var(--mlv-s5); }
.mlv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mlv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mlv-grid--gallery { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--mlv-s5); }
.mlv-stack { display: grid; gap: var(--mlv-s5); align-content: start; }
.mlv-stack--tight { gap: var(--mlv-s3); }
.mlv-stack--loose { gap: var(--mlv-s10); }
.mlv-row { display: flex; flex-wrap: wrap; gap: var(--mlv-s3); align-items: center; }

/* --------------------------------------------------------------------------
   4. Section headings
   -------------------------------------------------------------------------- */
.mlv-eyebrow {
  font-family: var(--mlv-font-text);
  font-size: var(--mlv-size-small);
  font-weight: var(--mlv-w-medium);
  letter-spacing: var(--mlv-track-micro);
  text-transform: uppercase;
  color: var(--mlv-plum);
  margin: 0 0 var(--mlv-s3);
  display: flex; align-items: baseline; gap: var(--mlv-s3);
  max-width: none;
}
.mlv-eyebrow::after {
  content: ""; flex: 1; height: var(--mlv-hair);
  background: var(--mlv-line); transform-origin: left;
}
.mlv-band--plum .mlv-eyebrow { color: var(--mlv-greige); }
.mlv-band--plum .mlv-eyebrow::after { background: rgba(var(--mlv-on-dark-rgb), .35); }

.mlv-sec-title { font-size: var(--mlv-size-h3); margin-bottom: var(--mlv-s5); }
.mlv-sec-note  { color: var(--mlv-muted); max-width: var(--mlv-measure); }
.mlv-band--plum .mlv-sec-note { color: var(--mlv-greige); }

.mlv-prose h3 { font-size: var(--mlv-size-h4); margin: var(--mlv-s10) 0 var(--mlv-s3); }
.mlv-prose h3:first-child { margin-top: 0; }
.mlv-prose h4 { font-size: var(--mlv-size-lead); font-weight: var(--mlv-w-medium); margin: var(--mlv-s8) 0 var(--mlv-s2); }
.mlv-prose ul { margin: 0 0 var(--mlv-s5); padding-left: var(--mlv-s5); max-width: var(--mlv-measure); }
.mlv-prose li { margin-bottom: var(--mlv-s2); }
.mlv-prose li::marker { color: var(--mlv-plum); }

/* --------------------------------------------------------------------------
   5. Header — static, as the import measured
   -------------------------------------------------------------------------- */
.mlv-header {
  background: var(--mlv-surface);
  border-bottom: var(--mlv-hair) solid var(--mlv-line);
}
.mlv-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--mlv-s5); padding-top: var(--mlv-s3); padding-bottom: var(--mlv-s3);
}

.mlv-brand { display: flex; align-items: center; gap: var(--mlv-s3); text-decoration: none; color: inherit; min-height: 44px; }
.mlv-brand__mark { width: 58px; height: 58px; border-radius: 50%; }
.mlv-brand__name {
  font-family: var(--mlv-font-display);
  font-size: var(--mlv-size-h4);
  letter-spacing: .01em;
  color: var(--mlv-plum);
}
.mlv-brand__name small {
  display: block;
  font-family: var(--mlv-font-text);
  font-size: var(--mlv-size-small);
  letter-spacing: var(--mlv-track-micro);
  text-transform: uppercase;
  color: var(--mlv-muted);
}

.mlv-navtoggle {
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: transparent;
  border: var(--mlv-hair) solid var(--mlv-border);
  border-radius: var(--mlv-r-sm);
  color: var(--mlv-ink); cursor: pointer;
  transition: background-color var(--mlv-t-ui) var(--mlv-ease-soft),
              border-color var(--mlv-t-ui) var(--mlv-ease-soft);
}
.mlv-navtoggle:hover { background: var(--mlv-greige); border-color: var(--mlv-ink); }
.mlv-navtoggle__bar, .mlv-navtoggle__bar::before, .mlv-navtoggle__bar::after {
  display: block; width: 20px; height: 2px; background: currentColor;
  transition: transform var(--mlv-t-move) var(--mlv-ease-jimdo), opacity var(--mlv-t-ui);
}
.mlv-navtoggle__bar::before, .mlv-navtoggle__bar::after { content: ""; position: absolute; }
.mlv-navtoggle__bar::before { transform: translateY(-6px); }
.mlv-navtoggle__bar::after  { transform: translateY(6px); }
.mlv-navtoggle[aria-expanded="true"] .mlv-navtoggle__bar { background: transparent; }
.mlv-navtoggle[aria-expanded="true"] .mlv-navtoggle__bar::before { transform: rotate(45deg); }
.mlv-navtoggle[aria-expanded="true"] .mlv-navtoggle__bar::after  { transform: rotate(-45deg); }

.mlv-nav { display: flex; flex-wrap: wrap; gap: var(--mlv-s5); align-items: center; }
.mlv-nav a {
  position: relative;
  display: flex; align-items: center;
  min-height: 44px;
  color: var(--mlv-ink);
  font-size: var(--mlv-size-body);
  text-decoration: none;
  transition: color var(--mlv-t-ui) var(--mlv-ease-soft);
}
.mlv-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px;
  height: var(--mlv-rule); background: var(--mlv-plum);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--mlv-t-move) var(--mlv-ease-jimdo);
}
.mlv-nav a:hover { color: var(--mlv-plum); }
.mlv-nav a:hover::after, .mlv-nav a:focus-visible::after { transform: scaleX(1); }
.mlv-nav a[aria-current="page"] { color: var(--mlv-plum); }
.mlv-nav a[aria-current="page"]::after { transform: scaleX(1); }
.mlv-nav .mlv-btn::after { display: none; }

/* Secondary rail of deeper pages, kept out of the primary line */
.mlv-subnav {
  border-top: var(--mlv-hair) solid var(--mlv-line);
  background: var(--mlv-canvas);
}
.mlv-subnav__inner {
  display: flex; flex-wrap: wrap; gap: var(--mlv-s5);
  padding-top: var(--mlv-s1); padding-bottom: var(--mlv-s1);
}
.mlv-subnav a {
  display: flex; align-items: center; min-height: 44px;
  font-size: var(--mlv-size-small);
  letter-spacing: .04em;
  color: var(--mlv-muted);
  text-decoration: none;
  transition: color var(--mlv-t-ui) var(--mlv-ease-soft);
}
.mlv-subnav a:hover, .mlv-subnav a[aria-current="page"] { color: var(--mlv-plum); }

/* --------------------------------------------------------------------------
   6. Footer — static
   -------------------------------------------------------------------------- */
.mlv-footer {
  background: var(--mlv-plum-deep);
  color: var(--mlv-on-dark);
  padding: var(--mlv-s20) 0 var(--mlv-s6);
  margin-top: auto;
}
.mlv-footer h2 { font-size: var(--mlv-size-h4); color: var(--mlv-on-dark); margin-bottom: var(--mlv-s4); }
.mlv-footer a { color: var(--mlv-on-dark); text-decoration-color: rgba(var(--mlv-greige-rgb), .45); }
.mlv-footer a:hover { color: var(--mlv-surface); }
.mlv-footer__cols {
  display: grid; gap: var(--mlv-s10);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.mlv-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mlv-s1); }
.mlv-footer__list a { display: flex; align-items: center; min-height: 44px; font-size: var(--mlv-size-body); }
.mlv-footer p { color: var(--mlv-greige); font-size: var(--mlv-size-body); }
.mlv-footer__legal {
  margin-top: var(--mlv-s10);
  padding-top: var(--mlv-s5);
  border-top: var(--mlv-hair) solid rgba(var(--mlv-greige-rgb), .25);
  display: flex; flex-wrap: wrap; gap: var(--mlv-s3) var(--mlv-s6);
  align-items: center; justify-content: space-between;
  font-size: var(--mlv-size-small);
  color: var(--mlv-greige);
}
.mlv-footer__built { font-size: var(--mlv-size-small); }

/* --------------------------------------------------------------------------
   7. Buttons & links
   -------------------------------------------------------------------------- */
.mlv-btn {
  --_bg: var(--mlv-plum); --_fg: var(--mlv-on-dark); --_bd: var(--mlv-plum);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mlv-s2);
  min-height: 48px; padding: var(--mlv-s3) var(--mlv-s6);
  background: var(--_bg); color: var(--_fg);
  border: var(--mlv-hair) solid var(--_bd);
  border-radius: var(--mlv-r-sm);
  font-family: var(--mlv-font-text);
  font-size: var(--mlv-size-body);
  font-weight: var(--mlv-w-medium);
  line-height: 1.2; letter-spacing: .02em;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--mlv-t-ui) var(--mlv-ease-soft),
              border-color var(--mlv-t-ui) var(--mlv-ease-soft),
              color var(--mlv-t-ui) var(--mlv-ease-soft),
              transform var(--mlv-t-tap) var(--mlv-ease-out);
}
.mlv-btn:hover  { --_bg: var(--mlv-plum-deep); --_bd: var(--mlv-plum-deep); }
.mlv-btn:active { transform: translateY(1px); }
.mlv-btn[disabled], .mlv-btn[aria-disabled="true"] {
  --_bg: var(--mlv-greige); --_fg: var(--mlv-muted); --_bd: var(--mlv-line);
  cursor: not-allowed; transform: none;
}
.mlv-btn--secondary { --_bg: transparent; --_fg: var(--mlv-plum); --_bd: var(--mlv-plum); }
.mlv-btn--secondary:hover { --_bg: var(--mlv-plum-wash); --_fg: var(--mlv-plum-deep); --_bd: var(--mlv-plum-deep); }
.mlv-btn--on-dark { --_bg: var(--mlv-on-dark); --_fg: var(--mlv-plum-deep); --_bd: var(--mlv-on-dark); }
.mlv-btn--on-dark:hover { --_bg: var(--mlv-surface); --_bd: var(--mlv-surface); }
.mlv-btn--ghost-dark { --_bg: transparent; --_fg: var(--mlv-on-dark); --_bd: rgba(var(--mlv-on-dark-rgb), .6); }
.mlv-btn--ghost-dark:hover { --_bg: rgba(var(--mlv-on-dark-rgb), .12); --_bd: var(--mlv-on-dark); }
.mlv-btn__arrow { transition: transform var(--mlv-t-ui) var(--mlv-ease-out); }
.mlv-btn:hover .mlv-btn__arrow { transform: translateX(4px); }

.mlv-link {
  color: var(--mlv-plum);
  text-decoration: none;
  background-image: linear-gradient(var(--mlv-plum), var(--mlv-plum));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 var(--mlv-rule);
  transition: background-size var(--mlv-t-move) var(--mlv-ease-jimdo), color var(--mlv-t-ui);
  padding-bottom: 2px;
}
.mlv-link:hover { color: var(--mlv-plum-deep); background-size: 100% var(--mlv-rule); }

/* --------------------------------------------------------------------------
   8. Hero — the import's split composition
   -------------------------------------------------------------------------- */
.mlv-hero { border-bottom: var(--mlv-hair) solid var(--mlv-line); background: var(--mlv-surface); }
.mlv-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: min(78vh, 640px);
}
.mlv-hero__media { position: relative; overflow: hidden; background: var(--mlv-greige); }
.mlv-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: mlv-slowzoom 18s var(--mlv-ease-soft) forwards;
}
.mlv-hero__body {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--mlv-s20) var(--mlv-s10) var(--mlv-s20) var(--mlv-s14);
  max-width: 640px;
}
.mlv-hero__title { font-size: var(--mlv-size-hero); letter-spacing: var(--mlv-track-hero); margin-bottom: var(--mlv-s5); }
.mlv-hero__lead { color: var(--mlv-muted); font-size: var(--mlv-size-lead); }
.mlv-hero__actions { margin-top: var(--mlv-s8); }

/* Page hero for interior pages — no image, type only */
.mlv-pagehead { background: var(--mlv-surface); border-bottom: var(--mlv-hair) solid var(--mlv-line); padding: var(--mlv-s20) 0 var(--mlv-s14); }
.mlv-pagehead h1 { font-size: var(--mlv-size-h1); letter-spacing: var(--mlv-track-head); margin-bottom: var(--mlv-s5); }
.mlv-pagehead p { color: var(--mlv-muted); }

/* --------------------------------------------------------------------------
   9. Cards, figures, media
   -------------------------------------------------------------------------- */
.mlv-card {
  background: var(--mlv-surface);
  border: var(--mlv-hair) solid var(--mlv-line);
  border-radius: var(--mlv-r-sm);
  padding: var(--mlv-s6);
  display: flex; flex-direction: column; gap: var(--mlv-s3);
  transition: border-color var(--mlv-t-ui) var(--mlv-ease-soft),
              transform var(--mlv-t-move) var(--mlv-ease-out),
              box-shadow var(--mlv-t-move) var(--mlv-ease-out);
}
.mlv-card--greige { background: var(--mlv-greige); border-color: var(--mlv-greige-deep); }
.mlv-card__title { font-size: var(--mlv-size-h4); }
.mlv-card__meta {
  font-size: var(--mlv-size-small);
  letter-spacing: var(--mlv-track-micro);
  text-transform: uppercase;
  color: var(--mlv-muted);
}
.mlv-card--link { text-decoration: none; color: inherit; padding: 0; overflow: hidden; }
.mlv-card--link:hover { border-color: var(--mlv-plum); transform: translateY(-2px); box-shadow: var(--mlv-shadow-1); }
.mlv-card--link:focus-within { border-color: var(--mlv-plum); }
.mlv-card--link .mlv-card__body { padding: var(--mlv-s6); display: grid; gap: var(--mlv-s2); }
.mlv-card--link figure { margin: 0; overflow: hidden; }
.mlv-card--link img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--mlv-t-stage) var(--mlv-ease-jimdo);
}
.mlv-card--link:hover img { transform: scale(1.04); }
.mlv-card__more {
  margin-top: auto; color: var(--mlv-plum);
  font-size: var(--mlv-size-body); font-weight: var(--mlv-w-medium);
  display: inline-flex; align-items: center; gap: var(--mlv-s2);
}
.mlv-card--link:hover .mlv-card__more .mlv-btn__arrow { transform: translateX(4px); }

.mlv-figure { margin: 0; border: var(--mlv-hair) solid var(--mlv-line); border-radius: var(--mlv-r-sm); background: var(--mlv-surface); overflow: hidden; }
.mlv-figure img { width: 100%; }
.mlv-figure figcaption {
  padding: var(--mlv-s3) var(--mlv-s4);
  font-size: var(--mlv-size-small);
  color: var(--mlv-muted);
  border-top: var(--mlv-hair) solid var(--mlv-line);
}

.mlv-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--mlv-s14);
  align-items: center;
}
.mlv-split--narrow-media { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.mlv-split__media img { width: 100%; border: var(--mlv-hair) solid var(--mlv-line); border-radius: var(--mlv-r-sm); }

.mlv-rule { height: var(--mlv-hair); background: var(--mlv-line); border: 0; margin: var(--mlv-s8) 0; }

/* --------------------------------------------------------------------------
   10. Lightbox trigger tiles (the PhotoSwipe role)
   -------------------------------------------------------------------------- */
.mlv-tile {
  position: relative; display: block; padding: 0; margin: 0;
  border: var(--mlv-hair) solid var(--mlv-line);
  border-radius: var(--mlv-r-sm);
  background: var(--mlv-greige);
  overflow: hidden; cursor: zoom-in;
  transition: border-color var(--mlv-t-ui) var(--mlv-ease-soft), transform var(--mlv-t-move) var(--mlv-ease-out);
}
.mlv-tile img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--mlv-t-stage) var(--mlv-ease-jimdo);
}
.mlv-tile:hover { border-color: var(--mlv-plum); transform: translateY(-2px); }
.mlv-tile:hover img { transform: scale(1.05); }
.mlv-tile__cap {
  position: absolute; inset: auto 0 0 0;
  padding: var(--mlv-s3) var(--mlv-s4);
  background: rgba(var(--mlv-plum-deep-rgb), .82);
  color: var(--mlv-on-dark);
  font-size: var(--mlv-size-small);
  letter-spacing: .03em;
  text-align: left;
  opacity: 0;
  transform: translateY(100%);
  transition: transform var(--mlv-t-move) var(--mlv-ease-jimdo), opacity var(--mlv-t-ui);
}
.mlv-tile:hover .mlv-tile__cap, .mlv-tile:focus-visible .mlv-tile__cap { opacity: 1; transform: translateY(0); }

.mlv-lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: var(--mlv-s5);
  background: rgba(var(--mlv-ink-rgb), .88);
  animation: mlv-fade var(--mlv-t-move) var(--mlv-ease-jimdo);
}
.mlv-lightbox[hidden] { display: none; }
.mlv-lightbox__inner { max-width: min(1100px, 100%); max-height: 100%; display: grid; gap: var(--mlv-s3); }
.mlv-lightbox img {
  max-width: 100%; max-height: 78vh; width: auto; margin: 0 auto;
  border-radius: var(--mlv-r-sm);
  box-shadow: var(--mlv-shadow-2);
  animation: mlv-rise var(--mlv-t-stage) var(--mlv-ease-jimdo) both;
}
.mlv-lightbox__cap { color: var(--mlv-on-dark); font-size: var(--mlv-size-small); text-align: center; }
.mlv-lightbox__close {
  position: absolute; top: var(--mlv-s5); right: var(--mlv-s5);
  width: 48px; height: 48px;
  display: grid; place-content: center;
  background: transparent; color: var(--mlv-on-dark);
  border: var(--mlv-hair) solid rgba(var(--mlv-on-dark-rgb), .5);
  border-radius: var(--mlv-r-sm); cursor: pointer;
  transition: background-color var(--mlv-t-ui) var(--mlv-ease-soft);
}
.mlv-lightbox__close:hover { background: rgba(var(--mlv-on-dark-rgb), .16); }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
.mlv-form { display: grid; gap: var(--mlv-s5); max-width: 620px; }
.mlv-field { display: grid; gap: var(--mlv-s2); }
.mlv-label {
  font-size: var(--mlv-size-small);
  font-weight: var(--mlv-w-medium);
  letter-spacing: var(--mlv-track-micro);
  text-transform: uppercase;
  color: var(--mlv-ink);
}
.mlv-label__opt { font-weight: var(--mlv-w-light); text-transform: none; letter-spacing: 0; color: var(--mlv-muted); }
.mlv-input, .mlv-textarea {
  width: 100%; min-height: 48px;
  padding: var(--mlv-s3) var(--mlv-s4);
  background: var(--mlv-surface);
  color: var(--mlv-ink);
  border: var(--mlv-hair) solid var(--mlv-border);
  border-radius: var(--mlv-r-sm);
  font-family: var(--mlv-font-text);
  font-size: var(--mlv-size-body);
  font-weight: var(--mlv-w-light);
  transition: border-color var(--mlv-t-ui) var(--mlv-ease-soft);
}
.mlv-textarea { min-height: 150px; resize: vertical; line-height: var(--mlv-lh-body); }
.mlv-input::placeholder, .mlv-textarea::placeholder { color: var(--mlv-muted); opacity: 1; }
.mlv-input:hover, .mlv-textarea:hover { border-color: var(--mlv-ink); }
.mlv-input:focus-visible, .mlv-textarea:focus-visible { border-color: var(--mlv-plum); }
.mlv-field.is-invalid .mlv-input, .mlv-field.is-invalid .mlv-textarea {
  border-color: var(--mlv-error); border-width: var(--mlv-rule);
}
.mlv-fielderror {
  display: none; align-items: center; gap: var(--mlv-s2);
  font-size: var(--mlv-size-small); color: var(--mlv-error);
}
.mlv-field.is-invalid .mlv-fielderror { display: flex; }

.mlv-check { display: flex; gap: var(--mlv-s3); align-items: flex-start; cursor: pointer; padding: var(--mlv-s1) 0; }
.mlv-check input {
  appearance: none; flex: 0 0 auto;
  width: 22px; height: 22px; margin: 2px 0 0;
  background: var(--mlv-surface);
  border: var(--mlv-hair) solid var(--mlv-border);
  border-radius: var(--mlv-r-sm);
  display: grid; place-content: center; cursor: pointer;
  transition: background-color var(--mlv-t-tap) var(--mlv-ease-soft), border-color var(--mlv-t-tap) var(--mlv-ease-soft);
}
.mlv-check input::before {
  content: ""; width: 11px; height: 6px;
  border-left: var(--mlv-rule) solid var(--mlv-on-dark);
  border-bottom: var(--mlv-rule) solid var(--mlv-on-dark);
  transform: rotate(-45deg) scale(0);
  transition: transform var(--mlv-t-tap) var(--mlv-ease-out);
}
.mlv-check input:checked { background: var(--mlv-plum); border-color: var(--mlv-plum); }
.mlv-check input:checked::before { transform: rotate(-45deg) scale(1); }
.mlv-check input:hover { border-color: var(--mlv-ink); }
.mlv-check span { font-size: var(--mlv-size-body); color: var(--mlv-muted); }

.mlv-formnote {
  padding: var(--mlv-s4) var(--mlv-s5);
  background: var(--mlv-plum-wash);
  border-left: var(--mlv-rule) solid var(--mlv-plum);
  font-size: var(--mlv-size-body);
}
.mlv-formnote[hidden] { display: none; }
.mlv-formnote--ok { background: var(--mlv-ok-wash); border-left-color: var(--mlv-ok); }

/* --------------------------------------------------------------------------
   12. Steps — the werkwijze rail (signature gesture)
   -------------------------------------------------------------------------- */
.mlv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mlv-s8); position: relative; }
.mlv-steps::before {
  content: ""; position: absolute;
  left: 23px; top: 12px; bottom: 12px; width: var(--mlv-hair);
  background: var(--mlv-line);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.4s var(--mlv-ease-jimdo);
}
.mlv-steps.is-in::before { transform: scaleY(1); }
.mlv-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--mlv-s5); align-items: start; }
.mlv-step__num {
  width: 48px; height: 48px;
  display: grid; place-content: center;
  background: var(--mlv-surface);
  border: var(--mlv-hair) solid var(--mlv-border);
  border-radius: var(--mlv-r-sm);
  font-family: var(--mlv-font-display);
  font-size: var(--mlv-size-h4);
  color: var(--mlv-plum);
  position: relative; z-index: 1;
  transition: background-color var(--mlv-t-move) var(--mlv-ease-soft),
              color var(--mlv-t-move) var(--mlv-ease-soft),
              border-color var(--mlv-t-move) var(--mlv-ease-soft);
}
.mlv-step:hover .mlv-step__num { background: var(--mlv-plum); color: var(--mlv-on-dark); border-color: var(--mlv-plum); }
.mlv-step__title { font-size: var(--mlv-size-h4); margin-bottom: var(--mlv-s2); }
.mlv-step__body { color: var(--mlv-muted); }

/* --------------------------------------------------------------------------
   13. Price list & legal
   -------------------------------------------------------------------------- */
.mlv-pricelist { list-style: none; margin: 0; padding: 0; display: grid; }
.mlv-price {
  display: flex; flex-wrap: wrap; gap: var(--mlv-s2) var(--mlv-s5);
  align-items: baseline; justify-content: space-between;
  padding: var(--mlv-s5) 0;
  border-bottom: var(--mlv-hair) solid var(--mlv-line);
}
.mlv-price:first-child { border-top: var(--mlv-hair) solid var(--mlv-line); }
.mlv-price__name { font-size: var(--mlv-size-lead); }
.mlv-price__name small { display: block; font-size: var(--mlv-size-body); color: var(--mlv-muted); max-width: var(--mlv-measure); }
.mlv-price__amt {
  font-size: var(--mlv-size-lead);
  font-weight: var(--mlv-w-medium);
  color: var(--mlv-plum);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.mlv-legal { counter-reset: none; }
.mlv-legal h3 {
  font-family: var(--mlv-font-display);
  font-size: var(--mlv-size-h4);
  margin: var(--mlv-s10) 0 var(--mlv-s3);
  padding-top: var(--mlv-s5);
  border-top: var(--mlv-hair) solid var(--mlv-line);
}
.mlv-legal h3:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.mlv-legal p { font-size: var(--mlv-size-body); color: var(--mlv-muted); margin-bottom: var(--mlv-s3); }
.mlv-legal ul { font-size: var(--mlv-size-body); color: var(--mlv-muted); }

.mlv-deflist { display: grid; gap: var(--mlv-s5); margin: 0; }
.mlv-deflist > div {
  display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: var(--mlv-s5);
  padding-bottom: var(--mlv-s5);
  border-bottom: var(--mlv-hair) solid var(--mlv-line);
}
.mlv-deflist dt {
  font-size: var(--mlv-size-small);
  letter-spacing: var(--mlv-track-micro);
  text-transform: uppercase;
  color: var(--mlv-muted);
}
.mlv-deflist dd { margin: 0; font-size: var(--mlv-size-lead); }

/* --------------------------------------------------------------------------
   14. Quote / carousel — the Swiper role, hand built
   -------------------------------------------------------------------------- */
.mlv-carousel { position: relative; }
.mlv-carousel__viewport { overflow: hidden; }
.mlv-carousel__track { display: flex; transition: transform var(--mlv-t-stage) var(--mlv-ease-jimdo); }
.mlv-carousel__slide { flex: 0 0 100%; min-width: 0; padding: 0 var(--mlv-s1); }
.mlv-carousel__controls {
  display: flex; align-items: center; justify-content: center;
  gap: var(--mlv-s3); margin-top: var(--mlv-s8);
}
.mlv-carousel__dots { display: flex; gap: var(--mlv-s2); }
.mlv-carousel__dot {
  width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-content: center;
}
.mlv-carousel__dot::before {
  content: ""; width: 22px; height: var(--mlv-rule);
  background: var(--mlv-border);
  transition: background-color var(--mlv-t-ui) var(--mlv-ease-soft), width var(--mlv-t-move) var(--mlv-ease-jimdo);
}
.mlv-carousel__dot[aria-current="true"]::before { background: var(--mlv-plum); width: 34px; }
.mlv-carousel__arrow {
  width: 44px; height: 44px;
  display: grid; place-content: center;
  background: transparent; color: var(--mlv-ink);
  border: var(--mlv-hair) solid var(--mlv-border);
  border-radius: var(--mlv-r-sm); cursor: pointer;
  transition: background-color var(--mlv-t-ui) var(--mlv-ease-soft), border-color var(--mlv-t-ui) var(--mlv-ease-soft);
}
.mlv-carousel__arrow:hover { border-color: var(--mlv-plum); background: var(--mlv-plum-wash); }

.mlv-quote {
  border-left: var(--mlv-rule) solid var(--mlv-plum);
  padding: var(--mlv-s2) 0 var(--mlv-s2) var(--mlv-s6);
  margin: 0;
}
.mlv-quote p {
  font-family: var(--mlv-font-display);
  font-size: var(--mlv-size-h4);
  font-style: italic;
  line-height: var(--mlv-lh-snug);
  max-width: 46ch;
}
.mlv-quote__by {
  display: block; margin-top: var(--mlv-s5);
  font-family: var(--mlv-font-text);
  font-size: var(--mlv-size-small);
  font-style: normal;
  letter-spacing: var(--mlv-track-micro);
  text-transform: uppercase;
  color: var(--mlv-muted);
}
.mlv-band--plum .mlv-quote { border-left-color: var(--mlv-greige); }
.mlv-band--plum .mlv-quote__by { color: var(--mlv-greige); }

/* --------------------------------------------------------------------------
   15. Motion  (DESIGN.md §7)
   -------------------------------------------------------------------------- */
@keyframes mlv-rise     { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mlv-fade     { from { opacity: 0; } to { opacity: 1; } }
@keyframes mlv-spin     { to { transform: rotate(1turn); } }
@keyframes mlv-pulse    { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes mlv-sweep    { from { background-position: 0 0; } to { background-position: 160px 0; } }
@keyframes mlv-slowzoom { from { transform: scale(1); } to { transform: scale(1.06); } }

.mlv-reveal { opacity: 0; }
.mlv-reveal.is-in {
  animation: mlv-rise var(--mlv-t-stage) var(--mlv-ease-jimdo) both;
  animation-delay: var(--mlv-delay, 0ms);
}
.no-js .mlv-reveal { opacity: 1; }

.mlv-ambient { position: relative; overflow: hidden; isolation: isolate; }
.mlv-ambient::before {
  content: ""; position: absolute; inset: -20%; z-index: -1;
  background-image: repeating-linear-gradient(-45deg, var(--mlv-greige) 0 1px, transparent 1px 18px);
  opacity: .9;
  animation: mlv-sweep var(--mlv-t-amb) linear infinite;
}
.mlv-band--plum.mlv-ambient::before {
  background-image: repeating-linear-gradient(-45deg, rgba(var(--mlv-on-dark-rgb), .16) 0 1px, transparent 1px 18px);
  opacity: 1;
}

.mlv-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--mlv-plum);
  animation: mlv-pulse 1.4s ease-in-out infinite;
}
.mlv-spinner {
  width: 22px; height: 22px;
  border: var(--mlv-rule) solid var(--mlv-line);
  border-top-color: var(--mlv-plum);
  border-radius: 50%;
  animation: mlv-spin .5s linear infinite;
}

/* --------------------------------------------------------------------------
   16. Responsive  (DESIGN.md §9)
   -------------------------------------------------------------------------- */
@media (max-width: 1015px) {
  :root { --mlv-size-hero: 3.25rem; --mlv-size-h1: 2.75rem; }
  .mlv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mlv-hero__body { padding: var(--mlv-s14) var(--mlv-s6); }
  .mlv-split { gap: var(--mlv-s10); }
}

@media (max-width: 886px) {
  :root { --mlv-band-y: var(--mlv-s14); }
  .mlv-deflist > div { grid-template-columns: minmax(0, 1fr); gap: var(--mlv-s2); }
}

/* Primary collapse */
@media (max-width: 767px) {
  :root {
    --mlv-size-hero: 2.25rem;
    --mlv-size-h1: 2rem;
    --mlv-size-h2: 1.75rem;
    --mlv-size-h3: 1.625rem;
    --mlv-size-h4: 1.25rem;
  }

  .mlv-header__inner { padding-top: var(--mlv-s2); padding-bottom: var(--mlv-s2); }
  .mlv-brand__mark { width: 46px; height: 46px; }
  .mlv-brand__name { font-size: var(--mlv-size-lead); }

  .mlv-navtoggle { display: inline-flex; position: relative; }
  .mlv-nav {
    display: none;
    position: absolute; left: 0; right: 0; z-index: 50;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--mlv-s2) var(--mlv-gutter) var(--mlv-s5);
    background: var(--mlv-surface);
    border-bottom: var(--mlv-hair) solid var(--mlv-line);
    box-shadow: var(--mlv-shadow-1);
  }
  .mlv-nav.is-open { display: flex; animation: mlv-rise var(--mlv-t-move) var(--mlv-ease-jimdo) both; }
  .mlv-nav a { min-height: 52px; font-size: var(--mlv-size-lead); border-bottom: var(--mlv-hair) solid var(--mlv-line); }
  .mlv-nav a::after { bottom: 10px; }
  .mlv-nav .mlv-btn { margin-top: var(--mlv-s4); border-bottom: 0; }

  .mlv-subnav__inner { gap: var(--mlv-s4); }

  .mlv-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mlv-hero__media { aspect-ratio: 4 / 3; }
  .mlv-hero__body { padding: var(--mlv-s14) 0; max-width: none; }
  .mlv-hero__body > * { padding-left: 0; padding-right: 0; }
  .mlv-hero__actions .mlv-btn { width: 100%; }

  .mlv-grid--2, .mlv-grid--3, .mlv-split, .mlv-split--narrow-media {
    grid-template-columns: minmax(0, 1fr);
  }
  .mlv-split { gap: var(--mlv-s8); }
  .mlv-footer__cols { gap: var(--mlv-s8); }
  .mlv-price { flex-direction: column; gap: var(--mlv-s2); }
  .mlv-quote p { font-size: var(--mlv-size-lead); }
}

@media (max-width: 525px) {
  :root { --mlv-gutter: var(--mlv-s4); --mlv-band-y: var(--mlv-s10); }
  .mlv-step { grid-template-columns: 40px minmax(0, 1fr); gap: var(--mlv-s4); }
  .mlv-step__num { width: 40px; height: 40px; font-size: var(--mlv-size-lead); }
  .mlv-steps::before { left: 19px; }
  .mlv-card { padding: var(--mlv-s5); }
  .mlv-card--link .mlv-card__body { padding: var(--mlv-s5); }
  .mlv-row .mlv-btn { width: 100%; }
  .mlv-footer__legal { flex-direction: column; align-items: flex-start; }
}

/* Hero body needs the shell gutter once it is stacked */
@media (max-width: 767px) {
  .mlv-hero__grid { gap: 0; }
}

/* --------------------------------------------------------------------------
   17. The escape hatch — mandatory
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .mlv-reveal { opacity: 1 !important; transform: none !important; }
  .mlv-steps::before { transform: scaleY(1) !important; }
  .mlv-ambient::before, .mlv-hero__media img { animation: none !important; }
  .mlv-card--link:hover, .mlv-tile:hover { transform: none; }
  .mlv-card--link:hover img, .mlv-tile:hover img { transform: none; }
}

@media print {
  .mlv-header, .mlv-subnav, .mlv-footer, .mlv-navtoggle, .mlv-lightbox { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .mlv-band { padding: 12pt 0; }
}