/* D&G Suncontrol: opmaak van alle secties. Alles onder .dg / --dg-. Waarden 1-op-1 uit de Squarespace-site (site.css, gemeten 2026-11-03). */

@font-face{font-family:'Poppins';src:url(../fonts/poppins-200.woff2) format('woff2');font-weight:200;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';src:url(../fonts/poppins-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';src:url(../fonts/poppins-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Squarespace-kleuren: accent hsl(37.71,89.34%,52.16%), lightAccent hsl(60,4.35%,95.49%), darkAccent hsl(0,0%,21.96%). */
  --dg-accent:#f2a118;
  --dg-light:#f4f4f3;
  --dg-dark:#383838;
  --dg-black:#000;
  --dg-white:#fff;
  --dg-font:'Poppins',sans-serif;
  /* Squarespace maxPageWidth: bovengrens voor de titelschaal. */
  --dg-max-page:1500px;
}

/* ---------- Basis binnen de secties (tegen Hello Elementor- en Elementor-standaarden) ---------- */
.dg,.dg *{box-sizing:border-box}
.dg{font:400 16px/1.5em var(--dg-font);color:var(--dg-black);letter-spacing:0;-webkit-font-smoothing:antialiased}
.dg img{display:block;max-width:100%;height:auto;border:0}
body .dg a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.dg p{margin:0 0 1em}
.dg p:last-child{margin-bottom:0}
.dg .dg-rich p{margin:0}
.dg .dg-rich p+p{margin-top:1em}
.dg :focus-visible{outline:2px solid var(--dg-black);outline-offset:3px}
.dg .dg-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Typografie ----------
   Squarespace-schaal: grootte = (v - 1) * eenheid + 1rem.
   Vanaf 768px (of liggend): eenheid 1.2vw, begrensd zoals Squarespace: min(..., max((v-1)*0.012*maxPageWidth + 1rem, v*1rem)).
   Tot 767px staand: eenheid 0.012 * min(100vh, 900px). */
.dg-h1{--v:4}
.dg-h2{--v:2.8}
.dg-h3{--v:2.2}
.dg-h4{--v:1.6}
.dg-large{--v:1.4}
.dg-caption{--v:1.2}
.dg-small{--v:.9}
.dg-h1,.dg-h2,.dg-h3,.dg-h4,.dg-large,.dg-caption,.dg-small{
  font-size:min(calc((var(--v) - 1) * 1.2vw + 1rem), max(calc((var(--v) - 1) * .012 * var(--dg-max-page) + 1rem), calc(var(--v) * 1rem)));
}
@media screen and (max-width:767px) and (orientation:portrait){
  .dg-h1,.dg-h2,.dg-h3,.dg-h4,.dg-large,.dg-caption,.dg-small{font-size:calc((var(--v) - 1) * calc(.012 * min(100vh, 900px)) + 1rem)}
}
.dg-h1,.dg-h2,.dg-h3,.dg-h4,.dg-caption{font-family:var(--dg-font);font-weight:200;line-height:1.2em;letter-spacing:-.02em;margin:0;color:var(--dg-black);text-transform:none}
/* Squarespace: h1 regelhoogte 1.056em, h2 1.1136em, h3 1.1136em, h4 1.1712em (gemeten). */
.dg-h1{line-height:1.056em}
.dg-h2,.dg-h3,.dg-caption{line-height:1.1136em}
.dg-h4{line-height:1.1712em}
.dg-small{line-height:1.5em}
.dg .dg-accent{color:var(--dg-accent)}
.dg-upper{text-transform:uppercase}

/* ---------- Knoppen (Squarespace primaire knop) ---------- */
body .dg .dg-btn{display:inline-block;background:var(--dg-black);color:var(--dg-white);font:400 1rem/normal var(--dg-font);letter-spacing:0;text-decoration:none;text-align:center;padding:.6em 1.67em;border:0;border-radius:0;cursor:pointer;transition:opacity .1s linear}
body .dg .dg-btn:hover{opacity:.8}
body .dg .dg-btn--small{font-size:min(calc(-.1 * 1.2vw + 1rem), max(calc(-.1 * .012 * var(--dg-max-page) + 1rem), .9rem))}
@media screen and (max-width:767px) and (orientation:portrait){
  body .dg .dg-btn--small{font-size:calc(-.1 * calc(.012 * min(100vh, 900px)) + 1rem)}
}

/* ---------- Sociale iconen (25px, zoals Squarespace) ---------- */
body .dg .dg-social{display:block;flex:0 0 auto;width:25px;height:25px;color:var(--dg-black);text-decoration:none;line-height:0}
.dg-social svg{display:block;width:25px;height:25px}

/* ---------- Tekstblokken (Squarespace .sqs-html-content) ---------- */
.dg .dg-text>*{margin:1rem 0}
/* Squarespace: h1 tot h4 in tekstblokken 2rem boven en onder. */
.dg .dg-text>h1,.dg .dg-text>h2,.dg .dg-text>h3,.dg .dg-text>h4{margin:2rem 0}
.dg .dg-text>:first-child{margin-top:0}
.dg .dg-text>:last-child{margin-bottom:0}
.dg .dg-text p,.dg p.dg-small{white-space:pre-wrap}
/* Squarespace: links in de footer zijn inline-block (#footer-sections), elders gewoon inline; lange woorden breken af. */
.dg-footer .dg-text a{display:inline-block}
.dg .dg-text,.dg .dg-fe__b{overflow-wrap:break-word}
.dg strong{font-weight:700}

/* ---------- Raster (Squarespace Fluid Engine) ----------
   Mobiel: 8 kolommen, rand 6vw, rijen min. 24px. Vanaf 768px: 24 kolommen, rand 2vw, rijhoogte 2.15% van de containerbreedte.
   Rijen: --rows (desktop) en --rows-m (mobiel). Blok: --a (desktop) en --am (mobiel) als rij/kolom/rij/kolom. */
/* Squarespace: sectiehoogte "eigen" N geeft N/10 vmax boven en onder (standaard 10 = 1vmax), "klein" 3.3vmax. */
.dg-section__wrap{width:100%;padding:var(--pad,1vmax) 0}
.dg-fe{--g:calc(6vw - 11px);--cell:calc((var(--dg-max-page) - 11px * 7) / 8);position:relative;display:grid;gap:11px;
  grid-template-rows:repeat(var(--rows-m),minmax(24px,auto));
  grid-template-columns:minmax(var(--g),1fr) repeat(8,minmax(0,var(--cell))) minmax(var(--g),1fr);overflow-x:hidden;overflow-x:clip}
.dg-fe__b{grid-area:var(--am);position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0}
@media (min-width:768px){
  .dg-fe{--g:calc(2vw - 11px);--cell:calc((var(--dg-max-page) - 11px * 23) / 24);--cw:min(var(--dg-max-page),calc(100vw - 4vw));
    grid-template-rows:repeat(var(--rows),minmax(calc(var(--cw) * var(--rowf,.0215)),auto));
    grid-template-columns:minmax(var(--g),1fr) repeat(24,minmax(0,var(--cell))) minmax(var(--g),1fr)}
  .dg-fe__b{grid-area:var(--a)}
  .dg-fe__b--top{justify-content:flex-start}
}

/* ---------- Header ----------
   Desktop (vanaf 800px, muis): zelfde flexverdeling als Squarespace: logo+menu 67% (logo 33% / menu 34%), acties 33%.
   Mobiel (tot 799px, of touch tot 1024px): hamburger links (50px), mobiel logo rechts, menu over het hele scherm. */
.dg-header{position:relative;z-index:10;font-size:16px;line-height:16px}
.dg-header__inner{position:relative;z-index:2;padding:.1vw 2vw}
.dg-header__desktop{display:flex;align-items:center}
.dg-header__mobile{display:none}
.dg-header__titlenav{display:flex;flex:1 0 67%;align-items:center}
.dg-header__title{flex:1 1 33%;font-size:0;line-height:0}
body .dg .dg-header__logo{display:inline-block;max-width:100%;max-height:190px;text-decoration:none}
.dg .dg-header__logo-img{display:block;width:auto;max-width:100%;height:auto;max-height:190px}
.dg-header__nav{flex:1 1 34%;text-align:center}
.dg-header__navlist{display:inline-flex;justify-content:center}
body .dg .dg-header__link{display:flex;align-items:center;margin:0 1.25vw;padding:.1em 0;font:400 16px/24px var(--dg-font);letter-spacing:0;color:var(--dg-black);text-transform:uppercase;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat}
body .dg .dg-header__link[aria-current="page"]{background-size:100% 1px}
.dg-header__actions{display:flex;flex:1 1 33%;min-width:0;justify-content:flex-end;align-items:center}
.dg-header__socials{display:flex}
.dg-header__socials .dg-social{margin-left:2.5vw}
body .dg .dg-header__socials .dg-social:first-child{margin-left:3.8vw}
.dg-header__cta{margin-left:3.8vw;text-align:center;line-height:1}
body .dg .dg-header__cta .dg-btn{text-transform:uppercase}

/* Hamburger (Squarespace doubleLineHamburger: 2 lijnen van 35px, 11px uit elkaar; open: kruis van 28px) */
body .dg .dg-burger{position:relative;display:block;margin:0;padding:1px 6px;border:0;border-radius:0;background:none;color:var(--dg-black);cursor:pointer;line-height:normal}
body .dg .dg-burger:hover,body .dg .dg-burger:focus{background:none;color:var(--dg-black)}
.dg-burger__box{position:relative;display:block;width:35px;height:35px}
.dg-burger__top,.dg-burger__bottom{position:absolute;top:0;left:0;width:35px;height:1px;margin:17px 0;background:currentColor;
  transition:transform .25s cubic-bezier(.2,.6,.3,1),width .25s cubic-bezier(.2,.6,.3,1)}
.dg-burger__top{transform:translateY(-5.5px)}
.dg-burger__bottom{transform:translateY(5.5px)}
.dg-header.is-open .dg-burger__top,.dg-header.is-open .dg-burger__bottom{width:28px}
.dg-header.is-open .dg-burger__top{transform:translateX(3.5px) rotate(-135deg)}
.dg-header.is-open .dg-burger__bottom{transform:translateX(3.5px) rotate(135deg)}
.dg-burger__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Mobiel menu (Squarespace .header-menu); --dg-header-h wordt door dg.js gezet. */
.dg-menu{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;padding-top:var(--dg-header-h,0px);text-align:center;opacity:0;visibility:hidden;
  transition:visibility .6s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1)}
