/* ==========================================================================
   Cammaert EVR BV
   Gebouwd op het Figma-ontwerp "High fidelity", frame 244:4 (home).
   Elke maat komt uit de design context van dat frame, niet uit de live site.
   Ontwerpbreedte 1440, container 1272 vanaf x=84.
   ========================================================================== */

:root{
  --maroon:#500C0C;
  --red:#D80C0C;
  --ink:#000;
  --body:#686868;
  --wash:#F9F9F9;
  --container:1272px;
  --radius:7px;        /* Figma: rounded-[7px] */
  --gutter:84px;       /* (1440 - 1272) / 2 */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--body);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:20px;font-weight:400;line-height:1.2;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:'Boldonse',Impact,system-ui,sans-serif;font-weight:400}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0}
@media (max-width:1439px){.wrap{max-width:100%;padding:0 clamp(20px,5.8vw,84px)}}
.skip{position:absolute;left:-9999px;background:var(--maroon);color:#fff;padding:12px 20px;z-index:200}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ---------------------------------------------------------------- header
   Figma: balkvorm is een SVG van 1272x97 op x=74, y=71. Logo-mascotte 71x90
   op x=191, woordmerk Montserrat Bold 34.875px #D80C0C op x=256, y=102.
   Menu Inter Bold 19.167px #686868. */
.site-head{position:absolute;top:71px;left:0;right:0;z-index:60;pointer-events:none}
.head-bar{position:relative;width:1272px;max-width:calc(100% - 60px);margin:0 auto;
  height:97px;pointer-events:auto}
.head-bar::before{content:"";position:absolute;left:-10px;top:0;width:calc(100% + 10px);
  height:100%;background:url(/assets/v2/img/headerbar.svg) left top/100% 100% no-repeat;
  filter:drop-shadow(0 10px 22px rgba(80,12,12,.17)) drop-shadow(0 2px 5px rgba(0,0,0,.08))}
.head-inner{position:relative;height:97px;display:flex;align-items:center}
.logo{display:flex;align-items:center;gap:0;position:absolute;left:117px;top:4px}
.logo img{width:71px;height:90px;object-fit:contain}
.logo span{font-family:'Montserrat',system-ui,sans-serif;font-weight:700;
  font-size:34.875px;line-height:1;color:var(--red);margin-left:-6px}
.nav{position:absolute;left:513px;top:37px}
.nav ul{display:flex;align-items:center}
.nav a{display:inline-flex;align-items:center;gap:8px;font-size:19.167px;font-weight:700;
  line-height:1.2;color:var(--body);padding:0 24px;transition:color .15s}
.nav li:first-child a{padding-left:0}
.nav a:hover{color:var(--red)}
.nav a[aria-current="page"]{color:var(--ink)}
.burger{display:none;position:absolute;right:26px;top:30px;background:none;border:0;
  padding:8px;cursor:pointer}
.burger span{display:block;width:26px;height:2px;background:var(--maroon);margin:5px 0;
  transition:transform .2s,opacity .2s}

/* ---------------------------------------------------------------- knoppen
   De vormen zijn SVG-parallellogrammen uit het ontwerp, 35px hoog.
   Tekst Inter Bold 19.167px wit, wit gecentreerd in de vorm. */
/* isolation:isolate is nodig, niet cosmetisch: de vorm zit in ::before met
   z-index:-1 en zonder eigen stapelcontext valt die achter de achtergrond van
   een gekleurde sectie. Op wit viel dat niet op omdat de achtergrond van het
   document naar het canvas gaat en daar wél boven staat. */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;height:35px;
  font-size:19.167px;font-weight:700;line-height:1;color:#fff;white-space:nowrap;
  padding:0 24px;transition:filter .15s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--shape) left top/100% 100% no-repeat}
.btn:hover{filter:brightness(1.12)}
.btn--offerte{--shape:url(/assets/v2/img/btn-gratis-offerte.svg);width:174px;justify-content:center}
.btn--diensten{--shape:url(/assets/v2/img/btn-onze-diensten.svg);width:184px;justify-content:center}
.btn--info{--shape:url(/assets/v2/img/btn-meer-info.svg);width:137px;justify-content:center}
.btn--overons{--shape:url(/assets/v2/img/btn-over-ons.svg);width:133px;justify-content:center}

