@charset "UTF-8";
/*
	Combi Dakkapel theme
	-----------------------------------------------------------------
	Source of default.css. Edit this file, not default.css; compile with
	    npx sass --no-source-map _Codebase/_Themes/CombiDakkapel/default.scss _Codebase/_Themes/CombiDakkapel/default.css
	(or Web Compiler, compilerconfig.json).

	The onepager of combidakkapel.nl, after the Figma design "L2602002 - Combi Dakkapel - onepage website" (desktop 1728px,
	content 1528px; phones after the mobile sketch). Everything that makes the site work and lay out comes from the core
	(_Codebase/_Core/Content/Stylesheets/core.scss): wrappers, the row settings, columns, the header and mobile menu mechanics,
	form layout. The markup of the header, the footer and the blocks is this theme's own (Views).

	The font is Ballinger (Adobe Fonts): the kit is loaded by the "Head scripts" of the theme node (tab Tagging). Without it
	the system font is used.

	Sections:
	1. Settings: colours, type, the layout values the core reads
	2. Base: type, labels, links, the decorative corner
	3. Buttons
	4. Header: the fixed bar, the menu, the hero
	5. Mobile menu
	6. Rows: backgrounds, the white band, spacing
	7. Features: the advantages (list) and "Zo werken wij" (steps)
	8. Dakkapeltypes
	9. Foto met kaart
	10. Checklist and checks in rich text
	11. Aanpak met uitklaplijst, and the accordion
	12. Projecten
	13. Fotobanner met tekst
	14. Contact met formulier, and the form
	15. Veelgestelde vragen
	16. Footer
	17. Other pages (the cookie page)
*/
/* ---------------------------------------------------------------
	1. Settings
--------------------------------------------------------------- */
:root {
  /* Colours of the design (Figma variables "Kleur/..."). The theme node's colour list (tab Branding) can override them. */
  --cd-nachtblauw: var(--lz-color-nachtblauw, #143453);
  --cd-blauw: var(--lz-color-helder-blauw, #42A2C9);
  --cd-mistblauw: var(--lz-color-mistblauw, #7691AB);
  --cd-grijs-1: var(--lz-color-grijs-1, #D0D6DD);
  --cd-grijs-2: var(--lz-color-grijs-2, #E8EBEE);
  --cd-grijs-3: var(--lz-color-grijs-3, #F6F7F8);
  --cd-wit: #FFFFFF;
  --cd-donker: #000000;
  --cd-groen: #02A60C;
  --cd-veld: #CCD5DC;
  --cd-veld-tekst: #5F738B;
  /* Type */
  --cd-font: "ballinger", "Ballinger", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cd-h1: 60px;
  --cd-h2: 28px;
  --cd-h2-large: 42px;
  --cd-text: 16px;
  /* Radii and shadow */
  --cd-radius: 10px;
  --cd-radius-small: 6px;
  --cd-shadow: 0 8px 24px rgb(20 52 83 / 0.08);
  /* Layout read by the core: 1528px of content with 100px on either side at the design width. */
  --lz-wrapper: 1728px;
  --lz-gutter: clamp(20px, 5.8vw, 100px);
  --lz-section: 120px;
  --lz-space: calc(var(--lz-section) / 2);
  --lz-padding-step: var(--lz-space);
  --lz-overlap-step: var(--lz-space);
  --lz-column-gap-step: 32px;
  --lz-stack-gap: 32px;
  --lz-flow: 16px;
  --lz-row-gap: 0px;
  --lz-header: 176px;
  --cd-card-pad: 64px;
  /* The Launchpad's colour names, for the core and the forms. */
  --c-text: var(--cd-donker);
  --c-accent: var(--cd-blauw);
  --c-accent-text: var(--cd-wit);
  --c-line: var(--cd-veld);
  --c-radius: var(--cd-radius-small);
}

body.cd-scrolled {
  --lz-header: 96px;
}

@media (max-width: 1280px) {
  :root {
    --cd-h1: 48px;
    --cd-card-pad: 48px;
  }
}
@media (max-width: 1024px) {
  :root {
    --lz-header: 104px;
    --cd-h2-large: 36px;
  }
  body.cd-scrolled {
    --lz-header: 76px;
  }
}
@media (max-width: 768px) {
  :root {
    --lz-header: 88px;
    --cd-h1: 38px;
    --cd-h2: 24px;
    --cd-h2-large: 30px;
    --cd-card-pad: 24px;
    --cd-radius: 8px;
  }
  body.cd-scrolled {
    --lz-header: 68px;
  }
}
/* ---------------------------------------------------------------
	2. Base
--------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  /* An anchor ("#werkwijze") lands under the fixed bar, not behind it. */
  scroll-padding-top: 96px;
}
@media (max-width: 1024px) {
  html {
    scroll-padding-top: 76px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* reCAPTCHA v3: the badge hidden (visibility, not display: then reCAPTCHA keeps working); instead, as Google asks, the notice
   under the form (contactBlock.cshtml), only when the form has a reCAPTCHA field. */
.grecaptcha-badge {
  visibility: hidden;
}

.cd-recaptcha-notice {
  margin-top: 16px;
  display: none;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cd-veld-tekst);
}
.cd-contact__card:has(.recaptchav3withscore, .recaptcha) .cd-recaptcha-notice {
  display: block;
}
.cd-recaptcha-notice a {
  color: inherit;
  text-decoration: underline;
}
.cd-recaptcha-notice a:hover, .cd-recaptcha-notice a:focus-visible {
  text-decoration: none;
}

/* After a form is sent the page scrolls to the form card or to the field with an error (default.js, initFormScroll): 24px
   of room under the bar. */
.cd-contact__card, .umbraco-forms-field {
  scroll-margin-top: 24px;
}

body {
  background: var(--cd-nachtblauw);
  color: var(--cd-donker);
  font-family: var(--cd-font);
  font-size: var(--cd-text);
  font-weight: 400;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  line-height: 1.4;
  color: var(--cd-nachtblauw);
  hyphens: manual;
}

h1 {
  font-size: var(--cd-h1);
  line-height: 1;
}

h2 {
  font-size: var(--cd-h2);
}

h3 {
  font-size: 20px;
  font-weight: 700;
}

h4, h5, h6 {
  font-size: 18px;
  font-weight: 700;
}

strong, b {
  font-weight: 700;
}

a {
  color: inherit;
  text-underline-offset: 3px;
}

img {
  height: auto;
}

:focus-visible {
  outline: 2px solid var(--cd-blauw);
  outline-offset: 3px;
}

/* The label above a title: small capitals in bright blue. */
.lz-label, p.subtitle {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cd-blauw);
}

.lz-label + h2, .lz-label + .lz-screamer, p.subtitle + h2 {
  margin-top: 16px;
}

/* The same 16px in the sections that reset the margin of their title (contact, process, FAQ). */
:is(.cd-contact, .cd-process, .cd-faq) .lz-label + h2 {
  margin-top: 16px;
}

.cd-highlight {
  color: var(--cd-blauw);
}

.lz-skip {
  background: var(--cd-blauw);
  color: var(--cd-wit);
  border-radius: var(--cd-radius-small);
}

/* No "back to top" button on this site (it is rendered by the core's master.cshtml). */
#scrollTopBtn {
  display: none !important;
}

/* The logo (lockup.cshtml, an inline SVG): sized by its height. */
.lz-lockup {
  width: auto;
  height: 140px;
  display: block;
  transition: height 0.25s ease;
}

/* A photo in the house style: rounded, with a dark blue gradient from the right and a light touch in the corner. */
.cd-photo {
  border-radius: var(--cd-radius);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.cd-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cd-photo::after {
  content: "";
  inset: 0;
  position: absolute;
  pointer-events: none;
  background: linear-gradient(-42deg, var(--cd-mistblauw) 0%, rgba(118, 145, 171, 0) 40%), linear-gradient(270deg, rgba(20, 52, 83, 0.8) 0%, rgba(20, 52, 83, 0) 65%);
}

/* The folded corner, top right, of the cards (a triangle in a lighter grey). */
.cd-corner {
  position: relative;
  overflow: hidden;
}
.cd-corner::before {
  content: "";
  top: 0;
  right: 0;
  width: 122px;
  height: 190px;
  position: absolute;
  background: var(--cd-grijs-3);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  pointer-events: none;
}
.cd-corner > * {
  position: relative;
}
@media (max-width: 768px) {
  .cd-corner::before {
    width: 72px;
    height: 112px;
  }
}

.cd-corner--grey::before {
  background: var(--cd-grijs-2);
}

/* ---------------------------------------------------------------
	3. Buttons
	p.button is the filled button, p.link the outlined one; the same for the buttons of a form.
--------------------------------------------------------------- */
p.button, p.link {
  margin-top: 0;
}

p.button a, p.link a, .lz-menu__cta a,
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation :is(button, input[type=submit]) {
  /* As in the design: 14px 26px around 16px text at line height 1.8, a 2px border: 61px high. */
  min-height: 61px;
  padding: 14px 26px;
  background: var(--cd-blauw);
  border: 2px solid var(--cd-blauw);
  border-radius: var(--cd-radius-small);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--cd-wit);
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
p.button a:hover, p.button a:focus-visible, p.link a:hover, p.link a:focus-visible, .lz-menu__cta a:hover, .lz-menu__cta a:focus-visible,
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation :is(button, input[type=submit]):hover,
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation :is(button, input[type=submit]):focus-visible {
  background: var(--cd-nachtblauw);
  border-color: var(--cd-nachtblauw);
  color: var(--cd-wit);
}
p.button a, p.link a, .lz-menu__cta a,
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation :is(button, input[type=submit]) {
  /* A small phone: a little more compact (50px high, 15px text), so a long label keeps to one line where it can. The
     button in the bar has its own size (header). */
}
@media (max-width: 480px) {
  p.button a, p.link a, .lz-menu__cta a,
  .umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation :is(button, input[type=submit]) {
    min-height: 50px;
    padding: 10px 18px;
    font-size: 15px;
    line-height: 1.5;
  }
}

p.link a {
  background: transparent;
  color: var(--cd-blauw);
}
p.link a:hover, p.link a:focus-visible {
  background: var(--cd-blauw);
  border-color: var(--cd-blauw);
  color: var(--cd-wit);
}

/* In the hero the outlined button ("Bekijk de mogelijkheden") turns night blue on hover, as the filled one beside it. */
.cd-hero p.link a:is(:hover, :focus-visible) {
  background: var(--cd-nachtblauw);
  border-color: var(--cd-nachtblauw);
}

/* On a dark surface the hover turns white. */
:is(.cd-banner, .cd-contact__intro, .cd-footer) p.button a:is(:hover, :focus-visible) {
  background: var(--cd-wit);
  border-color: var(--cd-wit);
  color: var(--cd-nachtblauw);
}

.buttons {
  gap: 16px;
}

/* ---------------------------------------------------------------
	4. Header
--------------------------------------------------------------- */
/* The bar is fixed; the header keeps its room free. A white band runs on behind the top of the hero card. */
#header {
  padding-top: 176px;
  background: linear-gradient(to bottom, var(--cd-wit) 400px, var(--cd-nachtblauw) 400px);
}
@media (max-width: 1024px) {
  #header {
    padding-top: 104px;
    background: linear-gradient(to bottom, var(--cd-wit) 240px, var(--cd-nachtblauw) 240px);
  }
}
@media (max-width: 768px) {
  #header {
    padding-top: 88px;
  }
}
#header > .placeholder > .top {
  top: 0;
  left: 0;
  right: 0;
  height: var(--lz-header);
  position: fixed;
  background: var(--cd-wit);
  transition: height 0.25s ease, box-shadow 0.25s ease;
}
#header > .placeholder > .top .wrapper {
  gap: 40px;
}
#header .logo {
  margin-right: auto;
}
#header .navigation nav ul {
  gap: 40px;
}
#header .navigation nav ul li a {
  padding: 8px 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  color: var(--cd-donker);
  display: inline-flex;
  align-items: flex-end;
  gap: 12px;
  /* The arrow after the item: misty blue, bright blue for the section you are in. */
}
#header .navigation nav ul li a::after {
  content: "";
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background: var(--cd-mistblauw);
  -webkit-mask: url("/_Codebase/_Themes/CombiDakkapel/Images/icon-nav-arrow.svg") center/contain no-repeat;
  mask: url("/_Codebase/_Themes/CombiDakkapel/Images/icon-nav-arrow.svg") center/contain no-repeat;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