.admin-bar .dg-menu{top:var(--wp-admin--admin-bar--height,0px)}
.dg-header.is-open .dg-menu{opacity:1;visibility:visible}
.dg-menu__bg{position:absolute;inset:0;background:var(--dg-light)}
.dg-menu__folder{position:relative;display:flex;flex:1 0 auto;flex-direction:column;font-size:19.2px;line-height:19.2px}
.dg-menu__content{display:flex;flex:1 0 auto;flex-direction:column;justify-content:center}
.dg-menu__item{padding:0 2vw}
body .dg .dg-menu__link{position:relative;display:inline-flex;align-items:center;margin:3.2vw 5vw;font:400 8.5vmin/1 var(--dg-font);letter-spacing:0;color:var(--dg-black);text-transform:uppercase;text-decoration:none;transition:opacity .25s cubic-bezier(.4,0,.2,1)}
@media (hover:hover){body .dg .dg-menu__link:hover{opacity:.9}}
@media screen and (min-width:576px){body .dg .dg-menu__link{font-size:6.6vmin}}
@media screen and (min-width:768px){body .dg .dg-menu__link{font-size:6vmin}}
.dg-menu__socials{display:flex;justify-content:center;align-items:center;margin:0 20px 6vw}
.dg-menu__socials .dg-social{margin:15px 7.5px}
.dg-menu__cta{line-height:19.2px}
body .dg .dg-menu__cta .dg-btn{min-width:210px;margin:4vw 6vw 6vw;font-size:19.2px;text-transform:uppercase}
.dg-menu__socials,.dg-menu__cta{transform:translateY(100%);transition:transform .6s cubic-bezier(.4,0,.2,1)}
.dg-header.is-open .dg-menu__socials,.dg-header.is-open .dg-menu__cta{transform:none}
html.dg-menu-open,html.dg-menu-open body{overflow:hidden}