/* ---------------------------------------------------------------- hero
   Figma: 1440x1032. Foto met gradient
   linear-gradient(133.53deg, rgba(0,0,0,0) 39.967%, rgba(0,0,0,.45) 52.834%).
   Rode diagonaal = Polygon 2, geroteerd 156.88 graden. */
.hero{position:relative;height:1032px;overflow:hidden;color:#fff;isolation:isolate}
/* Frederic (2026-08-19): niet de vakman in beeld, wel het voegwerk zelf. De
   Figma-uitsnede (spiegelen plus 155,83% inzoomen) hoorde bij die foto. Deze
   detailfoto is 1800x1200 en vult de hero rechtstreeks: op 1440x1032 valt er
   enkel 54px links en rechts weg, verticaal niets. Niet spiegelen, dan blijft de
   donkere werkkleding links staan, waar de titel komt. De foto is een stuk
   lichter dan de Figma-foto, dus de gradient hieronder heeft een extra laag
   nodig voor leesbare witte tekst. */
.hero-photo{position:absolute;inset:0;background:#3a3a3a;overflow:hidden}
.hero-photo picture{display:block}
.hero-photo img,.hero-video{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover;object-position:50% 50%}
/* De geluidloze achtergrondvideo ligt over het herobeeld. Wie beweging liever
   uit heeft, krijgt dat beeld te zien: de video verdwijnt en wat eronder ligt
   staat er al. */
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}
.hero-shade{position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.14) 78%,rgba(0,0,0,0) 100%),
    linear-gradient(215.6deg,rgba(0,0,0,0) 39.967%,rgba(0,0,0,.45) 52.834%)}
.hero-diag{position:absolute;inset:0;pointer-events:none}
/* helder rood: (1016,0) (1440,0) (1440,541) */
.hero-diag::before{content:"";position:absolute;top:0;right:0;width:424px;height:541px;
  background:var(--red);clip-path:polygon(0 0,100% 0,100% 100%)}
/* donkerrood: (1440,487) (1440,1032) (1131,1032) */
.hero-diag::after{content:"";position:absolute;right:0;bottom:0;width:309px;height:545px;
  background:var(--maroon);clip-path:polygon(100% 0,100% 100%,0 100%)}
.hero .wrap{position:relative;height:100%;z-index:2}