#header .navigation nav ul li a:hover, #header .navigation nav ul li a:focus-visible, #header .navigation nav ul li a[aria-current] {
  color: var(--cd-nachtblauw);
}
#header .navigation nav ul li a:hover::after, #header .navigation nav ul li a:focus-visible::after, #header .navigation nav ul li a[aria-current]::after {
  background: var(--cd-blauw);
}
#header .navigation nav ul li a:hover::after {
  transform: translate(2px, 2px);
}
#header .cd-header__button {
  flex-shrink: 0;
}
#header {
  /* As in the design: three rounded lines, right aligned; the outer ones 22px night blue, the middle one 27px bright
     blue. Open, they turn into a night blue cross. */
}
#header .hamburger {
  color: var(--cd-nachtblauw);
  align-items: flex-end;
  gap: 6px;
}
#header .hamburger span {
  width: 22px;
  height: 2px;
  background: var(--cd-nachtblauw);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease, width 0.25s ease;
}
#header .hamburger span:nth-child(2) {
  width: 27px;
  background: var(--cd-blauw);
}
#header .hamburger.active span {
  width: 26px;
}

body.cd-scrolled #header > .placeholder > .top {
  box-shadow: var(--cd-shadow);
}

body.cd-scrolled .lz-lockup {
  height: 64px;
}

@media (max-width: 1280px) {
  #header .navigation nav ul {
    gap: 28px;
  }
  #header .navigation nav ul li a {
    font-size: 17px;
  }
  #header > .placeholder > .top .wrapper {
    gap: 28px;
  }
  .lz-lockup {
    height: 96px;
  }
}
@media (max-width: 1024px) {
  #header > .placeholder > .top .wrapper {
    gap: 16px;
  }
  .lz-lockup {
    height: 80px;
  }
  body.cd-scrolled .lz-lockup {
    height: 56px;
  }
}
@media (max-width: 768px) {
  .lz-lockup {
    height: 64px;
  }
  body.cd-scrolled .lz-lockup {
    height: 48px;
  }
  /* Compact on a phone, as in the mobile sketch (46px). */
  #header .cd-header__button a {
    min-height: 46px;
    padding: 8px 16px;
    font-size: 14px;
  }
}
@media (max-width: 340px) {
  #header .cd-header__button {
    display: none;
  }
}
/*
	The hero: a light grey card with the photo on the right behind a diagonal.
	Side by side, the whole hero scales with the width of the card (container query units, cqw = 1% of the card): text,
	photo and line figure keep the proportions of the design (card 1528px), so the text never runs into the photo or the
	line figure. Up to $bp-hero the photo goes on top and the text under it.
*/
#header > .placeholder > .bottom {
  padding: 0;
  position: relative;
}
#header > .placeholder > .bottom > .wrapper {
  container-type: inline-size;
}

.cd-hero {
  min-height: min(636px, 41.6cqw);
  padding: min(128px, 8.4cqw) min(64px, 4.2cqw) 40px;
  background: var(--cd-grijs-3);
  border-radius: var(--cd-radius) var(--cd-radius) 0 0;
  box-sizing: border-box;
  position: relative;
  /* As in the design, the photo (698px) is taller than the card (636px) on a wide screen: it runs on into the grey of the
     advantages under it and has faded out fully at its own bottom. So the card only clips at the top (the round corners)
     and the sides, not at the bottom, where it would leave a hard line; z-index keeps it over the grey of the next row
     (the advantages' text starts below the photo). */
  clip-path: inset(0 0 -200px 0 round var(--cd-radius) var(--cd-radius) 0 0);
  z-index: 1;
  isolation: isolate;
}

/* On the homepage the grey of the advantages follows the card. Their edge often falls on half a pixel, where the dark page
   behind showed through as a thin line; a strip of grey under the card's bottom edge (under the photo) closes it. */
.homepage .cd-hero::before {
  content: "";
  left: 0;
  right: 0;
  bottom: -3px;
  height: 6px;
  position: absolute;
  z-index: -2;
  background: var(--cd-grijs-3);
}

.cd-hero__media {
  top: 0;
  right: 0;
  width: 74%;
  height: min(698px, 45.7cqw);
  position: absolute;
  z-index: -1;
  /* The diagonal: the photo starts 40% in at the top and at its left edge at the bottom. */
  clip-path: polygon(39.5% 0, 100% 0, 100% 100%, 0 100%);
}
.cd-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cd-hero__media {
  /* Fades into the grey of the card at the bottom and the left, dark blue on the right edge, misty in the corner. */
}
.cd-hero__media::after {
  content: "";
  inset: 0;
  position: absolute;
  background: linear-gradient(180deg, rgba(246, 247, 248, 0) 48%, rgba(246, 247, 248, 0.8) 100%), linear-gradient(180deg, rgba(246, 247, 248, 0) 69%, var(--cd-grijs-3) 100%), linear-gradient(235deg, rgba(246, 247, 248, 0) 41%, var(--cd-grijs-3) 100%), linear-gradient(-48deg, var(--cd-mistblauw) 0%, rgba(118, 145, 171, 0) 41%), linear-gradient(90deg, rgba(20, 52, 83, 0) 55%, var(--cd-nachtblauw) 100%);
}

/* The line figure over the photo (header.cshtml): drawn in the photo's own coordinates, so it lies on the same box. */
.cd-hero__figure {
  top: 0;
  right: 0;
  width: 74%;
  height: min(698px, 45.7cqw);
  position: absolute;
  z-index: 0;
  color: var(--cd-grijs-3);
  overflow: hidden;
  pointer-events: none;
}

/* 533px of 1528px: the text stays left of the line figure (at 42.5% of the card). Above the photo and the figure. */
.cd-hero__content {
  max-width: min(533px, 34.9cqw);
  position: relative;
  z-index: 1;
}
.cd-hero__content .lz-screamer {
  font-size: min(60px, 3.93cqw);
  color: var(--cd-nachtblauw);
  font-weight: 800;
}
.cd-hero__content .cd-hero__subtitle {
  max-width: 240px;
  margin-top: 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
.cd-hero__content .lz-beamer {
  margin-top: 40px;
  padding: 0;
}
.cd-hero__content .buttons {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.cd-hero__content .buttons p:first-child a {
  min-width: min(312px, 100%);
}

/* Narrower screens: the 16px text gets more lines, so the text column narrows (and further down the photo moves a little
   to the right) to keep the text off the photo. Measured: no overlap from 1200px up (below that the hero is stacked). */
@media (max-width: 1679px) {
  .cd-hero__content {
    max-width: min(533px, 32cqw);
  }
}
@media (max-width: 1439px) {
  .cd-hero__media, .cd-hero__figure {
    width: 68%;
  }
}
/* Tablet, small laptop and phone (up to $bp-hero): the photo on top, the text under it; up to $bp-stack the card runs edge to edge. */
@media (max-width: 1199px) {
  .cd-hero {
    min-height: 0;
    padding: 0 0 50px;
  }
  /* As in the mobile sketch (440 x 332): the bottom of the photo is cut off diagonally, from 57.5% down on the left to the
     bottom right corner; the grey of the card shows there and the title starts over it. The same five gradients as on
     desktop (fade to grey at the bottom and the lower left, misty blue in the bottom right corner, dark blue at the right
     edge), at the angles of the sketch. */
  .cd-hero__media {
    width: auto;
    height: auto;
    aspect-ratio: 440/332;
    margin: 0;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 57.5%);
  }
  .cd-hero__media::after {
    background: linear-gradient(180deg, rgba(246, 247, 248, 0) 48.5%, rgba(246, 247, 248, 0.8) 100%), linear-gradient(180deg, rgba(246, 247, 248, 0) 69.5%, var(--cd-grijs-3) 100%), linear-gradient(240.7deg, rgba(246, 247, 248, 0) 40.9%, var(--cd-grijs-3) 100.8%), linear-gradient(-53.4deg, var(--cd-mistblauw) 0%, rgba(118, 145, 171, 0) 40.7%), linear-gradient(90deg, rgba(20, 52, 83, 0) 55%, var(--cd-nachtblauw) 100%);
  }
  /* The line figure belongs to the desktop diagonal. */
  .cd-hero__figure {
    display: none;
  }
  .cd-hero__content {
    max-width: none;
    margin-top: -40px;
    padding: 0 clamp(24px, 9vw, 40px);
    position: relative;
  }
  .cd-hero__content .lz-screamer {
    font-size: var(--cd-h1);
  }
  .cd-hero__content .buttons {
    gap: 12px;
  }
  .cd-hero__content .buttons p:first-child a {
    min-width: 0;
  }
}
/* Phone: the title as in the mobile sketch, 45px on a 440px screen and at most 300px wide (6.67em), so it breaks after
   "leefruimte,"; the line under it at most 217px. */
@media (max-width: 768px) {
  .cd-hero__content .lz-screamer {
    max-width: 6.67em;
    font-size: clamp(34px, 10.2vw, 45px);
  }
  .cd-hero__content .cd-hero__subtitle {
    max-width: 217px;
  }
}
@media (max-width: 900px) {
  #header > .placeholder > .bottom .wrapper {
    padding-inline: 0;
  }
  .cd-hero {
    border-radius: 0;
    clip-path: inset(0 0 -200px 0);
  }
}
@media (min-width: 560px) and (max-width: 1199px) {
  .cd-hero__media {
    aspect-ratio: 16/9;
  }
}
/* The figure turned along with the diagonal cut (header.cshtml), on the same box as the photo: only on a tablet (the
   desktop has its own, the mobile sketch has none). */
