/* ==========================================================================
   Cammaert EVR BV  ·  statische site
   Alle waarden zijn opgemeten op de bestaande site (site34.vicaragency.com)
   met de browser, niet geschat. Zie README voor de meetmethode.
   ========================================================================== */

:root{
  --measure:860px;
  --maroon:#500C0C;      /* footer, dienstkoppen, primaire knop op de hero */
  --red:#D80C0C;         /* knoppen, projectnamen, logo */
  --ink:#000;            /* sectiekoppen */
  --body:#686868;        /* lopende tekst */
  --wash:#F9F9F9;        /* lichte sectie */
  --meta-label:#676767;
  --meta-value:#909090;
  --line:rgba(80,12,12,.55);
  --container:1272px;   /* was 1250 (site34); Figma is 1272, en met twee breedtes
                          verschoof alle inhoud 11px bij het doorklikken */
  --radius:10px;
  --skew:-8deg;
  --nav-top:72px;
  --nav-h:219px;   /* 147 balk + 72 ruimte erboven, gelijk aan de Figma-paginas */
}

*,*::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:300;line-height:26px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:'Boldonse Regular',Impact,system-ui,sans-serif;font-weight:400}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0}
/* zelfde regel als op de Figma-pagina's: onder 1440 wordt de container vloeiend
   met een marge van 5,8vw. Met een vaste 30px onder 1310 sprong de inhoud tussen
   de twee groepen pagina's 40px op bij een venster van 1280. */
@media (max-width:1439px){.wrap{max-width:100%;padding:0 clamp(20px,5.8vw,84px)}}
.skip{position:absolute;left:-9999px;top:0;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
   Identiek aan de kop van de Figma-pagina's (assets/v2/style.css). Stond hier
   eerst anders: balk 102px hoog op y=72, logo 34x44, woordmerk Boldonse 26px en
   het menu op x=503. Op de Figma-pagina's is dat 97px op y=71, logo 71x90,
   woordmerk Montserrat 34,875px en het menu op x=597. Daardoor versprong de
   hele kop bij elke stap tussen de twee groepen pagina's. Deze regels zijn de
   Figma-waarden; verdwijnen zodra elke pagina op assets/v2/ zit. */
.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))}
.site-head--licht .head-bar::before{background-image:url(/assets/v2/img/headerbar-licht.svg)}
.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;gap:0}
.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}
.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)}

/* ---------------------------------------------------------------- knoppen */
.btn{position:relative;display:inline-block;padding:13px 26px;
  font-family:'Inter',sans-serif;font-size:16px;font-weight:600;line-height:1;
  color:#fff;transform:skew(var(--skew));transition:filter .15s,transform .15s}
.btn>span{display:block;transform:skew(calc(var(--skew) * -1))}
.btn--red{background:var(--red)}
.btn--maroon{background:var(--maroon)}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:skew(var(--skew)) translateY(1px)}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;min-height:900px;display:flex;align-items:center;
  padding:var(--nav-h) 0 60px;background:#3a3a3a center/cover no-repeat;color:#fff}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.06) 58%,transparent 100%)}
