/* Overgenomen uit de Etch-build op lx.lxmedia.dev (opgeslagen stand, 29 okt 2026). */

/* --- etch-defaults-css-styles --- */
@layer etch-defaults {
	body {
		line-height: 1.5;
		-webkit-font-smoothing: antialiased;
		font-family: system-ui;
		display: flex;
		flex-direction: column;
	}
}

/* --- etch-reset-css-styles --- */
@layer etch-reset {
	/* Box sizing rules */
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	/* Remove default margins */
	* {
		margin: 0;
	}

	/* Prevent font size inflation */
	html {
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		scrollbar-gutter: stable;
	}

	/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
	ul[role='list'],
	ol[role='list'] {
		list-style: none;
	}

	ul[class]:not(
			[data-etch-has-custom-classes='false'], /* data-etch-has-custom-classes is builder only (not output on frontend) */
			.wp-block-list,
			.list,
			[class*='marker']
		),
	ol[class]:not(
			[data-etch-has-custom-classes='false'], /* data-etch-has-custom-classes is builder only (not output on frontend) */
			.wp-block-list,
			.list,
			[class*='marker']
		) {
		padding: 0;
		list-style: none;
	}

	/* Set body min height */
	body {
		min-block-size: 100svh;
		display: flex;
		flex-direction: column;

		main {
			flex-grow: 1;
		}
	}

	/* A elements that don't have a class get default styles */
	a:not([class]) {
		text-decoration-skip-ink: auto;
	}

	/* Make media easier to work with */
	img,
	picture,
	video,
	canvas,
	svg:not(.block-editor-list-view-tree svg),
	a:not(
		p > a,
		span > a,
		h1 > a,
		h2 > a,
		h3 > a,
		h4 > a,
		h5 > a,
		h6 > a,
		li > a,
		em > a,
		q > a,
		label > a,
		strong > a,
		figcaption > a,
		.editor-styles-wrapper a
	) {
		max-inline-size: 100%;
		height: auto;
		display: block;
	}

	/* Inherit fonts for inputs and buttons */
	input,
	button,
	textarea,
	select {
		font: inherit;
		font-size: inherit;
	}

	button {
		cursor: pointer;
		background-color: transparent;
		border: none;
		color: currentColor;
	}

	/* Make sure textareas without a rows attribute are not tiny */
	textarea:not([rows]) {
		min-height: 10em;
	}

	/* Avoid text overflows */
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	figure > img {
		inline-size: 100%;
	}

	img {
		block-size: auto;
	}

	/* Add back select GB styles that are removed by global settings toggle */
	.has-text-align-center {
		text-align: center;
	}

	.has-text-align-left {
		text-align: left;
	}

	.has-text-align-right {
		text-align: right;
	}

	.has-fit-text {
		white-space: nowrap !important;
	}

	#end-resizable-editor-section {
		display: none;
	}

	.aligncenter {
		clear: both;
	}

	.items-justified-left {
		justify-content: flex-start;
	}

	.items-justified-center {
		justify-content: center;
	}

	.items-justified-right {
		justify-content: flex-end;
	}

	.items-justified-space-between {
		justify-content: space-between;
	}

	.screen-reader-text {
		border: 0;
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
		word-wrap: normal !important;
	}

	.screen-reader-text:focus {
		background-color: #ddd;
		clip-path: none;
		color: #444;
		display: block;
		font-size: 1em;
		height: auto;
		left: 5px;
		line-height: normal;
		padding: 15px 23px 14px;
		text-decoration: none;
		top: 5px;
		width: auto;
		z-index: 100000;
	}
}

/* --- etch-page-styles (samengevoegd: home, about, post, 404) --- */
.lx-header { position: sticky;
  top: 0;
  padding: .5em;
  z-index: 60;
  backdrop-filter: blur(12px); }
.lx-header__inner { display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  font-size: var(--text-s); }
.lx-header__left { display: flex;
  align-items: center;
  gap: .8em;
  flex-wrap: wrap; }
.lx-logo { inline-size: var(--text-l);; }
.lx-nav { display: flex; }
.lx-nav__list { list-style: none;
  display: flex;
  flex-wrap: no-wrap;
  gap: .5em; }
.lx-nav__item { list-style: none; }
.lx-nav__link { display: inline-block;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  padding: 0.2em 0.5em;
  background: var(--white);
  border-radius: var(--radius);
  border: var(--border);
  color: var(--text-dark);
  &:hover {
    color: var(--primary);
  } }
.lx-header__right { display: flex;
  flex-direction: row;
  gap: 0.5em;
	align-items: center; }
.lx-contact { position: relative;
  display: flex; }
.lx-contact-trigger { /* knop, want popovertarget werkt niet op een <a> */
  
  cursor: pointer;
  anchor-name: --lx-contact;

  /* ACSS stuurt élke <button> buiten een <nav> via
     button:not(nav button, [class*="btn--"]). Die selector is (0,1,1) en wint dus van
     .lx-nav__link (0,1,0): de knop kreeg --btn-font-weight 400 en --btn-line-height 1,
     waardoor hij niet vet was en een halve regel lager dan de pillen ernaast.
     Deze compound is (0,2,0) en wint daar weer van. GEEN font-shorthand hier: die
     zet font-weight terug naar inherit. */
  &.lx-nav__link {
    font-weight: 600;
    line-height: inherit;
    text-align: inherit;
  } }
.lx-contact-pop { /* GEEN display hier: author-CSS wint van de UA-regel
     [popover]:not(:popover-open){display:none}, dus dan staat hij altijd open */
  position: fixed;
  inset: auto;
  inset-block-start: clamp(64px, 9vh, 96px);
  inset-inline-end: var(--gutter);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-color);
  inline-size: min(360px, calc(100vw - 2 * var(--gutter)));
  overflow: visible;

  &:popover-open {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  &::backdrop {
    background:var(--bg-ultra-dark);
    opacity: 0.5;
  }

  /* waar anchor-positioning bestaat, exact onder de knop */
  @supports (anchor-name: --a) {
    position-anchor: --lx-contact;
    inset-block-start: calc(anchor(bottom) + var(--space-xs));
    inset-inline-end: anchor(right);
  } }