.cd-hero__figure--stacked {
  display: none;
}

@media (min-width: 769px) and (max-width: 1199px) {
  .cd-hero__figure--stacked {
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    display: block;
  }
}
/* Another page than the homepage (the cookie page): only the title on the grey card. */
#header > .placeholder > .bottom.lz-hero--compact .cd-hero {
  min-height: 0;
  padding-block: 80px 56px;
  border-radius: var(--cd-radius);
}

/* No photo or line figure to stay clear of: the title may use the width of the card (up to a readable 960px), also on a
   phone (where the homepage title is held to 6.67em). */
#header > .placeholder > .bottom.lz-hero--compact .cd-hero__content {
  max-width: 960px;
}
#header > .placeholder > .bottom.lz-hero--compact .cd-hero__content .lz-screamer {
  max-width: none;
}

#header:not(.cd-header--home) {
  background: linear-gradient(to bottom, var(--cd-wit) 50%, var(--cd-nachtblauw) 50%);
}
@media (max-width: 900px) {
  #header:not(.cd-header--home) .cd-hero {
    padding-inline: var(--cd-card-pad);
  }
  #header:not(.cd-header--home) .cd-hero__content {
    margin-top: 0;
    padding: 0;
  }
}

/* ---------------------------------------------------------------
	5. Mobile menu
--------------------------------------------------------------- */
.overlay {
  background: rgba(20, 52, 83, 0.5);
}

/* The menu opens 12px under the bar, not against it. */
.nav-menu {
  top: calc(var(--lz-header) + 12px);
  max-height: calc(100dvh - var(--lz-header) - 12px - var(--lz-gutter));
  background: var(--cd-wit);
  border-radius: var(--cd-radius);
  box-shadow: var(--cd-shadow);
}
.nav-menu .menu-panel {
  background: var(--cd-wit);
}
.nav-menu .menu-panel ul li.menu-item {
  border-bottom: 1px solid var(--cd-grijs-2);
}
.nav-menu .menu-panel ul li.menu-item:last-child {
  border-bottom: 0;
}
.nav-menu .menu-panel ul li.menu-item a.menu-link {
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  color: var(--cd-nachtblauw);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-menu .menu-panel ul li.menu-item a.menu-link::after {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--cd-mistblauw);
  -webkit-mask: url("/_Codebase/_Themes/CombiDakkapel/Images/icon-nav-arrow.svg") center/contain no-repeat;
  mask: url("/_Codebase/_Themes/CombiDakkapel/Images/icon-nav-arrow.svg") center/contain no-repeat;
}
.nav-menu .menu-panel ul li.menu-item a.menu-link:hover, .nav-menu .menu-panel ul li.menu-item a.menu-link:focus-visible, .nav-menu .menu-panel ul li.menu-item a.menu-link[aria-current] {
  background: var(--cd-grijs-3);
}
.nav-menu .menu-panel ul li.menu-item a.menu-link:hover::after, .nav-menu .menu-panel ul li.menu-item a.menu-link:focus-visible::after, .nav-menu .menu-panel ul li.menu-item a.menu-link[aria-current]::after {
  background: var(--cd-blauw);
}
.nav-menu .lz-menu__cta a {
  width: 100%;
}
.nav-menu .lz-menu__footer {
  border-top: 1px solid var(--cd-grijs-2);
  color: var(--cd-nachtblauw);
}
.nav-menu .lz-menu__footer a {
  text-decoration: none;
}
.nav-menu .lz-menu__footer i {
  color: var(--cd-blauw);
}

/* ---------------------------------------------------------------
	6. Rows
	The page is dark blue; a row with the colour "Wit" (full width) is the white band of the process, the steps and the
	projects. The rows touch (--lz-row-gap: 0): every section brings its own space.
--------------------------------------------------------------- */
#main {
  padding-block: 0;
  color: var(--cd-wit);
}

/* White and light rows: dark text again. */
.lz-row[class*=lz-bg--]:not(.lz-on-dark) {
  color: var(--cd-donker);
}

.lz-row[class*=lz-bg--] {
  background: var(--lz-row-bg);
}

/* A row with a colour that is not full width: a tile with rounded corners. */
.lz-row[class*=lz-bg--]:not(.lz-full) {
  border-radius: var(--cd-radius);
}

/* The first row of the homepage continues the hero card (the advantages). */
.homepage #main > .umb-block-grid > .lz-row:first-child {
  /* As in the design: 80px above the label and under the advantages. */
  padding: 80px var(--cd-card-pad) 80px;
  /* Hero stacked (photo on top): as much room above the label (the hero's 50px under its buttons) as under the list. */
}
@media (max-width: 1199px) {
  .homepage #main > .umb-block-grid > .lz-row:first-child {
    padding-top: 0;
    padding-bottom: 50px;
  }
}
.homepage #main > .umb-block-grid > .lz-row:first-child {
  background: var(--cd-grijs-3);
  color: var(--cd-donker);
  border-radius: 0;
  /* Tablet and phone: as much room above the advantages (the hero's 50px under its buttons) as under them (42px + the
     8px under the sliding list). */
}
@media (max-width: 900px) {
  .homepage #main > .umb-block-grid > .lz-row:first-child {
    margin-inline: calc(var(--lz-gutter) * -1);
    padding: 0 0 42px;
  }
  .homepage #main > .umb-block-grid > .lz-row:first-child .lz-services__head > :first-child {
    margin-top: 0;
  }
}

/* The process card sits half over the dark page, half on the white band. */
.lz-row.lz-full.lz-bg--wit:has(.cd-process) {
  background: linear-gradient(to bottom, var(--cd-nachtblauw) 64px, var(--cd-wit) 64px);
}

#main > .umb-block-grid > .lz-row:last-child {
  padding-bottom: 0;
}

/* Umbraco's grid of a row is 12 tracks with its column gap (32px) at all 11 boundaries: on a phone those 352px are wider
   than the row (332px at 375px), the tracks collapse to 0 and the content sticks out 20px on the right (cards 22px from
   the left edge, 1px from the right). Capped at what the row can hold, as the core does for the columns within a row. */
.lz-row .umb-block-grid__layout-container {
  column-gap: min(var(--umb-block-grid--column-gap, 0px), 9%);
}

/* The core gives a block that does not start with text the flow margin on top (16px); the sections of this theme space
   themselves, so they sit right against the section above (no strip of the page colour in between). */
.umb-block-grid__area > :is(.lz-services, .cd-types, .cd-overlap, .cd-checklist, .cd-marquee, .cd-process, .cd-projects, .cd-banner, .cd-contact, .cd-faq) {
  margin-top: 0;
}

/* Rich text: paragraphs and lists follow the flow. */
.rich-text > :first-child {
  margin-top: 0;
}
.rich-text ul, .rich-text ol {
  margin: var(--lz-flow) 0 0;
}

/* ---------------------------------------------------------------
	7. Features
--------------------------------------------------------------- */
.lz-services .lz-services__head {
  margin-bottom: 40px;
}
.lz-services .lz-services__head h2 {
  margin: 0;
}
.lz-services ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.lz-services .lz-service {
  margin: 0;
}
.lz-services .lz-service h3 {
  margin: 0;
}
.lz-services .lz-service p {
  margin: 0;
}
.lz-services .lz-service__icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: var(--cd-blauw);
  border-radius: 9.6px;
  color: var(--cd-wit);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* An icon from the media library (iconImage): the design's line icons, 32px on the 64px tile. */
}
.lz-services .lz-service__icon img {
  width: 32px;
  height: 32px;
  display: block;
}