.hero .wrap{position:relative;z-index:2}
.hero-inner{max-width:760px}
.rating{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.rating-stars{color:#F5A623;font-size:15px;letter-spacing:2px}
.hero .rating h2,.hero .rating p{font-family:'Inter',sans-serif;font-size:15px;
  font-weight:300;line-height:19.5px;color:#fff;margin:0}
.hero h1{font-size:34px;line-height:61.2px;letter-spacing:.2px;color:#fff;
  margin:0 0 14px;max-width:750px}
.hero p{font-size:20px;font-weight:300;line-height:26px;color:#fff;max-width:560px;
  margin:0 0 30px}

/* ---------------------------------------------------------------- secties */
.section{padding:120px 0}
/* De sectie die meteen na het kruimelpad komt, moet dezelfde afstand houden als
   .paginakop op de Figma-pagina's (80px). Met de standaard 120px stond de
   paginatitel daar 40px lager en versprong de titel bij het doorklikken. */
.crumbs+.section{padding-top:80px}
.section--wash{background:var(--wash)}
.section-head{margin:0 0 84px}
.section-head p{max-width:560px}
.section-head--wide p{max-width:1250px}
.section-head--roomy p{max-width:715px}
.section-head--wide .btn{margin-top:26px}
.section-head--center{text-align:center;margin:0 0 64px}
.section-head.section-head--center p{max-width:560px;margin:0 auto}
.section-head--center .btn{margin-top:26px}
.section-head h2,.section-title{font-size:32px;line-height:41.6px;color:var(--ink);
  margin:0 0 12px}
.section-head p{font-size:20px;font-weight:300;line-height:26px;color:var(--body);margin:0}

/* ---------------------------------------------------------------- diensten */
.services{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.service{border:1px solid var(--line);border-radius:var(--radius);
  min-height:260px;display:flex;flex-direction:column;align-items:stretch;
  justify-content:center;gap:18px;padding:46px 20px;text-align:center;
  transition:box-shadow .18s,transform .18s}
.service:hover{box-shadow:0 10px 30px rgba(80,12,12,.10);transform:translateY(-2px)}
.service h2,.service h3{font-size:32px;line-height:41.6px;color:var(--maroon)}
.service .btn{align-self:center}

/* diensten-detail: afwisselend beeld links/rechts */
.split{display:grid;grid-template-columns:1fr 483px;gap:80px;align-items:center;
  padding:66px 0}
.split--flip .split-media{order:2}
.split-media img{border-radius:var(--radius);width:100%}
.split-body h2{font-size:32px;line-height:41.6px;color:var(--ink);margin:0 0 16px}
.split-body p{font-size:20px;font-weight:300;line-height:26px;color:var(--body)}

/* ---------------------------------------------------------------- projecten */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}
/* projectoverzicht: beeld links, tekst verticaal gecentreerd ernaast.
   De 1fr-rijen boven en onder het tekstblok doen het centreren. */
.projects--two{grid-template-columns:1fr;gap:70px}
.projects--two img{aspect-ratio:605/545}
.projects--two .project{display:grid;grid-template-columns:605px minmax(0,1fr);
  column-gap:60px;grid-template-rows:1fr auto auto auto 1fr;align-items:start}
.projects--two .project>a:first-child{grid-column:1;grid-row:1/-1}
.projects--two .project>.project-meta{grid-column:2;grid-row:2;margin:0 0 8px}
.projects--two .project>p{grid-column:2;grid-row:3;margin:0 0 28px;max-width:52ch}
.projects--two .project>.btn{grid-column:2;grid-row:4;justify-self:start}
/* Hoorde bij de Figma-kop en had ik niet meegekopieerd: zonder dit blijft het
   menu op left:513px staan en loopt het onder 1360px buiten het venster. */
@media (max-width:1360px){
  .head-bar{width:auto}
  .logo{left:40px}
  .nav{left:auto;right:26px}
}

/* Zelfde verhaal als in assets/v2/style.css: het menu staat op een vaste x en
   vanaf 987px en smaller loopt het over het woordmerk. De compacte kop begint
   daarom op 1060px. --nav-h gaat mee, want de kruimel en de paginahero rekenen
   met de hoogte van de balk. */
@media (max-width:1060px){
  :root{--nav-top:22px;--nav-h:126px}
  /* Hoorde bij de Figma-kop en was hier niet meegekopieerd: zonder deze regel
     bleef de balk op de bureaubladhoogte van 71px staan, terwijl --nav-h en
     .crumbs op 22px gerekend zijn. De balk kwam daardoor bovenop het
     kruimelpad. Gelijk aan assets/v2/style.css. */
  .site-head{top:22px}
  .head-bar{height:64px;max-width:calc(100% - 32px)}
  /* de balk zweeft hier van de bovenrand met marge links en rechts, dus is het
     een kaart: alle vier de hoeken rond */
  .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}
  /* staat het menu open, dan hangt het uitklapvlak eronder: 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}
  .head-inner{height:64px;padding:0}
  /* stond op -9px, waardoor het manneke 9px boven de balk uitstak en er
     onderin 15px leeg bleef. De balk is 64px en het manneke 58px, dus 3px
     centreert het, net zoals top:4px dat doet in de balk van 97px. */
  .logo{left:20px;top:3px}
  .logo img{width:46px;height:58px}
  .logo span{font-size:24px}
  .burger{display:block;top:14px}
  .nav{position:absolute;top:100%;left:0;right:0;background:#fff;
    border-radius:0 0 var(--radius) var(--radius);box-shadow:0 16px 34px rgba(0,0,0,.16);
    display:none;padding:10px 20px 18px}
  .nav[data-open="true"]{display:block}
  /* align-items:center staat in de basisregel van .nav ul en blijft gelden als
     de richting op kolom gaat: daardoor stonden de menu-items hier gecentreerd
     en op de Figma-pagina's links. Zelfde waarden als assets/v2/style.css. */
  .nav ul{flex-direction:column;align-items:flex-start;gap:0}
  .nav a,.nav li:first-child a{display:block;padding:12px 0;font-size:18px}
}

@media (max-width:1100px){
  .projects--two .project{grid-template-columns:1fr;grid-template-rows:auto;column-gap:0}
  .projects--two .project>a:first-child{grid-column:1;grid-row:auto}
  .projects--two .project>.project-meta{grid-column:1;grid-row:auto;margin:18px 0 8px}
  .projects--two .project>p{grid-column:1;grid-row:auto}
  .projects--two .project>.btn{grid-column:1;grid-row:auto}
}
.project img{border-radius:var(--radius);width:100%;aspect-ratio:406/366;object-fit:cover}
.project-meta{display:flex;align-items:baseline;gap:12px;margin:18px 0 8px}
.project-name{font-family:'Boldonse Regular',Impact,sans-serif;font-size:20px;font-weight:400;
  line-height:33px;color:var(--red)}
/* het streepje tussen naam en plaats is een lijn, geen leesteken */
.project-sep{flex:0 0 14px;height:2px;background:var(--ink);opacity:.85}
.project-place{font-family:'Boldonse Regular',Impact,sans-serif;font-size:14px;font-weight:400;
  line-height:18.2px;color:var(--ink)}
.project p{font-size:20px;font-weight:300;line-height:28px;color:var(--body);margin:0 0 28px}

/* ---------------------------------------------------------------- cijfers */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* Sinds de klant twee cijfers liet vallen zijn het er vier: op één rij in plaats
   van drie plus een eenzame vierde op een tweede rij. */
.stats--vier{grid-template-columns:repeat(4,1fr)}
.stat{background:var(--maroon);border-radius:var(--radius);color:#fff;
  min-height:290px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;padding:40px 26px;text-align:center}
.stat-num{font-family:'Boldonse Regular',Impact,sans-serif;font-size:32px;line-height:41.6px}
.stat p{font-size:16px;font-weight:300;line-height:20px;color:rgba(255,255,255,.86);margin:0}

/* ---------------------------------------------------------------- projecthero */
/* projecthero: foto over de volle breedte met donkere overlay, rode diagonaal
   rechtsboven en de titel op een regel. Opgemeten op Figma-frame 244:565:
   foto 1440x1034, diagonaal identiek aan de homepage, titel op y 660. */
.phero{position:relative;height:1034px;overflow:hidden;color:#fff;isolation:isolate}
/* De stapelorde moet expliciet: een ::before geldt als eerste kind, dus de
   figuur die erna in de opmaak staat werd erover getekend en de verduistering
   deed helemaal niets. Gemeten op de TVH-hero: de achtergrond achter de tekst
   was even licht met als zonder overlay. */
.phero-figure{position:absolute;inset:0;margin:0;z-index:0}
.phero-figure img,.phero-video{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
/* De geluidloze video ligt over de herofoto, net als op de startpagina. Het
   beeld blijft daaronder staan als plaatshouder tot de eerste frames binnen
   zijn, en als terugval voor wie beweging liever uit heeft: dan verdwijnt de
   video en staat de foto er al. */
.phero-video{position:absolute;inset:0}
@media (prefers-reduced-motion:reduce){.phero-video{display:none}}
.phero::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.38)}
.phero::after{content:"";position:absolute;top:0;right:0;z-index:3;width:424px;height:541px;
  background:var(--red);clip-path:polygon(0 0,100% 0,100% 100%);pointer-events:none}
.phero>.wrap{position:relative;z-index:2;height:100%;display:flex;align-items:flex-end}
.phero-inner{max-width:820px;padding-bottom:119px}
.phero-titel{font-family:'Boldonse',Impact,sans-serif;font-weight:400;
  font-size:52px;line-height:1.15;margin:0}
.phero-titel .naam{color:var(--red)}
.phero-titel .plaats{color:#fff}
.phero p{font-size:20px;font-weight:300;line-height:26px;color:#fff;margin:30px 0 0;
  max-width:520px}
.phero .btn{margin-top:45px}


.pmeta{display:grid;grid-template-columns:repeat(5,auto);gap:34px 54px;
  justify-content:start;padding:56px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.pmeta dt{font-family:'Inter',sans-serif;font-size:24px;font-weight:600;line-height:31.2px;
  color:var(--meta-label)}
.pmeta dd{margin:0;font-size:22px;font-weight:300;line-height:28.6px;color:var(--meta-value)}

.pblock{padding:66px 0}
.pblock h2{font-size:32px;line-height:41.6px;color:var(--ink);margin:0 0 18px 81px}
.pblock p{font-size:20px;font-weight:300;line-height:28px;color:var(--body);
  margin-left:81px;max-width:959px}

/* ---------------------------------------------------------------- vacature */
.vacancy{padding:60px 0 0}
.vacancy-head{display:flex;align-items:center;justify-content:space-between;gap:30px;
  flex-wrap:wrap;padding-bottom:22px}
.vacancy-head h2{font-size:32px;line-height:41.6px;color:var(--ink);margin:0}
.vacancy-head .vtype{font-family:'Boldonse Regular',Impact,sans-serif;font-size:20px;
  color:var(--red);margin-left:6px}
.vacancy-body{border-top:1px solid rgba(0,0,0,.14);padding-top:26px}
.vacancy-body p{font-size:20px;font-weight:300;line-height:28px;color:var(--body)}

/* ---------------------------------------------------------------- kruimelpad */
/* zelfde typografie als .kruimel op de Figma-pagina's: die stond op gewicht 400
   en regelhoogte 1,2, hier op 300 met de regelhoogte van body (26px), waardoor
   de tekst 4px lager uitkwam bij dezelfde padding */
.crumbs{padding:calc(var(--nav-h) + 33px) 0 0;font-size:16px;font-weight:400;line-height:1.2}
.crumbs ol{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0}
.crumbs a{color:var(--body)}
.crumbs a:hover{color:var(--red)}
.crumbs [aria-current="page"]{color:var(--red)}
/* display:inline-block is nodig: zonder is het een inline doos en gelden breedte
   en hoogte niet, dus was het pijltje onzichtbaar */
.crumbs li+li::before{content:"";display:inline-block;vertical-align:middle;
  width:5px;height:8px;margin-right:10px;
  background:url(/assets/v2/img/kruimel-pijl.svg) center/contain no-repeat}

/* ------------------------------------------------- beeld tot de rand, smalle kolom
   Opgemeten: beeld 720px breed vanaf de viewportrand, tekstkolom 240px breed op
   x=800 (beeld links) of x=400 (beeld rechts). */
.bleed{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0}
.bleed-media{grid-column:1;grid-row:1}
.bleed-media img{width:100%;height:auto;display:block}
.bleed-body{grid-column:2;grid-row:1;width:min(480px,calc(100% - 60px));margin-left:60px;padding-top:8px}
.bleed--flip .bleed-media{grid-column:2;grid-row:1}
.bleed--flip .bleed-body{grid-column:1;grid-row:1;margin-left:180px}
.bleed-body h1,.bleed-body h2{font-size:32px;line-height:41.6px;color:var(--ink);
  margin:0 0 18px;text-wrap:balance}
.bleed-body p{font-size:20px;font-weight:300;line-height:26px;color:var(--body);
  margin:0 0 1em}
.bleed-body .btn{margin-top:10px}
.bleed-section{padding:70px 0 90px}

/* beeldrooster op projectdetail: 2:1-mozaiek over de volle containerbreedte, dat
   per rij van kant wisselt. Opgemeten op Figma-frame 244:565: kolommen 837 en 417
   met 18px ertussen, rijhoogte 541. Basis van drie gelijke kolommen; breed = twee. */
.pgallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  grid-auto-rows:541px;padding:20px 0 66px}
.pgallery>*{grid-column:span 1;margin:0}
.pgallery>*:nth-child(4n+1),.pgallery>*:nth-child(4n){grid-column:span 2}
.pgallery img{border-radius:var(--radius);width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){
  .pgallery{grid-template-columns:1fr;grid-auto-rows:auto;gap:16px;padding:12px 0 44px}
  .pgallery>*,.pgallery>*:nth-child(4n+1),.pgallery>*:nth-child(4n){grid-column:span 1}
  .pgallery img{aspect-ratio:835/541;height:auto}
  .pblock h2,.pblock p{margin-left:0}
}

/* ------------------------------------------------- fotomozaiek op Over ons
   Twee rijen van 472 + 943 en 943 + 472, gescheiden door 25px. */
.mosaic{display:grid;grid-template-columns:472fr 943fr;gap:25px;margin:0}
.mosaic--flip{grid-template-columns:943fr 472fr}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block}
.mosaic-wrap{display:flex;flex-direction:column;gap:25px;padding:20px 0 0}

/* ---------------------------------------------------------------- footer */
.site-foot{background:var(--maroon);color:#fff;padding:181px 0 0;margin-top:0}
/* zie de nota in assets/v2/style.css: drie kolommen op auto, samen gecentreerd */
.foot-cols{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;
  gap:0 96px;
  padding-bottom:70px}
.foot-cols h2{font-size:32px;line-height:41.6px;color:#fff;margin:0 0 22px}
.foot-cols li{font-size:18px;font-weight:300;line-height:29px;color:#fff;width:fit-content}
.foot-cols a{display:inline-block;font-size:18px;font-weight:300;line-height:29px;color:#fff}
.foot-cols a:hover{text-decoration:underline;text-underline-offset:3px}
/* Deze regel moet ná de basisregel staan: eerst stond ze in het blok voor 1360px
   dat hoger in het bestand zit, en dan wint de basisregel met gelijke
   specificiteit. Met de vaste 375+313 bleef er op 800px maar 20px over voor de
   socials, dus liepen Facebook en LinkedIn buiten het venster. */
/* zelfde reden als in assets/v2/style.css: de juridische kolom heeft geen kop,
   dus die krijgt de hoogte van kop plus marge als duw (32px op 41,6 plus 22). */
.foot-juridisch{padding-top:64px}
@media (max-width:1360px){
  .foot-cols{gap:0 clamp(32px,6vw,96px)}
}
/* zie de nota in assets/v2/style.css: de duw zit nu in .foot-juridisch */
.foot-legal{margin-top:0}
.foot-bottom{border-top:1px solid rgba(255,255,255,.16);padding:26px 0;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot-bottom,.foot-bottom *{font-size:18px;font-weight:300;line-height:29.7px;color:#fff}
/* drie items in plaats van twee sinds de juridische links erbij kwamen, dus
   moet dit kunnen wrappen: zonder wrap werd de pagina 430px breed op 390px */
.foot-bottom nav{display:flex;flex-wrap:wrap;gap:12px 19px}

/* ---------------------------------------------------------------- responsive
   Breekpunten en waarden overgenomen van de gemeten mobiele rendering (390px). */
@media (max-width:1100px){
  .split{grid-template-columns:1fr;gap:32px;padding:44px 0}
  .split--flip .split-media{order:0}
  .projects{grid-template-columns:1fr 1fr}
  .stats,.stats--vier{grid-template-columns:1fr 1fr}
  .pmeta{grid-template-columns:repeat(3,auto);gap:26px 40px}

}
@media (max-width:760px){
  body{font-size:16px;line-height:22.4px}

  .hero{min-height:0;padding:calc(var(--nav-h) + 56px) 0 64px}
  .hero-inner{max-width:none}
  .hero h1{font-size:20px;line-height:36px}
  .hero p{font-size:16px;line-height:20.8px}
  .rating h2,.rating p{font-size:12px;line-height:15.6px}

  .section{padding:56px 0}
  .section-head{margin-bottom:34px}
  .section-head h2,.section-title,.split-body h2,.pblock h2,.foot-cols h2,
  .service h2,.service h3,.vacancy h2{font-size:22px;line-height:28.6px}
  .section-head p,.split-body p{font-size:16px;line-height:20.8px}

  .services{grid-template-columns:1fr;gap:16px}
  .service{min-height:0;padding:34px 22px}
  .projects{grid-template-columns:1fr;gap:34px}
  .project p{font-size:16px;line-height:22.4px}
  .project-name{font-size:18px;line-height:29.7px}
  .project-place{font-size:12px;line-height:15.6px}

  .stats,.stats--vier{grid-template-columns:1fr;gap:16px}
  .stat{min-height:0;padding:34px 24px}
  .stat-num{font-size:22px;line-height:28.6px}

  /* De hero stond op height:auto met min-height, waardoor de wrap met
     height:100% geen hoogte kreeg en align-items:flex-end niets deed: de titel
     kwam bovenaan tegen de menubalk te staan met 91px lege foto eronder. De
     wrap krijgt nu zelf de minimumhoogte, dus onderaan uitlijnen werkt en de
     hero mag nog groeien als de tekst langer is. */
  .phero{height:auto;min-height:520px}
  .phero>.wrap{min-height:520px;height:auto}
  .phero-inner{padding:calc(var(--nav-h) + 20px) 0 40px}
  /* Gemeten op de TVH-hero: wit op deze foto gaf 2,2 tot 3,9 op 1, terwijl
     WCAG 4,5 vraagt voor lopende tekst en 3 voor grote koppen. De stops
     hieronder zijn daarop berekend: bij de tekst komt de doorschijnendheid op
     ongeveer 0,62 uit, wat een achtergrond van 97 geeft en dus 5,6 op 1. */
  .phero::before{background:linear-gradient(to top,rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.60) 35%,rgba(0,0,0,.42) 50%,rgba(0,0,0,.12) 100%)}
  .phero-titel,.phero p{text-shadow:0 1px 3px rgba(0,0,0,.45)}
  .phero-titel{font-size:30px;line-height:1.2}
  .phero p{font-size:16px;line-height:20.8px;margin-top:18px}
  .phero::after{width:210px;height:268px}
  .pmeta{grid-template-columns:1fr 1fr;gap:22px 26px;padding:36px 0}
  .pmeta dt{font-size:18px;line-height:24px}
  .pmeta dd{font-size:16px;line-height:22px}
  .pblock{padding:44px 0}
  .pblock p{font-size:16px;line-height:22.4px}

.bleed{grid-template-columns:1fr}
  .bleed-media,.bleed--flip .bleed-media{grid-column:1;grid-row:1}
  .bleed-body,.bleed--flip .bleed-body{grid-column:1;grid-row:1;grid-row:2;width:auto;
    margin-left:0;padding:26px 30px 0}
  .bleed-section{padding:34px 0 50px}
  .bleed-body h1,.bleed-body h2{font-size:22px;line-height:28.6px}
  .bleed-body p{font-size:16px;line-height:20.8px}
  .mosaic,.mosaic--flip{grid-template-columns:1fr;gap:14px}
  .mosaic-wrap{gap:14px}
  .projects--two{gap:34px}
  .vacancy{padding-top:34px}
  .vacancy-head{padding-bottom:16px}
  .vacancy-head h2{font-size:22px;line-height:28.6px}
  .vacancy-head .vtype{font-size:16px}
  .vacancy-body p{font-size:16px;line-height:22.4px}
  /* de balk zweeft op mobiel op 22px van de bovenrand met 16px marge links en
     rechts, dus is het een kaart en niet een balk die aan de bovenrand hangt:
     alle vier de hoeken rond, niet enkel de onderste twee */
  .head-bar{background:#fff;border-radius:var(--radius);
    box-shadow:0 6px 22px rgba(80,12,12,.16);height:auto}
  /* staat het menu open, dan hangt het uitklapvlak eronder: de balk geeft haar
     onderste twee rondingen af zodat de twee samen één kaart vormen */
  .head-bar:has(.nav[data-open="true"]){border-radius:var(--radius) var(--radius) 0 0}
  .head-bar::before{display:none}
  .head-inner{padding:0 0 0 22px;gap:0;height:64px}
  .site-foot{padding-top:60px}
  .foot-cols{grid-template-columns:1fr;justify-content:stretch;gap:34px;padding-bottom:44px}
  .foot-juridisch{padding-top:0}
  .foot-cols li,.foot-cols a{font-size:18px;line-height:29.7px}
  /* zie de nota in assets/v2/style.css: op 13px passen de drie juridische
     links op één regel, "made by" gaat eronder */
  .foot-bottom,.foot-bottom *{font-size:13px;line-height:1.6}
  .foot-bottom{gap:12px clamp(6px,2.3vw,10px)}
  .foot-bottom nav{gap:clamp(6px,2.3vw,10px)}
  .foot-bottom>span{flex-basis:100%}
  .crumbs{padding-top:118px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .service:hover{transform:none}
}

/* ---------------------------------------------------------- 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}
  /* de wrap van deze pagina's heeft 30px padding tegen 21px bij de
     Figma-pagina's; die 10px per zijde is precies wat de drie links
     hier tekort komen */
  .foot-bottom{margin-left:-10px;margin-right:-10px}
}

/* ------------------------------------------------------- aanraakvlakken
   Zie de nota in assets/v2/style.css: voetlinks van 30px naar een duimvriendelijke
   hoogte, inline links in lopende tekst blijven zoals ze zijn. */
@media (max-width:760px){
  .foot-cols li+li{margin-top:0}
  .foot-cols li{padding:4px 0}
  .foot-cols li:has(a){padding:0}
  .foot-cols a{display:inline-block;padding:4px 0}
  .foot-bottom a,.foot-bottom button{padding:6px 0}
  .crumbs a,.crumbs li{padding:5px 0}
}