.lx-cpop-card { position: relative;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text-color) 16%, transparent);
  overflow: hidden; }
.lx-cpop-book { display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-xs);
  padding-inline-end: var(--space-m);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease;

  &:hover {
    border-color: var(--primary);
  }

  &:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  } }
.lx-cpop-book__icon { display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  flex: 0 0 auto;
  border-radius: calc(var(--radius) * 0.8);
  overflow: hidden;

  /* het merkteken is zelf al een vlak rondje, dus laat het de tegel vullen */
  & svg {
    inline-size: 100%;
    block-size: 100%;
    display: block;
  } }
.lx-cpop-book__body { display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0; }
.lx-cpop-book__title { font-size: var(--text-s);
  font-weight: 600;
  color: var(--text-color); }
.lx-cpop-book__meta { display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--text-dark-muted); }
.lx-cpop-dot { inline-size: 7px;
  block-size: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.lx-cpop-card__arrow { position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-end: var(--space-xs);
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--text-dark-muted); }
.lx-cpop-general { display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-s); }
.lx-cpop-label { margin: 0;
  font-size: var(--text-xs);
  color: var(--text-dark-muted);
  font-weight: 600; }
.lx-cpop-general__rows { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .5em; }
.lx-cpop-row { display: flex;
  flex-direction: column;
  gap: 1px;
  min-inline-size: 0; }
.lx-cpop-row__label { margin: 0;
  font-size: var(--text-xs);
  color: var(--text-dark-muted); }
.lx-cpop-row__value { display: flex;
  align-items: center;
  gap: 2px;
  min-inline-size: 0; }
.lx-cpop-row__link { font-size: var(--text-xs);
  color: var(--text-color);
  text-decoration: none;
  overflow-wrap: anywhere;
  min-inline-size: 0;

  &:hover {
    color: var(--primary);
    text-decoration: underline;
  } }
.lx-cpop-copy { display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) * 0.8);
  background: transparent;
  color: var(--text-dark-muted);
  font: inherit;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;

  &:hover {
    background: var(--base-light);
    color: var(--text-color);
  }

  &:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
  }

  /* de JS zet dit vlaggetje na een geslaagde kopie; het icoon wordt een vinkje */
  &[data-copied="true"] {
    color: var(--primary);

    & .lx-cpop-copy__icon {
      font-size: 0;
    }

    & .lx-cpop-copy__icon::after {
      content: "✓";
      font-size: var(--text-s);
    }
  } }
.lx-cpop-copy__icon { font-size: var(--text-s);
  line-height: 1; }
.lx-cpop-divider { block-size: 0;
  border-block-start: 1px dashed color-mix(in srgb, var(--text-color) 22%, transparent);
  margin-block: 2px; }
.lx-cpop-cols { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-xs); }
.lx-cpop-col { display: flex;
  flex-direction: column;
  gap: 1px;
  min-inline-size: 0; }
.lx-cpop-col__label { margin: 0;
  font-size: var(--text-xs);
  color: var(--text-dark-muted);
  font-weight: 600; }
.lx-cpop-col__value { margin: 0;
  font-size: var(--text-xs);
  font-style: normal;   /* <address> staat standaard cursief */
  color: var(--text-color); }
.lx-cpop-line { display: block; }
.lx-contact-card { display: flex;
  align-items: stretch;
  gap: .5em;
  padding: 1em; }
.lx-contact-card__photo-wrapper { inline-size: 72px;
  block-size: auto;
  aspect-ratio: 1; }
.lx-frame { position: relative;
  background: var(--base-light);
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition); }
.lx-contact-card__photo { object-fit: cover;
  width: 100%;
  height: 100%; }
.lx-contact-card__body { display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5em;
  min-inline-size: 0; }
.lx-contact-card__name { font-weight: 600;
  font-size: var(--text-s); }
.lx-contact-card__link { font-size: var(--text-xs);
  color: var(--text-dark-muted);
  text-decoration: none;
  overflow-wrap: anywhere;
  
  &:hover {
    color: var(--primary);
    text-decoration: underline;
  } }
.scheme-switch-bravo { --switch-size: 16%;
  --icon-size: 10em;
  --moon-color: #d9fbff;
  --star-color: var(--moon-color);
  --sun-color: #ffc233;
  inline-size: 100%;
  max-inline-size: max-content;
  inline-size: 36px;
  block-size: 36px;
  aspect-ratio: 1;
  min-inline-size: 0;
  min-block-size: 0;
  display: grid;
  place-items: center;
  padding: 0;
  position: relative;
  overflow: visible; }
.scheme-switch-bravo__icon { font-size: var(--switch-size);
  min-inline-size: 0;
  min-block-size: 0;
  display: flex;
  inline-size: 100%;
  block-size: 100%;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  transition:
    rotate 400ms ease-in-out,
    box-shadow 400ms ease-in-out,
    background 400ms ease-in-out;

  /* # Sun */
  [data-current-scheme='sun' i] & {
    font-size: calc(var(--switch-size) * 1.2);
    background: var(--sun-color);
    inline-size: calc(var(--icon-size) * 0.7);
    block-size: calc(var(--icon-size) * 0.7);
    rotate: 0deg;
    box-shadow:
      3em 3em 0 5em var(--sun-color) inset,
      0 -5em 0 -2.7em var(--sun-color),
      3.5em -3.5em 0 -3em var(--sun-color),
      5em 0 0 -2.7em var(--sun-color),
      3.5em 3.5em 0 -3em var(--sun-color),
      0 5em 0 -2.7em var(--sun-color),
      -3.5em 3.5em 0 -3em var(--sun-color),
      -5em 0 0 -2.7em var(--sun-color),
      -3.5em -3.5em 0 -3em var(--sun-color);
  }

  /* # Moon */
  [data-current-scheme='moon' i] & {
    font-size: calc(var(--switch-size) * 1);
    inline-size: var(--icon-size);
    block-size: var(--icon-size);
    background: transparent;
    rotate: -75deg;
    box-shadow:
      3em 2.5em 0 0em var(--moon-color) inset,
      /* ## Stars */ color-mix(in hsl, var(--star-color, white) 70%, transparent) 0em -7em 0 -4.5em,
      var(--star-color, white) 2em 6em 0 -4em,
      var(--star-color, white) -4em -7em 0 -4.3em,
      var(--star-color, white) 6em 2em 0 -4.2em,
      color-mix(in hsl, var(--star-color, white) 70%, transparent) 4.5em 4em 0 -4.5em,
      var(--star-color, white) -8em 0.5em 0 -4.4em,
      color-mix(in hsl, var(--star-color, white) 70%, transparent) -6em -4em 0 -4.5em,
      color-mix(in hsl, var(--star-color, white) 70%, transparent) -1em 7em 0 -4.5em;
  } }