/* The advantages under the hero: the label, then four items with the icon left of the title and the text. */
.lz-services.lz-services--list .lz-services__head {
  margin-bottom: 25px;
  /* No title here, only the label; a title stays possible. */
}
.lz-services.lz-services--list .lz-services__head h2 {
  margin-top: 8px;
}
.lz-services.lz-services--list ul {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 65px;
}
.lz-services.lz-services--list .lz-service {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 32px;
}
.lz-services.lz-services--list {
  /* The title starts at the top of the icon and is always (at least) two lines, so the texts under the titles stand on one
     line; a title that would fit on one line is made narrower by default.js (initAdvantageTitles) so it breaks in two.
     Down to 601px (two columns); on a phone they are under each other. */
}
.lz-services.lz-services--list .lz-service__copy {
  padding-top: 0;
}
.lz-services.lz-services--list h3 {
  min-height: 2.4em;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cd-donker);
  text-wrap: balance;
}
.lz-services.lz-services--list {
  /* The text of an advantage (not the label above the list). */
}
.lz-services.lz-services--list .lz-service__copy p {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.4;
}
.lz-services.lz-services--list {
  /* Four columns below ±1600px: the longest word of a title ("onderhoudsarm", 176px at 24px) is wider than the room next to
     the icon (38px past the column at 1440px). The title, the gap between the columns and the gap to the icon scale down
     with the screen, to 19px / 32px / 16px at 1281px. */
}
@media (min-width: 1281px) {
  .lz-services.lz-services--list ul {
    column-gap: clamp(32px, 4.5vw - 26px, 65px);
  }
  .lz-services.lz-services--list .lz-service {
    gap: clamp(16px, 2vw - 10px, 32px);
  }
  .lz-services.lz-services--list h3 {
    font-size: clamp(19px, 1.5vw, 24px);
  }
}
@media (max-width: 1280px) {
  .lz-services.lz-services--list ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 48px;
  }
}
.lz-services.lz-services--list {
  /*
  	Tablet upright and phone: compact, as on the desktop the icon (smaller, 44px) left of the title and the text; two by
  	two, on a phone under each other (next to the icon half a phone is too narrow for a title like "Woningwaarde"). On
  	the same line as the text and the buttons of the hero above (its side padding).
  */
}
@media (max-width: 900px) {
  .lz-services.lz-services--list .lz-services__head {
    padding-inline: clamp(24px, 9vw, 40px);
  }
  .lz-services.lz-services--list ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 32px;
    padding: 0 clamp(24px, 9vw, 40px) 8px;
  }
  .lz-services.lz-services--list .lz-service {
    gap: 16px;
  }
  .lz-services.lz-services--list .lz-service__icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
  }
  .lz-services.lz-services--list .lz-service__icon img {
    width: 22px;
    height: 22px;
  }
  .lz-services.lz-services--list {
    /* As on the desktop: the title at the top of the icon, at least two lines (texts on one line). */
  }
  .lz-services.lz-services--list .lz-service__copy {
    padding-top: 0;
  }
  .lz-services.lz-services--list h3 {
    font-size: 18px;
  }
  .lz-services.lz-services--list .lz-service__copy p {
    margin-top: 6px;
    line-height: 1.45;
  }
}
.lz-services.lz-services--list {
  /*
  	Phone: under each other, only the icon and the title; the title is a button (default.js, initAdvantages) that folds
  	the text out under it, with the plus of the other accordions (turns to a cross). The text folds open and shut
  	(grid rows 0fr -> 1fr) and is hidden from screen readers while it is shut.
  */
}
@media (max-width: 600px) {
  .lz-services.lz-services--list ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .lz-services.lz-services--list {
    /* One under the other: the title one line, in the middle of the icon. */
  }
  .lz-services.lz-services--list .lz-service__copy {
    padding-top: 10px;
  }
  .lz-services.lz-services--list h3 {
    min-height: 0;
  }
  .lz-services.lz-services--list .lz-service.is-collapsible .lz-service__copy {
    flex: 1;
    padding-top: 0;
    display: grid;
    grid-template-rows: auto 0fr;
    transition: grid-template-rows 0.3s ease;
  }
  .lz-services.lz-services--list .lz-service.is-collapsible .lz-service__copy p {
    min-height: 0;
    margin-top: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 0.3s;
  }
  .lz-services.lz-services--list .lz-service.is-collapsible {
    /* A title on two lines (default.js) fills the 44px: the text gets the 11px a title on one line has under it. Inside
       the text (not a padding), so it folds away with it. */
  }
  .lz-services.lz-services--list .lz-service.is-collapsible.is-multiline .lz-service__copy p::before {
    content: "";
    height: 11px;
    display: block;
  }
  .lz-services.lz-services--list .lz-service.is-collapsible.is-open .lz-service__copy {
    grid-template-rows: auto 1fr;
  }
  .lz-services.lz-services--list .lz-service.is-collapsible.is-open .lz-service__copy p {
    visibility: visible;
    transition-delay: 0s;
  }
  .lz-services.lz-services--list .lz-service.is-collapsible.is-open .lz-service__toggle::after {
    transform: rotate(45deg);
  }
  .lz-services.lz-services--list .lz-service__toggle {
    width: 100%;
    min-height: 44px;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
  }
  .lz-services.lz-services--list .lz-service__toggle::after {
    content: "";
    width: 14px;
    height: 16px;
    flex-shrink: 0;
    background: var(--cd-blauw);
    -webkit-mask: url("/_Codebase/_Themes/CombiDakkapel/Images/icon-plus-blue.svg") center/contain no-repeat;
    mask: url("/_Codebase/_Themes/CombiDakkapel/Images/icon-plus-blue.svg") center/contain no-repeat;
    transition: transform 0.25s ease;
  }
  .lz-services.lz-services--list .lz-service__toggle:focus-visible {
    outline: 2px solid var(--cd-blauw);
    outline-offset: 4px;
    border-radius: 4px;
  }
}