@media only screen and (pointer:coarse) and (max-width:1024px),screen and (max-width:799px){
  .dg-header__inner{padding:6vw}
  .dg-header__desktop{display:none}
  .dg-header__mobile{display:flex;align-items:center}
  .dg-header__burgerwrap{display:flex;flex:0 0 50px;justify-content:flex-start;align-items:flex-end}
  .dg-header__mtitle{flex:1 0 calc(100% - 50px);text-align:right;line-height:16px}
  body .dg .dg-header__mlogo{display:inline-block;max-height:150px;vertical-align:baseline;text-decoration:none}
  .dg .dg-header__mlogo-img{display:block;width:auto;max-width:100%;height:auto;max-height:150px}
}

/* ---------- Footer (oranje) ---------- */
.dg-footer{position:relative;display:flex;align-items:center;background:var(--dg-accent);color:var(--dg-black)}
body .dg .dg-footer__hr{display:block;width:100%;height:1px;margin:8px 0;border:0;background:var(--dg-black)}
.dg .dg-footer__badge-img{position:absolute;top:0;left:50%;width:auto;max-width:100%;height:100%;object-fit:contain;transform:translateX(-50%)}

/* Elementor-containers met onze secties: gewone blokopmaak. In een flexkolom rekent Chromium de hoogte van de
   carrousel op mobiel te klein uit (de footer schoof 100px over de knop). */