:where([data-etch-element="section"]) { inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; }
:where([data-etch-element="container"]) { inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto; }
.full-width { grid-column: full;
  padding-inline: var(--gutter); }
.lx-h1 { max-inline-size: 25ch; }
.lx-serif { font-family: var(--lx-serif); font-style: italic; }
.lx-hero__grid { width: 100%;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: clamp(240px, 48vh, 520px) auto;
  gap: calc(var(--grid-gap) / 2);

  :has(> &) {
    container-type: inline-size;
  }
  @container (inline-size >= 61.875rem) {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    grid-template-rows: 1fr;
    max-block-size: 63.6875rem;

  } }
.lx-hero__media { object-fit: cover; }
.background-video { :has(> &) {
    position: relative;
    isolation: isolate;
  }
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1; }
.background-video__video { position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover; }
.background-video__source { inline-size: 100%;
  block-size: 100%;
  position: absolute;
  inset: 0; }
.lx-hero__rail { position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
  margin-block-start: var(--space-m);


  :has(> &) {
    container-type: inline-size;
  }

  @container (inline-size >= 61.875rem) {
    block-size: 100%;
    margin-block-start: 0;
    min-block-size: 0; /* anders kan het kind niet scrollen */
  } }
.lx-hero__rail-title { margin: 0;
  font-size: var(--h3);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--text-dark-muted);
  padding-block-start: 0.5em;
  border-top: var(--border);

  @container (inline-size >= 61.875rem) {
    display: none;
  } }
.lx-hero__rail-list { list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: var(--grid-2);
  gap: var(--grid-gap);
  
  /* nog smaller — terug naar een kolom */
  @container (inline-size < 40rem) {
    grid-template-columns: var(--grid-1);
    .lx-hero-card {
      flex-direction: row;
    }
    .lx-hero-card__media-wrapper {
      order: -1;
      aspect-ratio: 1;
      inline-size: clamp(64px, 20%, 110px);
      align-self: start;
    }
  }
  
  /* hero staat naast elkaar — rail is de smalle zijbalk */
  @container (inline-size >= 61.875rem) {
    grid-template-columns: var(--grid-1);
    grid-auto-rows: max-content;
    flex: 1;
    min-block-size: 0;
    overflow-y: hidden;
  
    /* scrollen mag, scrollbar niet tonen */
    scrollbar-width: none;
    -ms-overflow-style: none;
  
    &::-webkit-scrollbar {
      display: none;
    }
  
    &:hover {
      overflow-y: auto;
    }
  } }
.lx-hero__rail-item { display: grid; }
.lx-hero-card { display: flex;
  border: var(--border);
  border-radius: var(--radius);
  transition: var(--transition);
  gap: 0.5em;
  flex-direction: column;

  &:hover {
    background: var(--white);
    transition: var(--transition);
  }
  &:hover .lx-frame {
    transform: scale(0.95);
    transition: var(--transition);
  } }
.lx-hero-card__content-wrapper { padding: .5em; }
.lx-label { font-size: var(--text-s);
  color: var(--primary-dark);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600; }
.lx-label--row { display: flex; justify-content: space-between; gap: var(--space-xs); }
.lx-card__title { margin: var(--space-xs) 0 0; font-size: var(--h4); letter-spacing: -0.02em; font-weight: 500; }
.lx-card__body { font-size: var(--text-xs);
  line-height: var(--text-line-height);
  color: var(--text-dark-muted); }
.lx-frame--soft { background: var(--base-ultra-light); border-radius: var(--radius-s, 3px); }
.lx-hero-card__media-wrapper { inline-size: 100%;
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  overflow: hidden; }
.lx-hero-card__img { inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block; }
.lx-statement { max-inline-size: var(--width-60);
  color: var(--text-dark);
  font-size: var(--h1);
  margin: 0 auto;
  text-align: center;
  text-wrap: pretty; }
.lx-grid { margin-top: var(--content-gap); flex: 1; display: grid; gap: var(--grid-gap); }
.lx-grid--services { grid-template-columns: var(--grid-auto-3); }
.lx-card--service { padding: var(--space-m) var(--space-s);
   display: flex;
  border: var(--border);
  border-radius: var(--radius);
  transition: var(--transition);
  gap: 0.5em;
  flex-direction: column;

  &:hover {
    background: var(--white);
    transition: var(--transition);
  }
  &:hover .lx-frame {
    transform: scale(0.95);
    transition: var(--transition);
  } }
.lx-dot--on { color: var(--accent); }
.lx-card__text { margin: var(--space-xs) 0 0; font-size: var(--text-xs); line-height: var(--text-line-height); color: var(--text-dark-muted); }
.lx-service__img { margin-top: var(--space-xs); block-size: clamp(130px, 13vh, 250px); }
.lx-card--lift { transition: transform var(--transition-duration) var(--ease-snappy);
&:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { &:hover { transform: none; } } }
.lx-dot--off { color: var(--lx-ink-faint); }
.lx-work__row { display: grid;
  grid-template-columns: var(--grid-1-3);
  gap: var(--grid-gap);
  margin-bottom: var(--grid-gap);
&:first-of-type { margin-top: var(--content-gap); }
&:last-of-type { margin-bottom: 0; }
@media (width < 900px) { grid-template-columns: var(--grid-1); } }
.lx-work__card { display: flex; flex-direction: column; justify-content: space-between;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--space-xs);
  gap: var(--space-xs); }