/* "Zo werken wij": grey cards with the step number on a blue tile. */
.lz-services.lz-services--steps {
  padding-block: 80px;
}
.lz-services.lz-services--steps .lz-services__head h2 {
  font-size: var(--cd-h2);
}
.lz-services.lz-services--steps ul {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lz-services.lz-services--steps .lz-service {
  padding: 40px;
  background: var(--cd-grijs-3);
  border-radius: var(--cd-radius-small);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.lz-services.lz-services--steps .lz-service__icon {
  width: 68px;
  height: 68px;
  border-radius: var(--cd-radius-small);
  font-size: 20px;
  font-weight: 500;
  color: var(--cd-grijs-3);
}
.lz-services.lz-services--steps h3 {
  font-size: 20px;
  font-weight: 500;
  color: var(--cd-nachtblauw);
}
.lz-services.lz-services--steps .lz-service__copy p {
  margin-top: 24px;
}
@media (max-width: 1280px) {
  .lz-services.lz-services--steps ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .lz-services.lz-services--steps {
    padding-block: 56px;
  }
  .lz-services.lz-services--steps ul {
    grid-template-columns: 1fr;
  }
  .lz-services.lz-services--steps .lz-service {
    padding: 28px;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
  }
  .lz-services.lz-services--steps .lz-service__icon {
    width: 56px;
    height: 56px;
  }
  .lz-services.lz-services--steps .lz-service__copy p {
    margin-top: 8px;
  }
}

/* ---------------------------------------------------------------
	8. Dakkapeltypes
	The photo right under the hero card; the dots and the tabs under it.
--------------------------------------------------------------- */
.cd-types {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cd-types__stage {
  width: 100%;
  position: relative;
}

.cd-types__panel {
  animation: cd-fade-in 0.4s ease;
}

.cd-types__panel[hidden] {
  display: none;
}

@keyframes cd-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd-types__panel, .cd-types__tab, .cd-accordion__icon {
    animation: none;
    transition: none;
  }
}
.cd-types__slides {
  height: 684px;
  border-radius: 0 0 var(--cd-radius-small) var(--cd-radius-small);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.cd-types__slides::after {
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, var(--cd-nachtblauw) 0%, rgba(20, 52, 83, 0) 50%), linear-gradient(-39deg, var(--cd-mistblauw) 0%, rgba(118, 145, 171, 0) 41%);
}

.cd-types__slide {
  inset: 0;
  position: absolute;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.cd-types__slide.is-active {
  opacity: 1;
}
.cd-types__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Previous and next at the sides of the photo: a white circle with the arrow of the projects slider (mask), over the
   gradient. Smaller on a phone (below). */
.cd-types__arrow {
  --cd-arrow-size: 56px;
  width: var(--cd-arrow-size);
  height: var(--cd-arrow-size);
  padding: 0;
  top: 50%;
  position: absolute;
  z-index: 2;
  translate: 0 -50%;
  background: var(--cd-wit);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(20, 52, 83, 0.25);
  cursor: pointer;
  transition: background-color 0.2s ease, scale 0.2s ease;
}
.cd-types__arrow::before {
  content: "";
  inset: 0;
  position: absolute;
  background: var(--cd-nachtblauw);
  -webkit-mask: url("/_Codebase/_Themes/CombiDakkapel/Images/icon-arrow-right.svg") center/40% no-repeat;
  mask: url("/_Codebase/_Themes/CombiDakkapel/Images/icon-arrow-right.svg") center/40% no-repeat;
  transition: background-color 0.2s ease;
}
@media (hover: hover) {
  .cd-types__arrow:hover {
    background: var(--cd-blauw);
    scale: 1.06;
  }
  .cd-types__arrow:hover::before {
    background: var(--cd-wit);
  }
}
.cd-types__arrow:focus-visible {
  background: var(--cd-blauw);
  scale: 1.06;
}
.cd-types__arrow:focus-visible::before {
  background: var(--cd-wit);
}

.cd-types__arrow--prev {
  left: clamp(16px, 2vw, 32px);
}
.cd-types__arrow--prev::before {
  transform: scaleX(-1);
}

.cd-types__arrow--next {
  right: clamp(16px, 2vw, 32px);
}

.cd-types__dots {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* "Swipe here" over the bottom of the photo (tablet and phone, below): a dark pill with the hand moving to and fro between
   two chevrons; it fades away after the first swipe (default.js, .is-swiped on the block). */
.cd-types__swipe {
  display: none;
}

@keyframes cd-swipe-hand {
  0%, 100% {
    translate: -6px 0;
  }
  50% {
    translate: 6px 0;
  }
}
.cd-types__dot, .cd-project__thumb {
  cursor: pointer;
}

.cd-types__dot {
  width: 16px;
  height: 16px;
  padding: 0;
  flex-shrink: 0;
  background: var(--cd-wit);
  border: 0;
  border-radius: 50%;
  transition: background-color 0.2s ease, transform 0.2s ease, scale 0.3s ease;
}
.cd-types__dot.is-active {
  background: var(--cd-blauw);
}
.cd-types__dot:hover {
  transform: scale(1.15);
}
.cd-types__dot {
  /* The outer dot on a side with more photos beyond (default.js). */
}
.cd-types__dot.is-edge {
  scale: 0.6;
}

/* More than five photos: a window of five dots (its width set by default.js), the row slides along inside it. */
.cd-types__dots.is-windowed {
  margin-inline: auto;
  box-sizing: content-box;
  padding: 2px 3px;
  display: block;
  overflow: hidden;
}

.cd-types__dots-track {
  width: max-content;
  display: flex;
  gap: inherit;
  transition: transform 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .cd-types__dots-track {
    transition: none;
  }
}

.cd-types__tabs {
  width: min(100%, 1404px);
  margin-top: 8px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.cd-types__tab {
  height: 230px;
  margin-top: 20px;
  padding: 140px 10px 40px;
  background: var(--cd-grijs-3);
  border: 0;
  border-radius: var(--cd-radius-small);
  font: inherit;
  color: var(--cd-donker);
  text-align: center;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  /* The chosen tab rises 20px: height, top margin and bottom padding move together, so the bottom edge stays put. */
  transition: background-color 0.2s ease, color 0.2s ease, height 0.25s ease, margin-top 0.25s ease, padding-bottom 0.25s ease;
}
.cd-types__tab:hover, .cd-types__tab:focus-visible {
  background: var(--cd-wit);
}
.cd-types__tab[aria-selected=true] {
  height: 250px;
  margin-top: 0;
  padding-bottom: 60px;
  background: var(--cd-blauw);
  color: var(--cd-wit);
}
.cd-types__tab[aria-selected=true] .cd-types__icon img {
  filter: brightness(0) invert(1);
}

.cd-types__icon {
  top: 0;
  left: 50%;
  width: 146px;
  height: 120px;
  position: absolute;
  transform: translateX(-50%);
}
.cd-types__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cd-types__label {
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cd-types__prefix {
  font-size: 16px;
}

.cd-types__title {
  font-size: 20px;
  font-weight: 700;
}

@media (max-width: 1280px) {
  .cd-types__slides {
    height: 560px;
  }
}
@media (max-width: 900px) {
  .cd-types {
    margin-inline: calc(var(--lz-gutter) * -1);
  }
  .cd-types__slides {
    height: auto;
    aspect-ratio: 1;
    border-radius: 0;
    touch-action: pan-y;
  }
  .cd-types__arrow {
    --cd-arrow-size: 40px;
  }
  /* The dots smaller (10px); around each 6px of tap room (padding, the white only on the content), so they are still easy to
     tap. */
  .cd-types__dots {
    gap: 2px;
  }
  .cd-types__dot {
    width: 22px;
    height: 22px;
    padding: 6px;
    box-sizing: border-box;
  }
  .cd-types__dot, .cd-types__dot.is-active {
    background-clip: content-box;
  }
  .cd-types__swipe {
    left: 50%;
    bottom: 20px;
    padding: 8px 16px;
    position: absolute;
    z-index: 2;
    translate: -50% 0;
    background: rgba(20, 52, 83, 0.55);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--cd-wit);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  .cd-types__swipe .cd-types__swipe-hand {
    font-size: 22px;
    animation: cd-swipe-hand 1.6s ease-in-out infinite;
  }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .cd-types__swipe .cd-types__swipe-hand {
    animation: none;
  }
}
@media (max-width: 900px) {
  .is-swiped .cd-types__swipe {
    opacity: 0;
  }
}
@media (max-width: 900px) {
  /* The tabs scroll sideways, the first one on the page's line. */
  .cd-types__tabs {
    width: 100%;
    padding: 0 var(--lz-gutter) 8px;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--lz-gutter);
    scrollbar-width: none;
    box-sizing: border-box;
  }
  .cd-types__tabs::-webkit-scrollbar {
    display: none;
  }
  /* Compact, so a phone shows two and a half of them (the half says: swipe). The chosen one rises 12px. */
  .cd-types__tab {
    flex: 0 0 140px;
    height: 150px;
    margin-top: 12px;
    padding: 80px 8px 28px;
    scroll-snap-align: start;
  }
  .cd-types__tab[aria-selected=true] {
    height: 162px;
    margin-top: 0;
    padding-bottom: 40px;
  }
  .cd-types__icon {
    width: 86px;
    height: 70px;
  }
  .cd-types__prefix {
    font-size: 13px;
  }
  .cd-types__title {
    font-size: 16px;
  }
}
@media (min-width: 560px) and (max-width: 900px) {
  .cd-types__slides {
    aspect-ratio: 4/3;
  }
}
/* ---------------------------------------------------------------
	9. Foto met kaart
--------------------------------------------------------------- */
.cd-overlap {
  padding: 120px 0 80px;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  align-items: start;
}

.cd-overlap__image {
  grid-column: 1/15;
  grid-row: 1;
  height: 483px;
  border-radius: var(--cd-radius);
  overflow: hidden;
  position: relative;
}
.cd-overlap__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cd-overlap__image::after {
  content: "";
  inset: 0;
  position: absolute;
  background: linear-gradient(270deg, rgba(20, 52, 83, 0.8) 0%, rgba(20, 52, 83, 0) 65%), linear-gradient(208deg, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.5) 100%), linear-gradient(-43deg, var(--cd-mistblauw) 0%, rgba(118, 145, 171, 0) 41%);
}

.cd-overlap__card {
  grid-column: 13/-1;
  grid-row: 1;
  margin-top: 80px;
  padding: 120px;
  background: radial-gradient(circle at 0 0, var(--cd-wit) 0%, rgba(255, 255, 255, 0) 70%), var(--cd-grijs-2);
  border-radius: var(--cd-radius);
  color: var(--cd-donker);
  box-shadow: var(--cd-shadow);
  z-index: 1;
}
.cd-overlap__card .cd-overlap__title {
  margin: 0;
  font-size: var(--cd-h2);
  font-weight: 800;
  line-height: 1.4;
}
.cd-overlap__card .cd-overlap__text {
  margin-top: 29px;
  font-size: 18px;
}

.cd-overlap--no-image .cd-overlap__card {
  grid-column: 1/-1;
  margin-top: 0;
}

@media (max-width: 1280px) {
  .cd-overlap__card {
    padding: 72px;
  }
}
@media (max-width: 900px) {
  .cd-overlap {
    padding: 64px 0 52px;
    display: block;
  }
  .cd-overlap__image {
    height: auto;
    aspect-ratio: 4/3;
    margin-inline: calc(var(--lz-gutter) * -1);
    border-radius: 0;
  }
  .cd-overlap__card {
    margin: -60px 0 0;
    padding: 40px;
  }
  .cd-overlap__card .cd-overlap__title {
    font-size: 22px;
  }
  .cd-overlap__card .cd-overlap__text {
    margin-top: 24px;
    font-size: 16px;
  }
}
/* ---------------------------------------------------------------
	10. Checklist, and checks in rich text
--------------------------------------------------------------- */
.cd-checklist, .cd-rich-checks ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.cd-checklist li, .cd-rich-checks ul li {
  min-height: 32px;
  padding-left: 38px;
  font-size: 18px;
  line-height: 1.8;
  position: relative;
}
.cd-checklist li::before, .cd-rich-checks ul li::before {
  content: "";
  top: 8px;
  left: 0;
  width: 14px;
  height: 16px;
  position: absolute;
  background: var(--cd-groen);
  -webkit-mask: url("/_Codebase/_Themes/CombiDakkapel/Images/icon-check.svg") center/contain no-repeat;
  mask: url("/_Codebase/_Themes/CombiDakkapel/Images/icon-check.svg") center/contain no-repeat;
}

.cd-checklist {
  max-width: 966px;
  margin: 0 auto;
  /* As in the design: 151px from the card above to the first point (80px under the overlap row + 71px), 190px from
     the last point to the process card. */
  padding-block: 71px 190px;
}

.cd-checklist--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 61px;
}

.cd-rich-checks ul {
  margin-top: 40px;
}

@media (max-width: 900px) {
  .cd-checklist {
    /* As in the mobile sketch: the same room above (the card above has 52px under it) and below the row. */
    padding-block: 0 52px;
  }
  /* On a phone the points run sideways in one line (after the mobile sketch). */
  .cd-checklist--two {
    margin-inline: calc(var(--lz-gutter) * -1);
    padding-inline: var(--lz-gutter);
    display: flex;
    gap: 40px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .cd-checklist--two::-webkit-scrollbar {
    display: none;
  }
  .cd-checklist--two li {
    flex: 0 0 auto;
    font-size: 16px;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  /*
  	Marquee (default.js, initMarquee): the row runs on by itself, without stopping. The points are there twice (the
  	second set hidden from screen readers) and the row moves exactly one set to the left, then starts over: seamless.
  	The trailing padding equals the gap, so both halves are exactly as wide. A tap does not pause it (on a phone the
  	tap left it paused).
  */
  .cd-marquee {
    margin-inline: calc(var(--lz-gutter) * -1);
    padding-inline-start: var(--lz-gutter);
    overflow: hidden;
  }
  .cd-marquee .cd-checklist--two.is-marquee {
    width: max-content;
    max-width: none;
    margin: 0;
    padding-inline: 0 40px;
    overflow: visible;
    scroll-snap-type: none;
    animation: cd-marquee var(--cd-marquee-duration, 30s) linear infinite;
  }
}
@keyframes cd-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* The copies of the marquee only show while it runs (on a tablet and a phone). */
.cd-checklist li[aria-hidden=true] {
  display: none;
}

@media (max-width: 900px) {
  .cd-checklist.is-marquee li[aria-hidden=true] {
    display: list-item;
  }
}
/* ---------------------------------------------------------------
	11. Aanpak met uitklaplijst, and the accordion
--------------------------------------------------------------- */
.cd-process {
  padding: var(--cd-card-pad);
  background: var(--cd-grijs-3);
  border-radius: var(--cd-radius);
  color: var(--cd-donker);
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(240px, 428px) minmax(360px, 463px);
  gap: 40px;
}
.cd-process h2 {
  margin: 0;
}
.cd-process .cd-process__text {
  margin-top: 40px;
}
.cd-process p.button {
  margin-top: 40px;
}

.cd-process__image {
  min-height: 490px;
}

.cd-process__list {
  align-self: start;
}

@media (max-width: 1280px) {
  /* Two columns: the intro with the photo under it on the left, the list on the right over the full height. */
  .cd-process {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
  .cd-process .cd-process__intro {
    grid-column: 1;
  }
  .cd-process .cd-process__image {
    min-height: 0;
    aspect-ratio: 4/3;
    grid-column: 1;
  }
  .cd-process .cd-process__list {
    grid-column: 2;
    grid-row: 1/span 2;
  }
}
@media (max-width: 900px) {
  .cd-process {
    grid-template-columns: 1fr;
  }
  .cd-process .cd-process__intro, .cd-process .cd-process__image, .cd-process .cd-process__list {
    grid-column: auto;
    grid-row: auto;
  }
  .cd-process .cd-process__image {
    min-height: 0;
    aspect-ratio: 1;
  }
  .cd-process .cd-process__text, .cd-process p.button {
    margin-top: 24px;
  }
}
.cd-accordion {
  display: grid;
  gap: 6px;
}

.cd-accordion__item {
  background: var(--cd-wit);
  border-radius: var(--cd-radius-small);
  overflow: hidden;
}

.cd-accordion__head {
  margin: 0;
  padding: 16px 48px 16px 24px;
  line-height: 1.4;
  list-style: none;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
}
.cd-accordion__head::-webkit-details-marker {
  display: none;
}

.cd-accordion__item--static .cd-accordion__head {
  padding-right: 24px;
  cursor: default;
}

.cd-accordion__title {
  font-size: 20px;
  font-weight: 500;
}

.cd-accordion__subtitle {
  font-weight: 500;
  line-height: 1.8;
  color: var(--cd-blauw);
}

.cd-accordion__icon {
  top: 20px;
  right: 24px;
  width: 14px;
  height: 16px;
  position: absolute;
  background: var(--cd-blauw);
  -webkit-mask: url("/_Codebase/_Themes/CombiDakkapel/Images/icon-plus-blue.svg") center/contain no-repeat;
  mask: url("/_Codebase/_Themes/CombiDakkapel/Images/icon-plus-blue.svg") center/contain no-repeat;
  transition: transform 0.25s ease;
}

.cd-accordion__item[open]:not(.is-closing) .cd-accordion__icon {
  transform: rotate(45deg);
}

.cd-accordion__text {
  margin-top: -8px;
  padding: 0 24px 16px;
}
.cd-accordion__text p {
  margin-top: 8px;
}

@media (max-width: 768px) {
  .cd-accordion__title {
    font-size: 18px;
  }
}
/* ---------------------------------------------------------------
	12. Projecten
--------------------------------------------------------------- */
.cd-projects {
  padding: 38px 0 108px;
  color: var(--cd-donker);
}

.cd-projects__head {
  margin-bottom: 28px;
}
.cd-projects__head h2 {
  margin-top: 16px;
}

/* The next project peeks in on the right under a white fade; the counter and the arrows at the bottom right of the card. */
.cd-projects__viewport {
  --cd-project: min(998px, 65.3%);
  --cd-project-gap: 64px;
  position: relative;
  /* As high as the project in view (default.js sets the height), moving along with the slide. A project that is
     higher (more text) is cut off 24px under it, the room of the blur and the fade; sideways nothing is cut off. */
  transition: height 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  clip-path: inset(-24px -100vw);
  /* The fade starts at the next project and runs to the edge of the screen, at any screen width; 24px higher and lower
     than the projects, so it also covers the haze of their blur. */
}
.cd-projects__viewport::after {
  content: "";
  top: -24px;
  bottom: -24px;
  left: calc(var(--cd-project) + var(--cd-project-gap));
  right: calc(50% - 50vw);
  position: absolute;
  z-index: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--cd-wit) 100%);
  pointer-events: none;
}

.cd-projects__track {
  display: flex;
  align-items: flex-start;
  gap: var(--cd-project-gap);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.cd-project {
  flex: 0 0 var(--cd-project);
  min-width: 0;
  border-radius: var(--cd-radius-small);
  overflow: hidden;
  transition: opacity 0.6s ease, filter 0.6s ease;
  /* The projects that wait: milky (40%, a little blurred), under the white fade; the ones already seen are gone. */
}
.cd-project:not(.is-active) {
  opacity: 0.4;
  filter: blur(5px);
}
.cd-project.is-before {
  opacity: 0;
}

.cd-project__media {
  height: 560px;
  border: 6px solid var(--cd-grijs-3);
  border-bottom: 0;
  border-radius: var(--cd-radius-small) var(--cd-radius-small) 0 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cd-project__media::after {
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(-45deg, var(--cd-mistblauw) 0%, rgba(118, 145, 171, 0) 41%), linear-gradient(0deg, var(--cd-nachtblauw) 0%, rgba(20, 52, 83, 0) 39%);
}

.cd-project__photos, .cd-project__photo {
  inset: 0;
  position: absolute;
}

/* The next photo fades in slowly over the one before, which only goes when the new one is there (no dip in between). */
.cd-project__photo {
  opacity: 0;
  z-index: 0;
  transition: opacity 0s linear 0.9s;
}
.cd-project__photo.is-active {
  opacity: 1;
  z-index: 1;
  transition: opacity 0.9s ease-in-out;
}
.cd-project__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cd-project__thumbs {
  left: 34px;
  right: 34px;
  bottom: 34px;
  position: absolute;
  z-index: 2;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cd-project__thumbs::-webkit-scrollbar {
  display: none;
}

.cd-project__thumb {
  flex: 0 0 108px;
  height: 64px;
  padding: 0;
  background: none;
  border: 2px solid var(--cd-wit);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.cd-project__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cd-project__thumb.is-active, .cd-project__thumb:hover {
  border-color: var(--cd-blauw);
}

.cd-project__tags {
  margin: 0;
  padding: 25px 40px;
  background: var(--cd-grijs-3);
  border-radius: 0 0 var(--cd-radius-small) var(--cd-radius-small);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 9px;
}
.cd-project__tags li {
  padding: 4px 16px;
  background: var(--cd-wit);
  border-radius: 45px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--cd-nachtblauw);
}
.cd-project__tags .cd-project__location {
  background: var(--cd-blauw);
  color: var(--cd-wit);
}

.cd-project__body {
  max-width: 600px;
  margin-top: 24px;
}
.cd-project__body h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}
.cd-project__body p {
  margin-top: 8px;
  font-size: 14px;
}

.cd-projects__nav {
  bottom: 0;
  left: calc(var(--cd-project) - 150px);
  width: 150px;
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 32px);
  justify-content: end;
  gap: 16px 12px;
}

.cd-projects__count {
  grid-column: 1/-1;
  margin: 0;
  text-align: right;
  font-weight: 400;
  color: var(--cd-nachtblauw);
  /* The number of the project in view is extra bold, " / 06" stays regular. */
}
.cd-projects__count [data-cd-current] {
  font-weight: 800;
}

.cd-projects__arrow {
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--cd-nachtblauw);
  border: 0;
  -webkit-mask: url("/_Codebase/_Themes/CombiDakkapel/Images/icon-arrow-right.svg") center/contain no-repeat;
  mask: url("/_Codebase/_Themes/CombiDakkapel/Images/icon-arrow-right.svg") center/contain no-repeat;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.cd-projects__arrow:hover, .cd-projects__arrow:focus-visible {
  background: var(--cd-blauw);
}
.cd-projects__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.cd-projects__arrow--prev {
  transform: scaleX(-1);
}

@media (max-width: 1280px) {
  .cd-project__media {
    height: 460px;
  }
}
@media (max-width: 900px) {
  .cd-projects {
    padding: 16px 0 64px;
  }
  .cd-projects__viewport {
    --cd-project: 88%;
    --cd-project-gap: 16px;
  }
  .cd-project__media {
    height: auto;
    aspect-ratio: 4/3;
    border-width: 4px;
  }
  .cd-project__thumbs {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
  .cd-project__thumb {
    flex-basis: 72px;
    height: 44px;
  }
  /*
  	Compact on a tablet or phone: the location as a label on the photo (top left), the specifications as running text
  	with a dot between them instead of a pill each.
  */
  .cd-project {
    position: relative;
  }
  .cd-project__tags {
    padding: 12px 16px 14px;
    display: block;
    font-size: 13px;
    line-height: 1.6;
    color: var(--cd-nachtblauw);
  }
  .cd-project__tags li {
    padding: 0;
    display: inline;
    background: none;
    border-radius: 0;
    font-size: inherit;
    line-height: inherit;
  }
  .cd-project__tags li:not(:last-child)::after {
    content: "·";
    margin: 0 2px 0 5px;
    font-weight: 700;
    color: var(--cd-blauw);
  }
  .cd-project__tags .cd-project__location {
    top: 12px;
    left: 12px;
    padding: 2px 12px;
    position: absolute;
    z-index: 3;
    background: var(--cd-blauw);
    border-radius: 45px;
    font-size: 12px;
    font-weight: 700;
  }
  .cd-project__tags .cd-project__location::after {
    display: none;
  }
  .cd-project__tags:not(:has(li:not(.cd-project__location))) {
    padding: 0;
  }
  .cd-project__body {
    margin-top: 16px;
    padding-bottom: 80px;
  }
  .cd-project__body h3 {
    font-size: 18px;
  }
  .cd-projects__nav {
    left: 0;
    width: var(--cd-project);
    grid-template-columns: 1fr repeat(2, 32px);
    align-items: center;
    justify-content: stretch;
  }
  .cd-projects__count {
    grid-column: 1;
    text-align: left;
  }
}
/* ---------------------------------------------------------------
	13. Fotobanner met tekst
--------------------------------------------------------------- */
.cd-banner {
  margin-inline: calc(50% - 50vw);
  padding-block: 240px;
  position: relative;
  isolation: isolate;
  color: var(--cd-wit);
}
.cd-banner > .wrapper {
  position: relative;
}
.cd-banner h2 {
  margin: 0;
  font-size: var(--cd-h2-large);
  line-height: 1.1;
  color: var(--cd-wit);
}
.cd-banner .rich-text {
  margin-top: 24px;
}

/* The photo runs on 266px below the text, behind the top of the next section (the contact form), as in the design. */
.cd-banner__photo {
  inset: 0 0 -266px;
  position: absolute;
  z-index: -1;
}
@media (max-width: 1280px) {
  .cd-banner__photo {
    bottom: -160px;
  }
}
@media (max-width: 900px) {
  .cd-banner__photo {
    bottom: 0;
  }
}
.cd-banner__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cd-banner__photo::after {
  content: "";
  inset: 0;
  position: absolute;
  background: linear-gradient(0deg, var(--cd-nachtblauw) 0%, rgba(20, 52, 83, 0) 39%), linear-gradient(263deg, var(--cd-mistblauw) 0%, rgba(118, 145, 171, 0) 30%), rgba(20, 52, 83, 0.7);
}

.cd-banner__content {
  max-width: 604px;
  margin-left: auto;
  margin-right: max(0px, (100% - 1528px) / 2 + 64px);
}

@media (max-width: 1280px) {
  .cd-banner {
    padding-block: 160px;
  }
  .cd-banner__content {
    max-width: 520px;
    margin-right: 0;
  }
}
@media (max-width: 900px) {
  .cd-banner {
    padding-block: 96px 80px;
  }
  .cd-banner__content {
    max-width: none;
  }
}
/* ---------------------------------------------------------------
	14. Contact met formulier, and the form
--------------------------------------------------------------- */
.cd-contact {
  padding-block: 0 110px;
  display: grid;
  grid-template-columns: minmax(0, 470px) 1fr minmax(0, 732px);
  align-items: start;
  position: relative;
  color: var(--cd-wit);
  /* After the photo banner: some room under its text; the banner's photo runs on behind this section (.cd-banner__photo). */
}
.lz-row:has(.cd-banner) + .lz-row .cd-contact {
  margin-top: 118px;
}
@media (max-width: 1280px) {
  .lz-row:has(.cd-banner) + .lz-row .cd-contact {
    margin-top: 80px;
  }
}
.cd-contact h2 {
  margin: 0;
  font-size: var(--cd-h2-large);
  font-weight: 700;
  line-height: 1.08;
  color: var(--cd-wit);
}
.cd-contact .rich-text {
  margin-top: 22px;
}
.cd-contact .cd-rich-checks ul {
  margin-top: 22px;
}

.cd-contact__intro {
  grid-column: 1;
  grid-row: 1;
  padding-top: 4px;
  position: relative;
  z-index: 2;
}

.cd-contact__phone {
  margin-top: 40px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 22px;
}
.cd-contact__phone strong {
  display: block;
}
.cd-contact__phone:hover .cd-contact__phone-icon, .cd-contact__phone:focus-visible .cd-contact__phone-icon {
  background: var(--cd-wit);
  color: var(--cd-blauw);
}

.cd-contact__phone-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: var(--cd-blauw);
  border-radius: var(--cd-radius-small);
  font-size: 20px;
  color: var(--cd-wit);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cd-contact__phone-text {
  line-height: 1.5;
}

.cd-contact__map {
  top: -100px;
  left: 17%;
  width: 740px;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  /* The map inline (contactBlock) or as an image; inline the dots drop in from above the map (default.js), so they may
     show outside it. */
}
.cd-contact__map img, .cd-contact__map svg {
  width: 100%;
  height: auto;
  display: block;
}
.cd-contact__map svg {
  overflow: visible;
}

.cd-contact__card {
  grid-column: 3;
  grid-row: 1;
  padding: 64px;
  background: var(--cd-wit);
  border-radius: var(--cd-radius);
  box-shadow: var(--cd-shadow);
  color: var(--cd-donker);
  z-index: 1;
}
.cd-contact__card .cd-contact__form-title {
  margin: 0;
  font-size: var(--cd-h2);
  font-weight: 800;
}
.cd-contact__card .cd-contact__form-text {
  max-width: 401px;
  margin-top: 8px;
}
.cd-contact__card .form {
  margin-top: 40px;
}

@media (max-width: 1280px) {
  .cd-contact {
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.25fr);
  }
  .cd-contact__card {
    padding: 48px;
  }
  .cd-contact__map {
    display: none;
  }
}
/* Phone: the text, then the form; the map back on the background, sticking out above the top right corner of the form. */
@media (max-width: 900px) {
  .cd-contact {
    padding-bottom: 64px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }
  .lz-row:has(.cd-banner) + .lz-row .cd-contact {
    margin-top: 0;
  }
  .cd-contact__intro {
    grid-column: 1;
    grid-row: 1;
  }
  .cd-contact__card {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    padding: 32px 24px;
    box-sizing: border-box;
  }
  .cd-contact__map {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
    align-self: start;
    top: auto;
    left: auto;
    width: min(78%, 420px);
    margin: -42% calc(var(--lz-gutter) * -1) 0 0;
    position: relative;
    display: block;
    /* Quieter than on desktop: here it lies right behind the text and the form. */
    opacity: 0.5;
  }
}
/* The form (Umbraco Forms, theme "logisz"): the labels as placeholders in the fields, two fields on a line. */
.umbraco-forms-form.umbraco-forms-logisz {
  font-size: 14px;
}
.umbraco-forms-form.umbraco-forms-logisz :is(input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=url], textarea, select) {
  min-height: 50px;
  padding-inline: 15px;
  background: var(--cd-wit);
  border: 1px solid var(--cd-veld);
  border-radius: var(--cd-radius-small);
  font: inherit;
  font-size: 14px;
  color: var(--cd-donker);
}
.umbraco-forms-form.umbraco-forms-logisz :is(input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=url], textarea, select)::placeholder {
  color: var(--cd-veld-tekst);
}
.umbraco-forms-form.umbraco-forms-logisz :is(input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=url], textarea, select):focus {
  border-color: var(--cd-blauw);
  outline: 1px solid var(--cd-blauw);
}
.umbraco-forms-form.umbraco-forms-logisz textarea {
  min-height: 104px;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-label {
  color: var(--cd-veld-tekst);
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field:has(> input[type=checkbox]), .umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field.dataconsent {
  font-size: 12px;
  color: #5B6875;
}
.umbraco-forms-form.umbraco-forms-logisz input[type=checkbox] {
  accent-color: var(--cd-blauw);
}
.umbraco-forms-form.umbraco-forms-logisz .field-validation-error, .umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-validation-summary {
  color: #B00020;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-navigation {
  margin-top: 40px;
}
.umbraco-forms-form.umbraco-forms-logisz {
  /* A fieldset of only short fields (name, place, e-mail, phone): two columns, filled top to bottom per column as they
     are in the form's two columns. The form theme renders the fields of both columns one after the other. */
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-fieldset:not(:has(textarea, input[type=checkbox], select)):has(> .umbraco-forms-field:nth-child(2)) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  gap: 16px 14px;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-fieldset:not(:has(textarea, input[type=checkbox], select)):has(> .umbraco-forms-field:nth-child(2)) > .umbraco-forms-field {
  margin: 0;
}
@media (max-width: 768px) {
  .umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-fieldset:not(:has(textarea, input[type=checkbox], select)):has(> .umbraco-forms-field:nth-child(2)) {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}
.umbraco-forms-form.umbraco-forms-logisz {
  /* The consent: the checkbox with its text; the field's own caption only for screen readers. */
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field.dataconsent > .umbraco-forms-label {
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  position: absolute;
}

/* ---------------------------------------------------------------
	15. Veelgestelde vragen
--------------------------------------------------------------- */
.cd-faq {
  padding-block: 0 0;
  display: grid;
  grid-template-columns: minmax(0, 398px) minmax(0, 1fr);
  position: relative;
  z-index: 1;
}

.cd-faq__image {
  border-radius: var(--cd-radius) 0 0 var(--cd-radius);
}
.cd-faq__image::after {
  background: linear-gradient(-70deg, var(--cd-mistblauw) 0%, rgba(118, 145, 171, 0) 41%), linear-gradient(270deg, rgba(20, 52, 83, 0.8) 0%, rgba(20, 52, 83, 0) 65%);
}

.cd-faq__card {
  padding: var(--cd-card-pad);
  background: var(--cd-wit);
  border-radius: 0 var(--cd-radius) var(--cd-radius) 0;
  color: var(--cd-donker);
  display: flex;
  flex-wrap: wrap;
  gap: 40px 64px;
}
.cd-faq__card h2 {
  margin: 0;
}
.cd-faq__card .cd-faq__text {
  margin-top: 40px;
}

.cd-faq__intro {
  max-width: 402px;
  flex: 1 1 320px;
}

.cd-faq__list {
  flex: 1 1 300px;
}

.cd-faq--no-image {
  grid-template-columns: 1fr;
}
.cd-faq--no-image .cd-faq__card {
  border-radius: var(--cd-radius);
}

.cd-faq__help {
  margin-top: 40px;
  padding: 40px;
  background: var(--cd-grijs-1);
  border-radius: 12px;
}
.cd-faq__help .cd-faq__help-title {
  margin: 0;
  font-weight: 700;
  line-height: 1.4;
}
.cd-faq__help p {
  margin-top: 12px;
}
.cd-faq__help p.button {
  margin-top: 12px;
}

/* In the FAQ the questions are grey; hovered or open they turn blue. The title and the answer get their colour per state
   themselves, not by inheriting a colour that is changing (the answer in a <details> that opens could keep a stale one). */
.cd-faq__list .cd-accordion__item {
  background: var(--cd-grijs-3);
  transition: background-color 0.2s ease;
}
.cd-faq__list .cd-accordion__item .cd-accordion__head, .cd-faq__list .cd-accordion__item .cd-accordion__text {
  color: var(--cd-donker);
  transition: color 0.2s ease;
}
.cd-faq__list .cd-accordion__item:hover, .cd-faq__list .cd-accordion__item[open]:not(.is-closing) {
  background: var(--cd-blauw);
}
.cd-faq__list .cd-accordion__item:hover .cd-accordion__head, .cd-faq__list .cd-accordion__item:hover .cd-accordion__text, .cd-faq__list .cd-accordion__item[open]:not(.is-closing) .cd-accordion__head, .cd-faq__list .cd-accordion__item[open]:not(.is-closing) .cd-accordion__text {
  color: var(--cd-grijs-3);
}
.cd-faq__list .cd-accordion__item:hover .cd-accordion__icon, .cd-faq__list .cd-accordion__item[open]:not(.is-closing) .cd-accordion__icon {
  background: var(--cd-wit);
}
.cd-faq__list .cd-accordion__title {
  font-size: 16px;
}
.cd-faq__list .cd-accordion__icon {
  top: 18px;
}
.cd-faq__list .cd-accordion__text a {
  color: inherit;
}

@media (max-width: 1280px) {
  .cd-faq {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  }
}
@media (max-width: 1024px) {
  .cd-faq {
    grid-template-columns: 1fr;
  }
  .cd-faq__image {
    display: none;
  }
  /* Tablet and phone: the questions first, the grey "Uw vraag staat er niet bij?" under them. Its place in the markup is
     in the intro, so the intro steps aside (display: contents) and the block moves to the end (order). */
  .cd-faq__card {
    border-radius: var(--cd-radius);
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .cd-faq__intro {
    display: contents;
  }
  .cd-faq__list {
    margin-top: 40px;
    flex: none;
  }
  .cd-faq__help {
    order: 1;
  }
}
@media (max-width: 768px) {
  .cd-faq__card .cd-faq__text, .cd-faq__help, .cd-faq__list {
    margin-top: 24px;
  }
  .cd-faq__help {
    padding: 24px;
  }
}
/* ---------------------------------------------------------------
	16. Footer
--------------------------------------------------------------- */
/* After the FAQ (homepage) the footer starts 100px higher, behind the bottom of the FAQ card; anywhere else (the cookie
   page, the 404 page) it simply follows the page. */
#footer.cd-footer {
  margin-top: 0;
  background: var(--cd-nachtblauw);
  color: var(--cd-wit);
  font-size: 16px;
}
#footer.cd-footer a {
  color: inherit;
  text-decoration: none;
}
#footer.cd-footer a:hover, #footer.cd-footer a:focus-visible {
  text-decoration: underline;
}

/* Its own dark blue: the photo blends with luminosity against it (isolation), so it takes the house blue entirely, as in
   the design, without any of its own colour showing through. */
.cd-footer__main {
  padding-block: 85px 67px;
  background: var(--cd-nachtblauw);
  position: relative;
  isolation: isolate;
}

/* The photo on the left half, grey-blue and faded into the dark. */
.cd-footer__photo {
  top: 0;
  left: 0;
  bottom: 0;
  width: 62%;
  position: absolute;
  z-index: -1;
  opacity: 0.5;
  mix-blend-mode: luminosity;
}
.cd-footer__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cd-footer__photo::after {
  content: "";
  inset: 0;
  position: absolute;
  background: linear-gradient(270deg, var(--cd-nachtblauw) 0%, rgba(20, 52, 83, 0) 50%), linear-gradient(180deg, var(--cd-nachtblauw) 0%, rgba(20, 52, 83, 0) 100%);
}

/* The logo a little right of the middle, the details next to it, Facebook in the bottom right corner. */
.cd-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 235px minmax(0, 1fr);
  align-items: end;
  line-height: 1.8;
  position: relative;
}
.cd-footer__grid > .cd-footer__logo {
  grid-column: 2;
}
.cd-footer__grid > .cd-footer__details {
  grid-column: 3;
  padding-left: clamp(40px, 10vw, 179px);
}

.cd-footer__logo {
  display: block;
}
.cd-footer__logo .cd-footer__logo-svg {
  width: 100%;
  height: auto;
  display: block;
}

.cd-footer__details {
  padding-bottom: 36px;
}

.cd-footer__address {
  font-style: normal;
}

/* Only the company name is bold; the address and the contact details are regular. */
.cd-footer__details {
  font-weight: 400;
}
.cd-footer__details strong {
  font-weight: 700;
}

.cd-footer__contact {
  margin-top: 16px;
}
.cd-footer__contact span {
  display: block;
}

/* The Facebook icon turns bright blue on hover. Under #footer.cd-footer, or the footer's own link colour (inherit) wins. */
#footer.cd-footer .cd-footer__social {
  right: 0;
  bottom: 36px;
  position: absolute;
  font-size: 32px;
  line-height: 1;
  transition: color 0.2s ease;
}
#footer.cd-footer .cd-footer__social:hover, #footer.cd-footer .cd-footer__social:focus-visible {
  color: var(--cd-blauw);
  text-decoration: none;
}

.cd-footer__bar {
  padding-block: 67px;
  background: var(--cd-blauw);
}
.cd-footer__bar .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 80px;
  flex-wrap: wrap;
}
.cd-footer__bar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 80px;
}
.cd-footer__bar p {
  margin: 0;
}