.e-con:has(> .elementor-widget[class*="elementor-widget-dg-"]){display:block}

/* ---------- Secties ----------
   Squarespace: sectie verticaal gecentreerd, eigen minimumhoogte in vh (--minh). Blokuitlijning per breedte. */
.dg-section{position:relative;display:flex;align-items:center;min-height:var(--minh,0px);background:var(--dg-white)}
/* Rechtgezet t.o.v. Squarespace: op smalle telefoons brak "GEVELBEKLEDING" midden in het woord.
   Titels worden daar net klein genoeg om het langste woord heel te laten (breedte 7.4 x lettergrootte, kolom 88vw). */
@media screen and (max-width:767px) and (orientation:portrait){
  .dg-titel .dg-h1{font-size:min(calc((var(--v) - 1) * calc(.012 * min(100vh, 900px)) + 1rem), 11.8vw)}
}
.dg-fe__b--m-start{justify-content:flex-start}
.dg-fe__b--m-end{justify-content:flex-end}
@media (min-width:768px){
  .dg-fe__b--start{justify-content:flex-start}
  .dg-fe__b--end{justify-content:flex-end}
  .dg-fe__b--center{justify-content:center}
}

/* ---------- Pijlknoppen (Squarespace lijstsecties) ---------- */
.dg-arrows{display:flex;justify-content:center}
.dg-arrows__desk{display:grid;grid-template-columns:60px 60px;gap:20px}
body .dg .dg-arrow,body .dg .dg-arrow-m{position:relative;display:block;margin:0;padding:0;border:0;border-radius:50%;overflow:hidden;background:transparent;cursor:pointer;line-height:0;transition:opacity .3s}
body .dg .dg-arrow{width:60px;height:60px}
.dg-arrow__bg{position:absolute;inset:0;background:var(--dg-dark);opacity:.7;transition:opacity .3s}
.dg-arrow:hover .dg-arrow__bg,.dg-arrow:focus-visible .dg-arrow__bg{opacity:1}
.dg-arrow__icon{position:relative;display:block;width:36px;height:36px;margin:0 auto;fill:none;stroke:var(--dg-white);stroke-width:2px;stroke-linejoin:round;stroke-linecap:round}
.dg-arrows-m{display:none;justify-content:center}
body .dg .dg-arrow-m{width:48px;height:48px}
body .dg .dg-arrow-m--prev{margin-right:10px}
.dg-arrow-m__bg{position:absolute;top:4px;left:4px;width:40px;height:40px;border-radius:50%;background:var(--dg-dark)}
.dg-arrow-m__icon{position:relative;display:block;width:20px;height:20px;margin:0 auto;fill:none;stroke:var(--dg-white);stroke-width:2}
.dg-arrows--carousel .dg-arrow__bg,.dg-arrows-m--carousel .dg-arrow-m__bg{background:var(--dg-black)}
/* Squarespace-lijstsecties: mobiele pijlen tot 575px. */
@media (max-width:575px){
  .dg-arrows{display:none}
  .dg-arrows-m{display:flex}
}