.lx-work__client { display: flex; align-items: center; gap: var(--space-xs); }
.lx-work__swatch { inline-size: var(--icon-size-s); block-size: var(--icon-size-s); border-radius: var(--radius-s, 3px); display: inline-block; }
.lx-work__swatch--green { background: var(--primary); }
.lx-work__name { font-size: var(--text-xs); font-weight: 500; }
.lx-work__note { margin: 0; font-size: var(--text-xs); line-height: var(--text-line-height); color: var(--lx-ink-soft); }
.lx-work__tiles { display: grid;
  grid-template-columns: var(--grid-3);
  gap: var(--grid-gap); }
.lx-work__tile { block-size: clamp(210px, 21vh, 400px); }
.lx-work__swatch--orange { background: var(--accent); }
.lx-grid--quotes { grid-template-columns: var(--grid-auto-2); }
.lx-quote__media { block-size: clamp(340px, 34vh, 620px); }
.lx-frame__play { position: absolute; left: var(--space-xs); bottom: var(--space-xs);
  display: flex; align-items: center; gap: var(--space-xs);
  pointer-events: none; }
.lx-frame__play-btn { background: var(--text-color); color: var(--white);
  border-radius: var(--radius-s, 3px);
  padding: 5px var(--space-xs); font-size: var(--text-xs); }
.lx-frame__play-name { background: rgba(255,255,255,0.94);
  border-radius: var(--radius-s, 3px);
  padding: 5px var(--space-xs); font-size: var(--text-xs); }
.lx-quote { background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--space-l) var(--space-m);
  text-align: center; }
.lx-quote__text { margin: 0 auto;
  font-family: var(--lx-serif); font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--heading-line-height);
  max-inline-size: 24ch; }
.lx-quote__by { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--lx-ink-soft); }
.lx-exp { margin-top: var(--content-gap);
  flex: 1;
  columns: 5 clamp(190px, 15vw, 340px);
  column-gap: var(--grid-gap);
@media (width < 1100px) { columns: 3 clamp(190px, 24vw, 340px); }
@media (width < 900px) { columns: 2 clamp(150px, 40vw, 340px); }
@media (width < 600px) { columns: 1; } }
.lx-exp__item { break-inside: avoid; margin-bottom: var(--grid-gap); }
.lx-exp__frame--a { block-size: clamp(230px, 23vh, 430px); }
.lx-caption { margin-top: 5px; font-size: var(--text-xs); color: var(--lx-ink-soft); }
.lx-exp__frame--b { block-size: clamp(300px, 30vh, 560px); }
.lx-exp__frame--c { block-size: clamp(260px, 26vh, 490px); }
.lx-exp__frame--d { block-size: clamp(210px, 21vh, 400px); }
.lx-exp__frame--e { block-size: clamp(250px, 25vh, 470px); }
.lx-about__grid { margin-top: var(--content-gap); flex: 1;
  display: grid;
  grid-template-columns: var(--grid-1-2);
  gap: var(--grid-gap);
  align-items: stretch;
@media (width < 900px) { grid-template-columns: var(--grid-1); } }
.lx-about__portrait { min-block-size: clamp(420px, 44vh, 800px);
@media (width < 900px) { min-block-size: clamp(320px, 40vh, 560px); } }
.lx-frame__tag { position: absolute; left: var(--space-xs); bottom: var(--space-xs);
  background: rgba(255,255,255,0.94);
  border-radius: var(--radius-s, 3px);
  padding: 4px var(--space-xs); font-size: var(--text-xs);
  pointer-events: none; }
.lx-about__card { background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--space-l) var(--space-l);
  display: flex; flex-direction: column; justify-content: center;
@media (width < 600px) { padding: var(--space-m) var(--space-s); } }
.lx-about__p { margin: var(--space-xs) 0 0; font-size: var(--text-m); line-height: var(--text-line-height); color: var(--text-dark-muted); max-inline-size: 60ch; }
.lx-about__p--first { margin-top: var(--space-s); }
.lx-tags { margin-top: var(--space-m); display: flex; flex-wrap: wrap; gap: var(--grid-gap); }
.lx-tag { background: var(--base-ultra-light);
  border-radius: var(--radius-s, 3px);
  padding: 6px var(--space-xs); font-size: var(--text-xs); color: var(--text-dark-muted); }
.lx-about__actions { margin-top: var(--space-m); display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.lx-btn { display: inline-flex;
align-items: var(--btn-align-items);
gap: var(--space-xs);
border-radius: var(--btn-radius);
font-weight: var(--btn-font-weight);
line-height: var(--btn-line-height);
letter-spacing: var(--btn-letter-spacing);
text-decoration: var(--btn-text-decoration);
transition: background var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing); }
.lx-btn--green { background: var(--btn-background);
color: var(--btn-text-color);
padding: var(--btn-padding-block) var(--btn-padding-inline);
&:hover { background: var(--accent); color: var(--btn-text-color-hover); } }
.lx-btn--md { padding: var(--btn-padding-block) var(--btn-padding-inline);
font-size: var(--btn-font-size); }
.lx-signature { font-family: var(--lx-serif); font-style: italic; font-size: var(--h4); color: var(--text-dark-muted); }
.studio__container { display: grid;
  grid-template-columns: var(--grid-3-2);
  :has(> &) {
    container-type: inline-size;
  }
  @container (inline-size <= 58.5rem) {
    grid-template-columns: var(--grid-1);
 
    
  } }
.lx-studio__content-wrapper { background: var(--neutral-light);
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: var(--border); }
.lx-studio__lead { margin: 0;
  font-size: var(--h3);
  line-height: var(--heading-line-height); letter-spacing: -0.02em;
  max-inline-size: 26ch; }
.lx-studio__sub { margin: var(--space-s) 0 0;
  font-size: var(--h3);
  line-height: var(--heading-line-height); letter-spacing: -0.02em;
  max-inline-size: 30ch;
  color: var(--lx-ink-soft); }