@media (max-width: 1280px) {
  .cd-footer__grid {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .cd-footer__grid > .cd-footer__logo {
    grid-column: 1;
  }
  .cd-footer__grid > .cd-footer__details {
    grid-column: 2;
    padding-left: 64px;
  }
  .cd-footer__bar ul {
    gap: 12px 40px;
  }
}
@media (max-width: 768px) {
  .cd-footer__main {
    padding-block: 60px 40px;
  }
  .cd-footer__photo {
    width: 100%;
  }
  .cd-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cd-footer__grid > .cd-footer__logo {
    width: 150px;
  }
  .cd-footer__grid > .cd-footer__details {
    grid-column: 1;
    padding: 0 48px 0 0;
  }
  .cd-footer__details {
    padding-bottom: 0;
  }
  #footer.cd-footer .cd-footer__social {
    bottom: 0;
  }
  .cd-footer__bar {
    padding-block: 32px;
  }
  .cd-footer__bar ul {
    gap: 8px 24px;
  }
}
/* ---------------------------------------------------------------
	17. Other pages (the cookie page)
	A page with its own text: a white card on the dark blue page.
--------------------------------------------------------------- */
#main:has(.cd-faq) + #footer.cd-footer {
  margin-top: -100px;
}
#main:has(.cd-faq) + #footer.cd-footer .cd-footer__main {
  padding-top: 185px;
}
@media (max-width: 768px) {
  #main:has(.cd-faq) + #footer.cd-footer .cd-footer__main {
    padding-top: 160px;
  }
}