/* Dia's: alle dia's in dezelfde rastercel, verschoven met --k (positie t.o.v. de huidige dia; dg.js). */
.dg-slides__slide,.dg-car__slide{grid-area:1/1;transform:translateX(calc(var(--k,0) * (100% + var(--gap))));transition:transform .6s cubic-bezier(.4,0,.2,1)}
.dg-slides__slide.is-far,.dg-car__slide.is-far{visibility:hidden}
.dg-slides__slide.no-anim,.dg-car__slide.no-anim{transition:none}

/* ---------- Fotoslider (75vh, volgende foto loert 10% binnen vanaf 576px) ---------- */
.dg-slides{position:relative;overflow:hidden;background:var(--dg-white);--gap:0px}
.dg .dg-slides__track{display:grid;grid-template-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}
.dg-slides__slide{position:relative;height:75vh;overflow:hidden}
.dg .dg-slides__img{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:cover}
.dg-arrows--slider{position:absolute;left:0;right:0;bottom:0;padding:0 40px 2vw}
.dg-arrows-m--slider{position:absolute;left:0;right:0;bottom:40px}
@media (min-width:576px){
  .dg-slides{--gap:20px}
  .dg .dg-slides__track{padding-right:calc(10% + 20px)}
}

/* ---------- Kaarten (lichtgrijs, 3 kolommen) ---------- */
.dg-kaarten{padding:3.3vmax 0;background:var(--dg-white)}
.dg .dg-kaarten__list{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:stretch;margin:0;padding:0 2vw;list-style:none}
.dg .dg-kaart{display:flex;flex-direction:column;margin:0;padding:6%;background:var(--dg-light);font:400 16px/24px var(--dg-font);color:var(--dg-black)}
.dg-kaart__media{width:26%;margin:0 0 8%}
.dg .dg-kaart__img{width:100%;height:auto}
.dg-kaart__content{display:flex;flex:1 1 0%;flex-direction:column;justify-content:space-between}
.dg .dg-kaart__title{line-height:1.1136em;text-align:left}
.dg-kaart__desc{margin-top:4%}
.dg .dg-kaart__desc p{margin:0;white-space:pre-wrap}
.dg-kaart__btn{margin-top:8%;text-align:left}
/* Squarespace: 2 kolommen vanaf 576px, 3 vanaf 768px. */
@media (min-width:576px){
  .dg .dg-kaarten__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
  .dg .dg-kaarten__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- Projectcarrousel (3 per scherm, foto 2:3) ---------- */
.dg-car{overflow:hidden;padding:3.3vmax 0 6vmax;background:var(--dg-white);--gap:20px}
.dg-car__gutter{padding:0 2vw}
.dg .dg-car__track{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin:0;padding:0;list-style:none}
.dg .dg-car__slide{display:flex;flex-direction:column;align-self:end;margin:0}
.dg-car__media{margin:0 12.5% 8%}
.dg .dg-car__inner{position:relative;box-sizing:content-box;height:1px;padding-bottom:150%}
.dg .dg-car__img{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:cover}
.dg .dg-car__title{max-width:75%;margin:0 12.5%;text-align:center;text-transform:uppercase}
.dg-arrows--carousel{margin-top:30px;padding:0 2vw}
.dg-arrows-m--carousel{margin-top:20px}
.dg-car__btn{margin-top:70px;padding:0 2vw;text-align:center}
/* Squarespace: 1 per scherm tot 575px, 2 tot 991px, 3 vanaf 992px (dg.js gebruikt dezelfde grenzen). */
@media (min-width:576px){
  .dg .dg-car__track{grid-template-columns:repeat(2,minmax(0,1fr));padding-right:40px}
}
@media (min-width:992px){
  .dg .dg-car__track{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- Vrije sectie: fotoblokken vullen hun rastervak (Squarespace image block "fill") ---------- */
.dg .dg-fe__img{overflow:hidden}
.dg .dg-fe__img-el{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:cover}
.dg .dg-underline{text-decoration:underline}

/* ---------- Diashow per project (Squarespace gallery slideshow: overvloeien om de 2 s; hoogte uit de foto's, zie widget) ---------- */
.dg-show{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:rgba(175,175,175,.1)}
.dg .dg-show__list{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.dg-show__slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.dg-show__slide.is-active{opacity:1}
.dg .dg-show__img{width:100%;max-width:none;height:100%;object-fit:cover}

/* ---------- Lijsten en kleuren in tekstblokken (Squarespace ul[data-rte-list]: bolletje rechts in de 40px inspringing) ---------- */
.dg .dg-text ul,.dg .dg-text ol{margin:1rem 0;padding:0 0 0 40px;list-style:none}
.dg .dg-text ol{counter-reset:dg-list}
.dg .dg-text li{margin:0;padding:0;list-style:none}
.dg .dg-text ol>li{counter-increment:dg-list}
.dg .dg-text li>*{margin:.5em 0}
.dg .dg-text li>:first-child::before{display:inline-block;min-width:40px;margin-left:-40px;padding-right:10px;text-align:right;content:"\2022"}
.dg .dg-text ol>li>:first-child::before{content:counter(dg-list) ". "}
.dg .dg-dark{color:var(--dg-dark)}

/* ---------- Contactformulier (Squarespace form block: grijs blok, 6% binnenruimte) ---------- */
.dg .dg-form{justify-content:flex-start;background:var(--dg-light)}
.dg .dg-form__form,.dg .dg-form__done{padding:6%}
.dg .dg-form__form[hidden],.dg .dg-form__done[hidden],.dg .dg-form__error[hidden]{display:none}
.dg .dg-form__group{min-width:0;margin:0;padding:0;border:0}
.dg .dg-form__row{display:flex;align-items:flex-end;gap:0 10px}
.dg .dg-form__row>.dg-form__field{flex:1 1 0;min-width:0}
.dg .dg-form__field{position:relative;margin:0 0 20px}
.dg .dg-form__title{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.55em;float:none;width:auto;margin:0;padding:0 0 4px;font:400 16px/24px var(--dg-font);color:var(--dg-black)}
/* Labels en "(vereist)" hebben de klasse dg-small (Squarespace: 0.9-schaal). */
.dg .dg-form__caption{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.55em;margin:0;padding:4px 0 2px;color:var(--dg-black)}
.dg .dg-form__req{opacity:.7;line-height:1}
.dg .dg-form__field--email .dg-form__req,.dg .dg-form__field--message .dg-form__req{line-height:1.5em}
body .dg .dg-form__input{display:block;width:100%;height:36px;margin:0;padding:5px 10px;border:1px solid var(--dg-black);border-radius:.4rem;background:transparent;box-shadow:none;
  font:400 16px/24px var(--dg-font);letter-spacing:0;color:var(--dg-black);-webkit-appearance:none;appearance:none}
body .dg .dg-form__input--area{height:100px;min-height:100px;resize:vertical}
body .dg .dg-form__input:focus{border-color:var(--dg-black);box-shadow:none}
body .dg .dg-form__input[aria-invalid="true"]{border-color:#ce2c30}
.dg .dg-form__error{display:flex;align-items:flex-start;gap:10px;margin:0 0 4px;padding:6px 10px;border-radius:.4rem;background:#ce2c30;color:var(--dg-white);font:400 14px/21px var(--dg-font)}
.dg .dg-form__error-icon{flex:0 0 auto;width:16px;height:16px;margin-top:2.5px}
.dg .dg-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
body .dg .dg-form__submit[aria-busy="true"]{opacity:.6;cursor:progress}
.dg .dg-form__done:focus{outline:0}

@media (prefers-reduced-motion:reduce){
  .dg *,.dg *::before,.dg *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}