.lx-studio__actions { display: flex; gap: var(--grid-gap); margin-top: var(--space-m); flex-wrap: wrap; }
.lx-btn--ghost { background: var(--white);
border: var(--border);
padding: var(--btn-padding-block) var(--btn-padding-inline);
font-size: var(--btn-font-size); }
.lx-studio__grid { display: grid; grid-template-columns: var(--grid-2); gap: var(--grid-gap); }
.lx-studio__tile { block-size: clamp(220px, 22vh, 400px); }
.lx-studio__tile--wide { grid-column: 1 / -1; }
#contact { background: var(--primary-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--content-gap); }
.lx-cta__container { display: flex;
  flex-direction: column;
  align-items: center;
	justify-content: center; }
.lx-cta__title { margin: 0;
  font-size: var(--h2);
  line-height: var(--heading-line-height);
  letter-spacing: -0.035em;
  font-weight: var(--heading-font-weight);
  color: var(--white);
  text-wrap: balance;
	text-align: center;
  & .lx-serif {
    color: var(--accent-light);
  } }
.lx-cta__sub { margin: var(--space-xs) auto 0; max-inline-size: var(--width-30);
  font-size: var(--text-s); line-height: var(--text-line-height);
  color: rgba(239,237,234,0.72); }
.lx-cta__meta { margin-top: var(--space-s);
  font-style: italic;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
  font-size: var(--text-xs);
  color: rgba(239, 237, 234, 0.55); }
.etch-drawer { /* etch drawer */
    --etch-drawer-transition-duration: 0.35s;
    --etch-drawer-transition-timing-function: ease-in-out;
    --etch-drawer-z-index: 1000;

    /* Create positioning context for absolute children if needed */
    position: relative;

    /* etch drawer overlay */
    /* variable set in props */
    --etch-drawer-overlay-background: var(--etch-drawer-backdrop-color);
    --etch-drawer-overlay-z-index: calc(var(--etch-drawer-z-index) - 1);

    /* etch drawer panel */
    --etch-drawer-panel-background: var(--etch-drawer-background-color);
    /* default, can be overridden by props or JS */
    --etch-drawer-panel-max-width: 400px;
    --etch-drawer-panel-max-height: fit-content;
    --etch-drawer-panel-box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    /* default, set by JS if WordPress admin bar exists */
    --etch-drawer-admin-bar-height: 0;

    /* etch drawer close button */
    --etch-drawer-close-hover-background: #f5f5f5;
    --etch-drawer-close-padding: 0.5rem;
    --etch-drawer-close-border-radius: 0.25rem;
    --etch-drawer-close-position: 0;

    /* etch drawer content */
    /* variable set by props */
    --etch-drawer-content-padding: var(--etch-drawer-padding);

    :where(.etch-drawer__overlay) {
        position: fixed;
        inset: 0;
        background: var(--etch-drawer-overlay-background);
        z-index: var(--etch-drawer-overlay-z-index);
        opacity: 0;
        visibility: hidden;
        transition:
            opacity var(--etch-drawer-transition-duration) var(--etch-drawer-transition-timing-function),
            visibility var(--etch-drawer-transition-duration) var(--etch-drawer-transition-timing-function);
    }

    :where(.etch-drawer__overlay[aria-hidden='false']) {
        opacity: 1;
        visibility: visible;
    }

    :where(.etch-drawer__panel) {
        position: fixed;
        background: var(--etch-drawer-panel-background);
        width: 100%;
        /* variable set by props */
        max-width: var(--etch-drawer-panel-max-width);
        z-index: var(--etch-drawer-z-index);
        box-shadow: var(--etch-drawer-panel-box-shadow);
        max-height: 100vh;
        overflow: hidden;
        transition: transform var(--etch-drawer-transition-duration) var(--etch-drawer-transition-timing-function);
    }

    /* Use parent data attribute instead of panel data-side */
    :where([data-etch-drawer-placement='left'] .etch-drawer__panel) {
        top: 0;
        left: 0;
        bottom: 0;
        transform: translateX(-100%);
    }

    :where([data-etch-drawer-placement='right'] .etch-drawer__panel) {
        top: 0;
        right: 0;
        bottom: 0;
        transform: translateX(100%);
    }

    :where([data-etch-drawer-placement='top'] .etch-drawer__panel) {
        top: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        height: 100%;
        max-height: var(--etch-drawer-panel-max-height);
        transform: translateY(-100%);
    }

    :where([data-etch-drawer-placement='bottom'] .etch-drawer__panel) {
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        height: 100%;
        max-height: var(--etch-drawer-panel-max-height);
        transform: translateY(100%);
    }

    :where(.etch-drawer__panel[aria-hidden='false']) {
        transform: translate(0, 0);
    }

    :where(.etch-drawer__panel[hidden]) {
        display: none;
    }

    :where(.etch-drawer__close) {
        position: absolute;
        top: var(--etch-drawer-close-position);
        right: var(--etch-drawer-close-position);
        padding: var(--etch-drawer-close-padding);
        border-radius: var(--etch-drawer-close-border-radius);
        transition: background-color 0.2s ease;
    }

    :where(.etch-drawer__close:hover) {
        background: var(--etch-drawer-close-hover-background);
    }

    :where(.etch-drawer__close:focus-visible) {
        outline: 2px solid #2466e8;
        outline-offset: 2px;
    }

    /* Close Button Variants */
    :where(.etch-drawer__close--label-icon) {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    :where(.etch-drawer__close--icon-only svg),
    :where(.etch-drawer__close--label-icon svg) {
        width: 1.25rem;
        height: 1.25rem;
    }

    :where(.etch-drawer__content) {
        padding: var(--etch-drawer-content-padding);
        overflow-y: auto;
        height: 100%;
    }

    /* Push behavior - adjust body when drawer is open */
    /* Apply transition to body whenever push body drawer exists (not just when open) */
    body:has(&[data-etch-drawer-display-method='pushBody']) {
        transition: margin var(--etch-drawer-transition-duration) var(--etch-drawer-transition-timing-function);
    }

    body:has(&[data-etch-drawer-display-method='pushBody'][data-etch-drawer-placement='left'] .etch-drawer__panel[aria-hidden='false']) {
        margin-left: var(--etch-drawer-panel-max-width);
    }

    body:has(&[data-etch-drawer-display-method='pushBody'][data-etch-drawer-placement='right'] .etch-drawer__panel[aria-hidden='false']) {
        margin-left: calc(-1 * var(--etch-drawer-panel-max-width));
    }

    /* Top and bottom push margins are set dynamically via JavaScript based on actual drawer height */
    body:has(&[data-etch-drawer-display-method='pushBody'][data-etch-drawer-placement='top'] .etch-drawer__panel[aria-hidden='false']) {
        margin-top: var(--etch-drawer-panel-max-height);
    }

    body:has(&[data-etch-drawer-display-method='pushBody'][data-etch-drawer-placement='bottom'] .etch-drawer__panel[aria-hidden='false']) {
        margin-top: calc(-1 * var(--etch-drawer-panel-max-height));
    }

    /* WordPress admin bar adjustments */
    :where([data-etch-drawer-placement='left'] .etch-drawer__panel),
    :where([data-etch-drawer-placement='right'] .etch-drawer__panel) {
        /* JS will set --etch-drawer-admin-bar-height if admin bar exists */
        top: var(--etch-drawer-admin-bar-height, 0);
        height: calc(100vh - var(--etch-drawer-admin-bar-height, 0));
        max-height: calc(100vh - var(--etch-drawer-admin-bar-height, 0));
    }

    :where([data-etch-drawer-placement='top'] .etch-drawer__panel) {
        top: var(--etch-drawer-admin-bar-height, 0);
    } }
.lx-preview { block-size: 100%;
  overflow-y: auto;
  padding: var(--space-m); }
.lx-drawer-test { display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-m) var(--gutter); }
.lx-footer { padding: var(--space-xxl) var(--gutter) var(--space-m); }
.lx-footer__cols { display: grid; grid-template-columns: var(--grid-auto-3); gap: var(--space-m); }
.lx-footer__head { font-size: var(--h5); font-weight: 600; letter-spacing: -0.01em; }
.lx-footer__list { display: flex; flex-direction: column; gap: var(--space-xs);
  margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--text-dark-muted); }