/* A page without content of its own (the 404 page): room under the header card before the footer. */
body:not(.homepage) #main:not(:has(.umb-block-grid)) {
  padding-bottom: 96px;
}

body.page #main > .umb-block-grid {
  padding-block: 64px 160px;
}
body.page #main > .umb-block-grid > .lz-row {
  padding: var(--cd-card-pad);
  background: var(--cd-wit);
  border-radius: var(--cd-radius);
  color: var(--cd-donker);
}
body.page #main > .umb-block-grid > .lz-row + .lz-row {
  margin-top: 16px;
}

/* ---------------------------------------------------------------
	18. Motion
	- The hero comes in when the page opens (CSS only, from the first paint): the text rises line after line, the photo
	  fades in from a slight zoom, the lines of the figure draw themselves, then the advantages under it come in (when they
	  are below the fold, default.js stops that and lets them come in when they scroll into view).
	- Scrolling: the parts of the sections come in when they come into view (default.js, initReveal, sets the classes
	  below). Left and right come from the side; on a tablet or phone up as well, so nothing sticks out of the page.
	- "fill-mode: backwards": before the start the element waits in its start state, after the end the animation lets go,
	  so its own styles (hover, transitions) work as before. Nothing with reduced motion.
--------------------------------------------------------------- */
@keyframes cd-rise {
  from {
    opacity: 0;
    translate: 0 24px;
  }
}
@keyframes cd-fade-zoom {
  from {
    opacity: 0;
    scale: 1.06;
  }
}
@keyframes cd-fade {
  from {
    opacity: 0;
  }
}
@keyframes cd-draw {
  from {
    stroke-dashoffset: 1500;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .cd-hero__content > * {
    animation: cd-rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }
  .cd-hero__content > *:nth-child(1) {
    animation-delay: 0.1s;
  }
  .cd-hero__content > *:nth-child(2) {
    animation-delay: 0.2s;
  }
  .cd-hero__content > *:nth-child(3) {
    animation-delay: 0.3s;
  }
  .cd-hero__content > *:nth-child(4) {
    animation-delay: 0.4s;
  }
  .cd-hero__content > *:nth-child(5) {
    animation-delay: 0.5s;
  }
  .cd-hero__media {
    animation: cd-fade 1s ease backwards;
  }
  .cd-hero__media img {
    animation: cd-fade-zoom 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }
  .cd-hero__figure path {
    stroke-dasharray: 1500;
    animation: cd-draw 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s backwards;
  }
  .homepage #main > .umb-block-grid > .lz-row:first-child .lz-service {
    animation: cd-rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }
  .homepage #main > .umb-block-grid > .lz-row:first-child .lz-service:nth-child(1) {
    animation-delay: 0.5s;
  }
  .homepage #main > .umb-block-grid > .lz-row:first-child .lz-service:nth-child(2) {
    animation-delay: 0.59s;
  }
  .homepage #main > .umb-block-grid > .lz-row:first-child .lz-service:nth-child(3) {
    animation-delay: 0.68s;
  }
  .homepage #main > .umb-block-grid > .lz-row:first-child .lz-service:nth-child(4) {
    animation-delay: 0.77s;
  }
  .homepage #main > .umb-block-grid > .lz-row:first-child .lz-service:nth-child(5) {
    animation-delay: 0.86s;
  }
  .homepage #main > .umb-block-grid > .lz-row:first-child .lz-service:nth-child(6) {
    animation-delay: 0.95s;
  }
  /* Scrolling (default.js): the start state, and the way in once the element is in view (.is-in). */
  /* Hidden at once (no transition on the way out); the transition only on the way in. !important beats an element's own
     transition (the accordion items), for the 0.9s until default.js takes the classes off again. */
  .cd-reveal {
    opacity: 0;
  }
  .cd-reveal--up {
    translate: 0 32px;
  }
  .cd-reveal--left {
    translate: -48px 0;
  }
  .cd-reveal--right {
    translate: 48px 0;
  }
  .cd-reveal.is-in {
    opacity: 1;
    translate: none;
    transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--cd-reveal-delay, 0ms), translate 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--cd-reveal-delay, 0ms) !important;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .cd-reveal--left, .cd-reveal--right {
    translate: 0 32px;
  }
}