.rating{position:absolute;left:0;top:440px;display:flex;align-items:center;gap:7.5px}
.rating img{width:86.326px;height:14.396px}
.rating p{font-size:14.396px;font-weight:300;line-height:1;letter-spacing:-1.0078px;color:#fff}
/* Regelhoogte 60px, niet 1,2. Opgemeten in Figma: het titelvak is 120px hoog
   voor twee regels (node 244:12), dus 60px per regel; de glyphs staan daar op
   486-531 en 546-591. Met 1,2 (37,6px) stonden de twee regels tegen elkaar en
   viel het gat naar de tekst eronder te groot uit. De koppen in de rest van de
   pagina zijn één regel, dus die zaten wel juist en blijven op 1,2. */
.hero h1{position:absolute;left:0;top:475px;width:795.652px;
  font-size:31.304px;line-height:60px;color:#fff}
.hero-lead{position:absolute;left:0;top:622px;width:666px;
  font-size:20px;font-weight:400;line-height:1.2;color:#fff}
.hero-cta{position:absolute;left:0;top:744px;display:flex;flex-wrap:wrap;gap:14px}
/* Frederic (2026-08-19): geen "scroll down" in de hero, weggehaald. */

/* ---------------------------------------------------------------- diensten
   h2 y=1167 (135 na de hero), intro y=1254 w=496, kaarten y=1390 en 1682,
   626x265 met 1px rand #500C0C en radius 7. */
.services{padding:147px 0 117px}
.services h2{font-size:31.304px;line-height:1.2;color:var(--ink)}
.services-lead{width:496px;max-width:100%;margin-top:37px;font-size:20px;color:var(--body)}
.services-grid{display:grid;grid-template-columns:626px 626px;gap:27px 20px;margin-top:95px;
  justify-content:space-between}
.service{border:1px solid var(--maroon);border-radius:var(--radius);height:265px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:24px;text-align:center;transition:box-shadow .18s}
.service:hover{box-shadow:0 10px 30px rgba(80,12,12,.10)}
.service h3{font-size:31.304px;line-height:1.2;color:var(--maroon)}

/* ---------------------------------------------------------------- meer over ons
   Grijze band y=2095..3037. Beeld 730x674 op x=84, y=2238, radius 7.
   Tekstkolom 450px op x=919. Twee rode polygonen links, deels buiten beeld. */
.about{position:relative;background:var(--wash);padding:143px 0 125px;overflow:hidden}
.about-deco{position:absolute;pointer-events:none;z-index:0}
.about-deco--5{left:calc(-516px + clamp(-276px, 872px - 50vw, 0px));top:-386px;width:966px;height:974px;
  display:flex;align-items:center;justify-content:center}
.about-deco--5>span{flex:none;transform:rotate(180deg);width:966px;height:974px;position:relative}
.about-deco--5 img{position:absolute;left:6.7%;top:0;width:86.6%;height:75%}
.about-deco--4{left:calc(-776px + clamp(-276px, 872px - 50vw, 0px));top:-88px;width:1157px;height:1167px}
.about-deco--4 img{position:absolute;left:6.7%;top:0;width:86.6%;height:75%}
.about .wrap{position:relative;z-index:1}
.about-grid{position:relative;z-index:1;display:grid;grid-template-columns:730px 450px;column-gap:105px;
  justify-content:start;align-items:start}
.about-media img{width:730px;height:674px;object-fit:cover;border-radius:var(--radius)}
.about-body{padding-top:75px}
.about-body h2{font-size:31.304px;line-height:1.2;color:var(--ink)}
.about-body p{margin-top:38px;font-size:20px;line-height:1.2;color:var(--body)}
.about-body p+p{margin-top:24px}
.about-body .btn{margin-top:54px}

/* ---------------------------------------------------------------- projecten
   h2 y=3163 gecentreerd op x=720, intro 479px gecentreerd, knop y=3372,
   kaarten 406x366 op y=3463, titel y=3839, tekst y=3881 w=381, knop y=3970. */
.projects{padding:137px 0 239px;text-align:center}
.projects h2{font-size:31.304px;line-height:1.2;color:var(--ink)}
.projects-lead{width:479px;max-width:100%;margin:37px auto 0;font-size:20px;color:var(--body)}
.projects .btn{margin-top:35px}
.projects-grid{display:grid;grid-template-columns:repeat(3,406px);gap:27px;margin-top:64px;
  justify-content:space-between;text-align:left}
.project img{width:406px;height:366px;object-fit:cover;border-radius:var(--radius)}
.project-title{margin-top:10px;font-family:'Boldonse',Impact,sans-serif;font-weight:400}
.project-title .name{font-size:16.506px;color:var(--red)}
.project-title .sep{font-size:16.506px;color:var(--ink)}
.project-title .place{font-size:12px;color:var(--ink)}
.project p{width:381px;max-width:100%;margin-top:20px;font-size:20px;color:var(--body)}
.project .btn{margin-top:47px}

/* ---------------------------------------------------------------- footer
   Maroon vanaf y=4255. Lijn y=4385. Koppen Boldonse 32px op x=152/594/908.
   Items 22.046px met regelhoogte 32.81px, stappen van 42px. */
.site-foot{background:var(--maroon);color:#fff}
.foot-rule{height:1px;background:var(--red)}
.foot-top{padding:129px 0 0}
/* Frederic (24-08-2026): Cammaert heeft geen sociale profielen, dus die kolom is
   weg. In de plaats staan de ondernemingsgegevens naast contact, met de sitemap
   rechts ervan, en de drie samen gecentreerd in de container.
   Kolommen op auto en centreren met justify-content, niet met vaste breedtes:
   zo blijft de tussenruimte gelijk, ongeacht hoe lang de langste regel is. De
   tekst zelf blijft links uitgelijnd, want gecentreerde adresregels en
   opsommingen lezen slechter. */
.foot-cols{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;
  gap:0 96px;padding:63px 0 0}
/* De juridische kolom heeft geen kop, dus zonder deze duw zouden de nummers
   hoger beginnen dan de adresregels ernaast. 38px kop (32px op 1,2) plus de
   25px marge eronder. */
.foot-juridisch{padding-top:63px}
/* de inspringing van 68px hoorde bij de linksuitgelijnde voet; nu doet de
   tussenruimte van het raster dat werk */
.foot-cols>div{padding-left:0}
.foot-cols h2{font-size:32px;line-height:1.2;color:#fff;margin-bottom:25px}
.foot-cols li,.foot-cols a{font-size:19px;font-weight:400;line-height:28px;color:#fff}
.foot-cols li+li{margin-top:9.19px}
.foot-cols a:hover{text-decoration:underline;text-underline-offset:3px}
/* De 67px marge hoorde bij de tijd dat deze lijst ónder het adres stond. Nu
   staat ze in een eigen kolom en lijnt ze uit met de eerste adresregel, dus de
   duw komt van .foot-juridisch en niet meer van de lijst zelf. */
.foot-legal{margin-top:0}
.foot-bottom{display:flex;align-items:center;gap:26px;padding:15px 0}
.foot-bottom,.foot-bottom *{font-size:17.585px;font-weight:400;line-height:1.4;color:#fff}
.foot-bottom .spacer{margin-left:auto}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1360px){
  .head-bar{width:auto}
  .logo{left:40px}
  .nav{left:auto;right:26px}
  .services-grid{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr 450px;gap:40px}
  .about-media img{width:100%;height:auto}
  .projects-grid{grid-template-columns:repeat(3,1fr)}
  .project img,.project p{width:100%}
  .foot-cols{gap:0 clamp(32px,6vw,96px)}
  .hero h1,.hero-lead{width:min(100%,795px)}
}

/* Het bureaubladmenu staat op een vaste x en de logotekst is 34,875px breed.
   Gemeten: vanaf 987px en smaller schuiven "Cammaert" en "Diensten" over
   elkaar, op de homepage en op elke binnenpagina. De compacte kop met
   hamburger begint daarom op 1060px en niet pas op 760px, met marge zodat het
   menu niet tegen het woordmerk plakt. */
@media (max-width:1060px){
  .site-head{top:22px}
  .kruimel{padding-top:118px}
  .head-bar{height:64px;max-width:calc(100% - 32px)}
  /* de balk zweeft hier op 22px van de bovenrand met 16px marge links en rechts,
     dus is het een kaart: alle vier de hoeken rond, niet enkel de onderste twee */
  .head-bar::before{background:#fff;border-radius:var(--radius);
    box-shadow:0 6px 22px rgba(80,12,12,.16);left:0;width:100%;filter:none}
  .head-inner{height:64px}
  /* stond op -9px, waardoor het manneke 9px boven de balk uitstak en er
     onderin 15px leeg bleef. Balk 64px, manneke 58px, dus 3px centreert het. */
  .logo{left:20px;top:3px}
  .logo img{width:46px;height:58px}
  .logo span{font-size:24px}
  .burger{display:block;top:14px}
  /* het open menu heeft een sluitknop nodig: de drie streepjes worden een
     kruis, gelijk aan de pagina's op assets/style.css */
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* staat het menu open, dan hangt het uitklapvlak onder de balk: de balk geeft
     haar onderste twee rondingen af zodat de twee samen één kaart vormen */
  .head-bar:has(.nav[data-open="true"])::before{border-radius:var(--radius) var(--radius) 0 0}
  .nav{position:absolute;top:64px;left:0;right:0;background:#fff;display:none;
    border-radius:0 0 var(--radius) var(--radius);
    padding:10px 20px 18px;box-shadow:0 16px 30px rgba(0,0,0,.16)}
  .nav[data-open="true"]{display:block}
  .nav ul{flex-direction:column;align-items:flex-start}
  .nav a,.nav li:first-child a{padding:12px 0;font-size:18px}
}
@media (max-width:900px){
  /* De kop is hier compact (zie het blok op 1060px), dus de hero hoeft geen
     200px kruin meer. */
  .hero{height:auto;padding:150px 0 70px}
  /* De rode driehoeken zijn vaste maten van 541px hoog; op een hero van 544px
     sneden ze door de titel. Ze horen bij de brede opmaak. */
  .hero-diag{display:none}
  /* Onder 900px staat de tekst over de volle breedte, dus de horizontale sluier
     van de brede opmaak volstaat niet: er komt een laag bovenop. Tot 560px
     (telefoons) toont <picture> bovendien een eigen staande uitsnede,
     hero-voeg-mobiel.webp (900x1200): een staand venster sneed de brede foto
     tot een strook grijze muur, koker noch voeg bleef in beeld. De video is
     16:9 en wordt in datzelfde staande venster fors bijgesneden; het middelpunt
     blijft staan, daar speelt de actie zich af. */
  .hero-shade{background:
    linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.42) 62%,rgba(0,0,0,.5) 100%),
    linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.16) 100%)}
  .rating,.hero h1,.hero-lead,.hero-cta{position:static;transform:none}
  .rating{margin-bottom:14px}
  /* 60px regelhoogte hoort bij de brede Figma-opmaak; in de gestapelde versie
     is dat te veel lucht, zeker als de titel op drie regels valt. */
  .hero h1{margin-bottom:16px;line-height:1.4}
  .hero-lead{margin-bottom:28px}
  .about-grid{grid-template-columns:1fr;gap:32px}
  .about-body{padding-top:0}
  .about-body p{margin-top:24px}
  .services-grid{grid-template-columns:1fr;gap:16px}
  .projects-grid{grid-template-columns:1fr;gap:40px}
  /* op één kolom: geen centrering en geen duw, alles gewoon onder elkaar */
  .foot-cols{grid-template-columns:1fr;justify-content:stretch;gap:34px}
  .foot-juridisch{padding-top:0}
}
@media (max-width:760px){
  body{font-size:16px}
  .hero h1{font-size:24px}
  .hero-lead,.services-lead,.projects-lead,.about-body p,.project p{font-size:16px}
  .services{padding:56px 0 60px}
  .services h2,.about-body h2,.projects h2,.service h3{font-size:22px}
  /* stond op 31,304px en dat is een bureaubladmaat: het woord
     Privacyverklaring werd op 360px afgekapt */
  .paginakop h1{font-size:22px}
  .paginakop{padding-top:40px}
  .paginakop p{font-size:16px;margin-top:22px}
  .vacature h2{font-size:22px}
  .services-grid{margin-top:34px}
  .service{height:auto;padding:34px 22px}
  .about{padding:56px 0 60px}
  .projects{padding:56px 0 80px}
  .projects-grid{margin-top:40px}
  .foot-top{padding-top:60px}
  .foot-cols{padding-top:30px}
  .foot-cols h2{font-size:22px;margin-bottom:22px}
  .foot-cols li,.foot-cols a{font-size:18px;line-height:29px}
  .foot-legal{margin-top:0}
  /* de knop is een parallellogram, dus de linkerpunt schuift onder de tekst;
     12px zag eruit als plakken */
  .vacature{gap:10px 20px;margin-top:56px}
  .vacature .btn{margin-left:0}
  /* De drie juridische links samen zijn 346px bij 15px, en er is 345px
     beschikbaar op een venster van 390px. Op 13px met 10px tussenruimte is dat
     320px, dus staan ze op één regel in plaats van uiteen te vallen.
     "made by" krijgt met flex-basis een eigen regel. */
  .foot-bottom{flex-wrap:wrap;gap:12px clamp(6px,2.3vw,10px);margin-top:40px}
  .foot-bottom,.foot-bottom *{font-size:13px;line-height:1.6}
  .foot-bottom .spacer{margin-left:0;flex-basis:100%}
  .about-deco{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ================================================================ binnenpagina's
   Gedeeld door /diensten/, /projecten/, /over-ons/, /vacatures/ en de
   projectdetails. Header op wit met eigen balk-SVG (1255,7x105, schaduw erin),
   kruimelpad, paginakop, en onderaan een maroon "Meer over ons"-band.
   Opgemeten op de Figma-export van frame 244:368 (1440x2951). */
.site-head--licht .head-bar::before{background-image:url(/assets/v2/img/headerbar-licht.svg)}
.btn--solliciteer{--shape:url(/assets/v2/img/btn-solliciteer.svg);width:220px;justify-content:center}

.kruimel{padding-top:252px;font-size:16px;line-height:1.2;color:var(--body)}
.kruimel ol{display:flex;align-items:center;gap:9px;list-style:none;margin:0;padding:0}
.kruimel a{color:var(--body)}
.kruimel a:hover{color:var(--red)}
.kruimel li[aria-current]{color:var(--red)}
.kruimel .pijl{width:5px;height:8px;flex:0 0 auto}

.paginakop{padding-top:80px}
.paginakop h1{font-size:31.304px;line-height:1.2;color:var(--ink)}
.paginakop p{width:720px;max-width:100%;margin-top:36px;font-size:20px;color:var(--body)}
.paginakop .btn{margin-top:51px}

/* vacaturerij: titel links, functietype in het rood, knop rechts, lijn eronder */
/* wrap moet erop: de knop is 220px en krimpt niet, dus op smalle schermen
   duwde deze rij de hele pagina tot 642px breed en zoomde de browser uit */
.vacature{display:flex;align-items:center;flex-wrap:wrap;gap:19px;margin-top:141px}
.vacature h2{font-size:31.304px;line-height:1.2;color:var(--ink)}
.vacature .type{display:inline-flex;align-items:center;gap:9px;font-size:16px;color:var(--red)}
.vacature .type img{width:5px;height:8px}
.vacature .btn{margin-left:auto}
.vacature+.vacature-lijn{margin-top:26px;height:1px;background:#676767}
.vacature-detail{padding-top:44px}
.vacature-detail p,.vacature-detail li{width:720px;max-width:100%;font-size:20px;
  line-height:1.2;color:var(--body)}
.vacature-detail h3{margin-top:34px;font-size:22.046px;line-height:1.2;color:var(--ink)}
.vacature-detail ul{margin-top:14px;list-style:none}
.vacature-detail li{position:relative;padding-left:22px;margin-top:8px}
.vacature-detail li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  background:var(--red)}
.vacature-detail .vacature-slot{margin-top:34px}
.vacature-detail a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.vacature-detail p{font-size:16px}}

/* ================================================================== contact
   Opgemeten op de sectie "Neem contact op" in Figma-frame 244:260: blok van
   706px, twee kolommen met 26px tussenruimte, velden 48px hoog met een witte
   rand van 1px en radius 7, rijafstand 16px, tekstvak 131px, vinkje 13px, en
   de rode knop "Verstuur". De kop staat hier op onze eigen 31,304px in plaats
   van de 39,66px van dat frame, want dat frame is als enige op een andere
   schaal getekend en consistentie met de rest van de site weegt zwaarder. */
.contactblok{background:var(--maroon);color:#fff;padding:117px 0 129px}
.contactblok h2{font-size:31.304px;line-height:1.2;color:#fff}
.contactblok>.wrap>p{margin-top:24px;max-width:620px;font-size:20px;line-height:1.5;
  color:rgba(255,255,255,.82)}

.contactknoppen{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:47px}
.btn--mail{--shape:url(/assets/v2/img/btn-gratis-offerte.svg);justify-content:center}
/* telefoon is de tweede actie. Geen tweede knop met de maroon vorm, want die
   valt weg op deze achtergrond, en twee rode knoppen naast elkaar geven geen
   rangorde. */
.contactknoppen .telefoon{display:inline-flex;align-items:center;height:35px;
  font-size:19.167px;font-weight:700;line-height:1;color:#fff;
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.contactknoppen .telefoon:hover{text-decoration-color:var(--red)}

/* gegevensblok boven het formulier */
.contactgegevens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;
  margin-top:56px;padding-bottom:120px}
.contactgegevens h2{font-size:22.046px;line-height:1.3;color:var(--maroon)}
.contactgegevens p,.contactgegevens a{margin-top:14px;font-size:20px;line-height:1.5;
  color:var(--body)}
.contactgegevens a{display:block;color:var(--red)}
.contactgegevens a:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px}

@media (max-width:760px){
  .contactblok{padding:56px 0 60px}
  .contactblok h2{font-size:22px}
  .contactblok>.wrap>p{font-size:16px}
  .contactgegevens{grid-template-columns:1fr;gap:28px;margin-top:34px;padding-bottom:56px}
  .contactgegevens h2{font-size:19px}
  .contactgegevens p,.contactgegevens a{font-size:16px}
}

/* ================================================================ juridisch
   Lange leestekst (privacyverklaring, cookiebeleid). Zelfde tokens als de
   rest, maar regelhoogte 1,6 in plaats van 1,2: 1,2 is gemaakt voor korte
   blokken en maakt een pagina van deze lengte onleesbaar. */
.juridisch{padding:64px 0 0;max-width:860px}
.juridisch>p:first-child{font-size:16px;color:var(--body)}
.juridisch h2{margin:56px 0 0;font-size:22.046px;line-height:1.3;color:var(--maroon)}
.juridisch h3{margin:32px 0 0;font-family:'Inter',system-ui,sans-serif;font-weight:700;
  font-size:20px;line-height:1.4;color:var(--ink)}
.juridisch p{margin-top:18px;font-size:18px;line-height:1.6;color:var(--body)}
.juridisch a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.juridisch ul{margin-top:18px;list-style:none}
.juridisch p,.juridisch li,.juridisch-inhoud a,.paginakop h1{overflow-wrap:break-word}
.juridisch li{position:relative;padding-left:22px;margin-top:10px;
  font-size:18px;line-height:1.6;color:var(--body)}
.juridisch li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;
  background:var(--red)}
.juridisch strong{color:var(--ink);font-weight:700}

/* inhoudsopgave bovenaan */
.juridisch-inhoud{margin-top:34px;padding:26px 30px;background:var(--wash);
  border-radius:var(--radius)}
.juridisch-inhoud h2{margin:0 0 4px;font-family:'Inter',system-ui,sans-serif;
  font-weight:700;font-size:18px;color:var(--ink)}
.juridisch-inhoud ol{margin:10px 0 0;padding-left:22px;font-size:18px;line-height:1.6}
.juridisch-inhoud li{padding-left:0;margin-top:4px}
.juridisch-inhoud li::before{display:none}

/* tabel met cookies, moet op smalle schermen zelf kunnen schuiven */
.juridisch-tabel{margin-top:20px;overflow-x:auto}
.juridisch-tabel table{width:100%;min-width:560px;border-collapse:collapse;
  font-size:16px;line-height:1.5}
.juridisch-tabel th,.juridisch-tabel td{padding:12px 14px;text-align:left;
  border-bottom:1px solid #E2DEDE;vertical-align:top}
.juridisch-tabel th{font-weight:700;color:var(--ink);background:var(--wash);white-space:nowrap}
.juridisch-tabel td{color:var(--body)}
.juridisch-tabel code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;color:var(--maroon)}

.juridisch-slot{padding-bottom:180px}

@media (max-width:760px){
  .juridisch{padding-top:40px}
  .juridisch h2{margin-top:40px;font-size:19px}
  .juridisch h3{font-size:17px}
  .juridisch p,.juridisch li,.juridisch-inhoud ol{font-size:16px}
  .juridisch-inhoud{padding:20px 22px}
  .juridisch-slot{padding-bottom:90px}
}

/* maroon variant van de over-ons-band */
.about--dark{background:var(--maroon);color:#fff}
/* rode scheidingslijn 920px in de band, want band en footer zijn beide maroon */
.about--dark::after{content:"";position:absolute;left:0;right:0;top:920px;height:1px;
  background:var(--red);z-index:2}
.about--dark .about-body h2,.about--dark .about-body p{color:#fff}
.about--dark .about-deco{display:none}
.about--dark+.site-foot .foot-top{padding-top:0}
.about-slot{padding-bottom:268px}

/* ---------------------------------------------------------- voetlinks
   Drie juridische links plus "made by" op één regel houden vraagt drie
   trappen. De getallen komen uit een meting van de echte tekstbreedtes op de
   live site, niet uit een schatting:
     1440px  alles op één regel op de volle grootte
      980px  511px tekst in 866px, past ruim op 15px
      768px  op 17,585px was het 678px in 679px, dus viel het uiteen
      760px  drie links op één regel, "made by" eronder
      360px  299px links in 318px (nieuwe opmaak) of 300px (oude), dus 12px
   De tussenruimte schaalt mee met het venster, want op 360px is er maar 19px
   over voor twee tussenruimtes. */
@media (min-width:761px) and (max-width:980px){
  .foot-bottom{gap:18px}
  .foot-bottom,.foot-bottom *{font-size:15px}
  .foot-bottom nav{gap:18px}
}
@media (max-width:400px){
  .foot-bottom,.foot-bottom *{font-size:12px}
}

/* ------------------------------------------------------- aanraakvlakken
   Gemeten op 390px: de voetlinks waren 21px hoog en het vinkje op de
   contactpagina 13x13. Dat is te klein voor een duim. Inline links in lopende
   tekst blijven zoals ze zijn: die kan je niet vergroten zonder de regelval te
   breken, en de richtlijn maakt daar ook een uitzondering voor. */
@media (max-width:760px){
  .foot-cols li+li{margin-top:0}
  .foot-cols li{padding:6px 0}
  .foot-cols li:has(a){padding:0}
  .foot-cols a{display:inline-block;padding:6px 0}
  .foot-bottom a,.foot-bottom button{padding:6px 0}
  /* telefoon, mail en de vacaturelink zijn de hoofdacties op een
     contactpagina, dus die mogen geen regel van 24px zijn */
  .contactgegevens a{padding:6px 0}
  .kruimel a,.kruimel li{padding:5px 0}
}