.lx-footer__link { display: flex; align-items: center; gap: var(--space-xs); color: inherit; }
.lx-footer__swatch { inline-size: var(--icon-size-s); block-size: var(--icon-size-s); border-radius: var(--radius-s, 3px); display: inline-block; }
.lx-footer__swatch--green { background: var(--primary); }
.lx-footer__swatch--orange { background: var(--accent); }
.lx-footer__bottom { margin-top: var(--space-l);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs);
  font-size: var(--text-xs); color: var(--lx-ink-soft); }
.lx-menu-panel { padding-inline: var(--space-s);
  overflow-y: auto;
  block-size: 100%;
  display: flex;
  flex-direction: column;
  margin-inline: auto;

  /* de UA-regel [hidden]{display:none} verliest van deze class,
     dus hier expliciet terugzetten */
  &[hidden] {
    display: none;
  } }
.services-drawer { background-color: var(--color-light, #fff);
  color: var(--color-dark, #111); }
.services-drawer__container { gap: var(--space-xl); }
.services-drawer__eyebrow { margin: 0;
  font-family: inherit;
  font-size: var(--h3);
  font-weight: 600;
  line-height: 1;
  color: var(--color-dark, #111); }
.services-drawer__intro { font-family: serif;
  font-size: var(--h1);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--color-dark, #111);
  text-wrap: balance; }
.services-drawer__grid { display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 5rem);
	inline-size: 100%;

	@media (max-width: 61.9375rem) {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	} }
.services-drawer__column { display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-inline-size: 0; }
.services-drawer__title { margin: 0;
	font-size: clamp(1.75rem, 2.2vw, 3rem);
	line-height: 1.05;
	font-weight: 600;
	color: var(--color-dark, #111);
	text-wrap: balance; }
.services-drawer__list { display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none; }
.services-drawer__item { font-size: clamp(1.125rem, 1.4vw, 1.5rem);
	line-height: 1.2;
	font-weight: 400;
	color: color-mix(in srgb, var(--color-dark, #111) 62%, white); }
.approach-compare__wave path { fill: none;
	stroke: var(--approach-line);
	stroke-width: 1.4;
	stroke-dasharray: 2 7;
	stroke-linecap: round; }
.approach-compare__note[data-seq] { opacity: 0;
	transition: opacity 0.5s ease; }

/* --- etch-lx-design-system-default --- */
/* Fonts: self-hosted via de Astro Fonts API (astro.config.mjs) in plaats van @import van Google. */

/* ==========================================================================
   LX.Digital — globale laag
   Alle waarden komen uit Automatic.css. Wat hieronder staat is uitsluitend
   wat ACSS (nog) geen token voor heeft; alles is afgeleid van een ACSS-token
   zodat er één bron van waarheid blijft.
 /*  ========================================================================== */

/* In de Etch-build stonden deze variabelen buiten een regel en werden ze genegeerd. */
:root {
  /* Inkt-niveau 3 uit de guide (labels/captions). ACSS heeft --text-color en
     --text-dark-muted; een derde, lichter niveau bestaat er niet.            */
  --lx-ink-soft:     color-mix(in srgb, var(--text-color) 45%, transparent);
  /* De inactieve statusstip. */
  --lx-ink-faint:    color-mix(in srgb, var(--text-color) 25%, transparent);
  /* Randsterkte om beeldtegels (guide: 0.22). --border-color-dark draagt de
     haarlijn om kaarten; ACSS heeft maar één donkere randkleur.              */
  --lx-line-strong:  color-mix(in oklch, var(--text-color) 22%, transparent);

  /* Accentfont. ACSS heeft geen slot voor een derde lettertype. */
  --lx-serif: var(--font-instrument-serif, "Instrument Serif", serif);
  --lx-font:  "Schibsted Grotesk", system-ui, sans-serif;
}

/* --- Motion --------------------------------------------------------------
   Reveal bij scroll. Vooraf verborgen zodat er geen flits is; de module in
   de head zet data-revealed. Zonder JS blijft alles zichtbaar.               */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--transition-duration) var(--ease-snappy),
              transform var(--transition-duration) var(--ease-snappy);
}
[data-reveal][data-revealed] {
  opacity: 1;
  transform: translateY(0);
}
@media (scripting: none) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- etch-custom-media-definitions-custom-media --- */
/* Add your custom media definitions here using @custom-media rules. Example: @custom-media --small-screen (width < 600px);*/
@custom-media --medium-screen (width < 900px); 
@custom-media --large-screen (width < 1100px);

/* --- etch-drawer-6cecd20 --- */
/* ─────────────────────────────────────────────────────────────
   Bottom drawer — native popover, geen JS
   ───────────────────────────────────────────────────────────── */

.bm-drawer {
  --drawer-duration: 460ms;
  --drawer-easing: cubic-bezier(0.32, 0.72, 0, 1);

  /* ── Maat-knoppen ────────────────────────────────────────────────
     Overschrijf deze op de modifier-class, desnoods per breakpoint.
     Elke drawer heeft daarmee zijn eigen maat, los van de andere. */
  --drawer-inset: var(--space-xs);   /* marge tot de schermrand */
  --drawer-block-size: auto;         /* auto = zo hoog als de inhoud */
  --drawer-max-block-size: 88dvh;    /* plafond */
  --drawer-max-inline-size: none;    /* none = volle breedte min de inset */
  --drawer-radius: var(--radius-l);

  position: fixed;
  inset: auto var(--drawer-inset) var(--drawer-inset);
  z-index: 9999;
  inline-size: auto;
  max-inline-size: var(--drawer-max-inline-size);
  block-size: var(--drawer-block-size);
  max-block-size: var(--drawer-max-block-size);
  margin-block: 0;
  margin-inline: auto;  /* centreert zodra --drawer-max-inline-size gezet is */
  border: 0;
  border-radius: var(--drawer-radius);
  padding-block: var(--space-s) max(var(--space-m), env(safe-area-inset-bottom));
  padding-inline: var(--space-m);
  background-color: var(--white);
  color: var(--text-dark);
  box-shadow: var(--box-shadow-3);

  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  overflow-y: auto;
  overscroll-behavior: contain;

  translate: 0 100%;
  opacity: 0;
  transition:
    translate var(--drawer-duration) var(--drawer-easing),
    opacity var(--drawer-duration) var(--drawer-easing),
    overlay var(--drawer-duration) allow-discrete,
    display var(--drawer-duration) allow-discrete;

  &:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  &::backdrop {
    background-color: hsl(from black h s l / 0.45);
    opacity: 0;
    transition:
      opacity var(--drawer-duration) var(--drawer-easing),
      overlay var(--drawer-duration) allow-discrete,
      display var(--drawer-duration) allow-discrete;
  }

  &:popover-open::backdrop {
    opacity: var(--drag-progress, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    transition-duration: 1ms;

    &::backdrop {
      transition-duration: 1ms;
    }
  }
}

/* Startwaarde van de open-transitie. Moet buiten de nesting: @starting-style
   binnen & werkt niet in elke engine hetzelfde. */
@starting-style {
  .bm-drawer:popover-open {
    translate: 0 100%;
    opacity: 0;
  }

  .bm-drawer:popover-open::backdrop {
    opacity: 0;
  }
}

/* Alleen de menu-drawer is mobiel-only. De afspraken-drawer hangt aan de
   sticky afspraakbalk, en die staat op élk scherm. */
.bm-drawer--menu {
  /* Erft de basismaten: hoogte volgt de inhoud, breedte is scherm min inset.
     Wil je 'm anders? Zet hier --drawer-max-block-size / --drawer-max-inline-size. */
  @media (--nav-desktop) {
    display: none;
  }
}

/* Afspraken-drawer: iframe vult 'm, dus geen inline padding en geen eigen scroll. */
.bm-drawer--appointment {
  --drawer-block-size: 94dvh;
  --drawer-max-block-size: 94dvh;

  padding-inline: 0;
  padding-block: var(--space-s) env(safe-area-inset-bottom);
  gap: var(--space-xs);
  overflow: hidden;

  & .bm-drawer__head {
    padding-inline: var(--space-m);
  }

  & .bm-drawer__frame {
    display: block;
    flex: 1 1 auto;
    min-block-size: 0;
    inline-size: 100%;
    border: 0;
  }

  /* Op desktop geen volle breedte — gecentreerd paneel dat nog steeds van
     onderen komt. */
  @media (--nav-desktop) {
    --drawer-max-inline-size: max(50vw, 56.25rem);
    --drawer-block-size: 90dvh;
    --drawer-max-block-size: 90dvh;
  }
}

/* Het zichtbare streepje is het ::before. Het blokje eromheen is puur
   raakvlak — 4px is niet te raken met een duim. */
.bm-drawer__grabber {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 1.625rem;
  margin-block-start: -0.25rem;

  &::before {
    content: '';
    inline-size: 3.25rem;
    block-size: 0.375rem;
    border-radius: var(--radius-50);
    background-color: var(--neutral);
    transition:
      inline-size var(--transition-duration) var(--transition-timing),
      background-color var(--transition-duration) var(--transition-timing);
  }

  &:hover::before {
    inline-size: 4rem;
    background-color: var(--neutral);
  }
}

.bm-drawer.is-dragging .bm-drawer__grabber::before {
  inline-size: 4rem;
  background-color: var(--neutral);
  transition: none;
}

.bm-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}

.bm-drawer__title {
  margin: 0;
  font-size: var(--text-s);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dark-muted);
}

.bm-drawer__close {
  --empty-element-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.4375rem;
  block-size: 3.4375rem;
  margin-inline-end: -0.375rem;
  border: 0;
  border-radius: var(--radius-circle);
  background-color: transparent;
  color: var(--text-dark);
  font-size: var(--text-xxl);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-duration) var(--transition-timing);

  &:hover {
    background-color: var(--neutral-ultra-light);
  }

  &:focus-visible {
    outline: 0.125rem solid currentColor;
    outline-offset: 0.125rem;
  }
}

.bm-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.bm-drawer__item + .bm-drawer__item {
  border-block-start: var(--border-light);
}

.bm-drawer__link {
  display: flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding-block: var(--space-xs);
  font-size: var(--text-l);
  text-decoration: none;
  color: var(--text-dark);

  &:hover {
    color: var(--primary);
  }

  &:focus-visible {
    outline: 0.125rem solid currentColor;
    outline-offset: 0.125rem;
  }
}

.bm-drawer__foot {
  margin-block-start: var(--space-xs);
}

/* ACSS laadt ná deze stylesheet en [class*="btn--"] heeft dezelfde
   specificiteit als deze class — dus sturen we de knop via zijn tokens.
   Anders wint ACSS' --btn-min-width: 20rem en --btn-width: max-content. */
.bm-drawer__cta {
  --btn-width: 100%;
  --btn-min-width: 0;
  min-block-size: 3rem;
}

/* Hamburger wordt een kruis zolang de drawer openstaat. De popover-API zet
   geen aria-expanded als content-attribuut, dus dat gaat via :has(). */
body:has(.bm-drawer--menu:popover-open) {
  & .site-header__toggle-line {
    transition: transform var(--transition-duration) var(--transition-timing),
      opacity var(--transition-duration) var(--transition-timing);
  }

  & .site-header__toggle-line:nth-child(1) {
    transform: translateY(0.4375rem) rotate(45deg);
  }

  & .site-header__toggle-line:nth-child(2) {
    opacity: 0;
  }

  & .site-header__toggle-line:nth-child(3) {
    transform: translateY(calc(0.4375rem * -1)) rotate(-45deg);
  }
}

/* Builder-canvas: een popover is display:none tot hij opengaat, dus dan zou
   je 'm nooit kunnen bewerken. Hier zetten we hem plat in de flow. */
.etch-canvas-body .bm-drawer {
  display: flex;
  position: static;
  translate: 0 0;
  opacity: 1;
  block-size: auto;
  max-block-size: none;
}

/* ── Sleep-om-te-sluiten ──────────────────────────────────────────
   Alleen de grabber en de kopbalk zijn sleepzone. De rest van de
   afspraken-drawer is een cross-origin iframe; die geeft zijn
   pointer-events toch niet door aan ons. */
[data-drawer-handle] {
  touch-action: none;
  cursor: grab;
  user-select: none;
}

[data-drawer-handle]:active {
  cursor: grabbing;
}

/* De sluitknop zit ín de kopbalk en moet gewoon klikbaar blijven. */
.bm-drawer__close {
  touch-action: auto;
  cursor: pointer;
}

.bm-drawer.is-dragging {
  transition: none;

  /* Zonder dit vangt het iframe de pointer zodra je vinger eroverheen
     komt en breekt de sleep halverwege af. */
  & .bm-drawer__frame {
    pointer-events: none;
  }
}

.bm-drawer.is-dragging::backdrop {
  transition: none;
}

/* Uitgeklapt — je komt hier door de kop omhoog te slepen. Op mobiel gaat
   hij dan echt schermvullend: geen marge, geen ronde hoeken. Op desktop
   blijft het een paneel, alleen hoger. */
.bm-drawer--appointment.is-expanded {
  --drawer-inset: 0px;
  --drawer-radius: 0px;
  --drawer-block-size: 100dvh;
  --drawer-max-block-size: 100dvh;

  @media (--nav-desktop) {
    --drawer-inset: var(--space-xs);
    --drawer-radius: var(--radius-l);
    --drawer-block-size: 96dvh;
    --drawer-max-block-size: 96dvh;
  }
}

/* --- etch-lx-preview-drawer-0f26830 --- */
/* Preview-drawer: markup die door JS wordt geinjecteerd, dus geen Etch-block.
   Daarom een globaal stylesheet in plaats van style-records. */

/* --- achtergrond: blur over de pagina --- */
.etch-drawer__overlay {
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  background: color-mix(in srgb, var(--text-color) 35%, transparent);
}

/* --- bottom sheet --- */
[data-etch-drawer-placement="bottom"] .etch-drawer__panel {
  --lx-sheet-gap: clamp(8px, 2vw, 24px);
  /* left:0/right:0 staat al op het paneel; met een kleinere max-width
     centreert margin-inline:auto hem en houdt hij ruimte over aan weerszijden */
  max-width: min(1280px, calc(100% - 2 * var(--lx-sheet-gap)));
  margin-inline: auto;
  border-start-start-radius: var(--radius);
  border-start-end-radius: var(--radius);
  display: flex;
  flex-direction: column;
}

/* --- sleepgreep --- */
.lx-drawer__grab {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 10px 6px;
  cursor: grab;
  touch-action: none;   /* anders scrollt de browser mee tijdens het slepen */
}
.lx-drawer__grab:active { cursor: grabbing; }
.lx-drawer__grab::before {
  content: "";
  inline-size: 44px;
  block-size: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-color) 25%, transparent);
}
/* tijdens het slepen volgt het paneel de vinger zonder na te ijlen */
.etch-drawer__panel.is-dragging { transition: none !important; }

/* het paneel is de focus-landingsplek; geen dubbele outline bij muisgebruik */
.etch-drawer__panel:focus { outline: none; }
.etch-drawer__panel:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
  .etch-drawer__panel,
  .etch-drawer__overlay { transition: none !important; }
}

/* --- inhoud --- */
.lx-preview__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  max-inline-size: 75ch;
  margin-inline: auto;
}
.lx-preview__img {
  inline-size: 100%;
  block-size: clamp(180px, 34vh, 420px);
  object-fit: cover;
  border-radius: var(--radius);
  border: var(--border);
}
.lx-preview__label {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-dark-muted);
}
.lx-preview__title {
  margin: 0;
  font-size: var(--h2);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.lx-preview__excerpt {
  color: var(--text-dark-muted);
  line-height: var(--text-line-height);
}
.lx-preview__excerpt p { margin: 0 0 var(--space-xs); }
.lx-preview__link {
  align-self: start;
  margin-block-start: var(--space-xs);
}
.lx-preview__state {
  margin: 0;
  color: var(--text-dark-muted);
  font-size: var(--text-s);
}

/* triggers die geen button zijn krijgen role=button van de JS — geef ze ook de cursor */
[data-lx-preview][role="button"],
[data-lx-drawer-open][role="button"] { cursor: pointer; }



/* --- alleen voor schermlezers: de live region van de kopieerknoppen --- */
.lx-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}