/* ============================================================
   merk.css — de huisstijl van de vanger-merken, toegepast op roal.nl
   Geladen NA de inline stylesheet van elke pagina, dus deze wint.
   Tokens komen letterlijk uit vetvanger.nl en olievanger.nl.
   ============================================================ */

@font-face{
  font-family:"Nunito";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("nunito.woff2") format("woff2");
}

:root{
  /* familietokens */
  --navy:#002060;
  --navy-80:rgba(0,32,96,.8);
  --blauw:#0077c8;
  --blauw-donker:#005c9a;
  --goud:#f5b000;
  --lichtgrijs:#e6e9ee;
  --grijs-bg:#f4f6f9;
  --tekst:#16283c;
  --tekst-zacht:#4a5a6b;
  --radius:.75rem;
  --schaduw:0 8px 30px rgba(13,27,42,.08);
  --schaduw-zwaar:0 16px 48px rgba(13,27,42,.16);
  --font-kop:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* de bestaande tokens van roal.nl omgezet naar de familie */
  --orange:#0077c8;        /* accent, links, iconen */
  --orange-dark:#005c9a;
  --charcoal:#002060;      /* donkere vlakken */
  --cream:#f4f6f9;         /* rustig vlak */
  --black:#16283c;
  --grey:#4a5a6b;
  --border:#e6e9ee;
  --white:#ffffff;
}

h1,h2,h3,h4,.stat-num,.hero h1{
  font-family:var(--font-kop);
  letter-spacing:-.015em;
}

/* de primaire knop wordt goud met navy tekst, precies als op de vangers */
.btn-primary,.btn-nav,.btn-tool{
  background:var(--goud)!important;
  color:var(--navy)!important;
  font-weight:700;
  border-radius:.55rem;
  box-shadow:0 4px 14px rgba(245,176,0,.35);
  border:none;
}
.btn-primary:hover,.btn-nav:hover,.btn-tool:hover{
  background:#e0a100!important;
  color:var(--navy)!important;
  box-shadow:0 8px 20px rgba(245,176,0,.42);
  transform:translateY(-2px);
}

/* ============================================================
   Blokken van de nieuwe homepage
   ============================================================ */

.m-hero{position:relative;overflow:hidden;background:var(--navy);color:#fff}
.m-hero .m-bg{position:absolute;inset:0;background-size:cover;background-position:center 62%;opacity:.3}
.m-hero .m-veil{position:absolute;inset:0;background:linear-gradient(103deg,rgba(0,32,96,.97) 0%,rgba(0,32,96,.9) 46%,rgba(0,32,96,.55) 100%)}
.m-hero .container{position:relative;padding-top:88px;padding-bottom:72px}
.m-hero h1{color:#fff;max-width:15ch;font-size:clamp(2rem,4.4vw,3.3rem);font-weight:800;line-height:1.15;margin:0}
.m-hero .m-sub{max-width:60ch;font-size:clamp(1.05rem,1.5vw,1.22rem);color:#cfdcee;margin:24px 0 34px;line-height:1.6}
.m-hero .m-sub b{color:#fff;font-weight:700}
.m-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-kop);font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--goud);margin-bottom:20px}
.m-eyebrow::before{content:"";width:27px;height:2px;background:var(--goud)}
.m-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.m-ghost{display:inline-flex;align-items:center;gap:9px;padding:16px 28px;border-radius:.55rem;font-weight:700;font-size:16px;color:#fff;border:2px solid rgba(255,255,255,.55);text-decoration:none;transition:background .15s}
.m-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.m-marks{display:flex;flex-wrap:wrap;align-items:center;gap:36px;margin-top:52px;padding-top:28px;border-top:1px solid rgba(255,255,255,.18)}
.m-marks .m-lbl{font-family:var(--font-kop);font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#9fc0e6;width:100%;margin-bottom:-6px}
.m-marks img{height:32px;width:auto;filter:brightness(0) invert(1);opacity:.9}

.m-kicker{font-family:var(--font-kop);font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#ed6b3b;margin-bottom:13px}
.m-band-navy .m-kicker{color:var(--goud)}
.m-head{max-width:64ch;margin-bottom:42px}
.m-head h2{margin:0;font-size:clamp(1.6rem,3vw,2.35rem);font-weight:800;color:var(--navy);line-height:1.18}
.m-head p{color:var(--tekst-zacht);font-size:1.08rem;margin:16px 0 0;line-height:1.65}
.m-band-navy{background:var(--navy);color:#fff;padding:84px 0}
.m-band-navy h2,.m-band-navy h3{color:#fff}
.m-band-navy .m-head p{color:#bcd0e8}
.m-band-grijs{background:var(--grijs-bg);padding:84px 0}
.m-sectie{padding:84px 0}

/* merkenmuur */
.m-merken{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.m-merk{background:#fff;border:1px solid var(--lichtgrijs);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}
a.m-merk:hover{transform:translateY(-3px);box-shadow:var(--schaduw-zwaar)}
.m-merk .m-shot{height:176px;background-size:cover;background-position:center;position:relative}
.m-merk .m-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,32,96,.3),transparent 55%)}
.m-merk .m-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.m-merk .m-body img{height:35px;width:auto;margin-bottom:14px;align-self:flex-start}
.m-merk .m-txtmark{font-family:var(--font-kop);font-size:1.55rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:14px;line-height:1}
.m-merk .m-txtmark i{font-style:normal;color:var(--blauw)}
.m-merk p{font-size:.97rem;color:var(--tekst-zacht);margin:0 0 16px;line-height:1.6}
.m-merk .m-go{margin-top:auto;font-weight:700;font-size:.97rem;color:var(--blauw);display:inline-flex;align-items:center;gap:8px}
.m-merk:hover .m-go span{transform:translateX(4px);display:inline-block;transition:transform .16s}
.m-tag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:.35rem;background:#e8f1fb;color:var(--navy);margin-bottom:12px;align-self:flex-start}
.m-tag.m-soon{background:#fdf3e0;color:#8a6100}
.m-komt{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:18px 22px;border:1px dashed var(--lichtgrijs);border-radius:var(--radius);background:var(--grijs-bg)}
.m-komt .m-lbl2{font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--tekst-zacht)}
.m-komt .m-dom{font-family:var(--font-kop);font-weight:800;color:var(--navy);font-size:1.02rem}
.m-komt .m-uit{font-size:.93rem;color:var(--tekst-zacht);margin-left:auto}

/* facturatie */
.m-factuur{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
.m-lead{font-size:1.15rem;color:var(--tekst-zacht);margin:16px 0 18px;line-height:1.6}
.m-bon{background:#fff;border:1px solid var(--lichtgrijs);border-radius:var(--radius);padding:28px 30px;box-shadow:var(--schaduw-zwaar)}
.m-bon .m-bon-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:1px solid var(--lichtgrijs);padding-bottom:16px;margin-bottom:16px}
.m-bon .m-bon-top img{height:38px}
.m-bon .m-bon-who{text-align:right;font-size:.8rem;color:var(--tekst-zacht);line-height:1.55}
.m-bon .m-r{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed var(--lichtgrijs);font-size:.92rem;color:var(--tekst-zacht)}
.m-bon .m-r b{color:var(--tekst);font-weight:700;text-align:right}
.m-bon .m-note{margin-top:18px;font-size:.86rem;color:var(--tekst-zacht);background:var(--grijs-bg);border-radius:.55rem;padding:14px 16px;line-height:1.6}
.m-bon .m-note b{color:var(--navy)}
.m-feiten{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--lichtgrijs);border:1px solid var(--lichtgrijs);border-radius:var(--radius);overflow:hidden;margin-top:28px}
.m-feit{background:#fff;padding:19px 18px}
.m-feit .m-l{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tekst-zacht);margin-bottom:6px}
.m-feit .m-v{font-family:var(--font-kop);font-size:1rem;font-weight:800;color:var(--navy);line-height:1.4}

/* stappen */
.m-stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.m-stap{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);padding:24px 22px}
.m-stap .m-n{font-family:var(--font-kop);font-size:.8rem;font-weight:800;color:var(--goud);letter-spacing:.1em;margin-bottom:11px}
.m-stap h3{margin:0 0 8px;font-size:1.15rem;font-weight:700;color:#fff}
.m-stap p{color:#bcd0e8;font-size:.95rem;margin:0;line-height:1.6}

/* roger */
.m-roger{display:grid;grid-template-columns:.75fr 1.25fr;gap:54px;align-items:center}
.m-roger .m-portret{border-radius:var(--radius);overflow:hidden;border:1px solid var(--lichtgrijs);box-shadow:var(--schaduw)}
.m-roger .m-portret img{width:100%;display:block}
.m-quote{font-family:var(--font-kop);margin:0 0 22px;padding-left:21px;border-left:3px solid var(--goud);font-size:1.3rem;font-weight:700;line-height:1.45;color:var(--navy)}
.m-knop-blauw{display:inline-flex;align-items:center;gap:9px;background:#e8f1fb;color:var(--navy);border:1px solid rgba(13,27,42,.14);font-weight:700;padding:15px 26px;border-radius:.55rem;text-decoration:none;transition:box-shadow .15s,transform .15s}
.m-knop-blauw:hover{box-shadow:var(--schaduw);transform:translateY(-2px);color:var(--navy)}

/* bouwsectie met schermen */
.m-bouw{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.m-chips{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 26px}
.m-chip{font-size:.85rem;font-weight:600;padding:7px 14px;border-radius:999px;background:#e8f1fb;color:var(--navy);text-decoration:none}
a.m-chip:hover{background:#d8e8f8;color:var(--navy)}
.m-schermen{position:relative;height:370px}
.m-scherm{position:absolute;width:78%;background:#fff;border:1px solid var(--lichtgrijs);border-radius:.7rem;overflow:hidden;box-shadow:var(--schaduw-zwaar)}
.m-scherm.m-s1{top:0;left:0;z-index:1}
.m-scherm.m-s2{top:78px;left:11%;z-index:2}
.m-scherm.m-s3{top:156px;left:22%;z-index:3}
.m-chrome{display:flex;align-items:center;gap:6px;background:#eef1f5;padding:8px 11px;border-bottom:1px solid var(--lichtgrijs)}
.m-chrome i{width:8px;height:8px;border-radius:50%;background:#cfd6de;display:block}
.m-chrome .m-url{margin-left:10px;background:#fff;border-radius:999px;padding:3px 11px;font-size:.68rem;color:var(--tekst-zacht);border:1px solid var(--lichtgrijs);white-space:nowrap;overflow:hidden}
.m-doek{padding:16px 18px 19px}
.m-doek img{height:24px;width:auto;display:block;margin-bottom:13px}
.m-doek .m-balk{height:10px;border-radius:999px;background:#e3e9f1;margin-bottom:7px}
.m-doek .m-balk.m-kort{width:58%}
.m-doek .m-knopje{display:inline-block;margin-top:12px;background:var(--goud);color:var(--navy);font-weight:700;font-size:.72rem;padding:6px 13px;border-radius:.4rem}

/* slot */
.m-slot{background:var(--navy);color:#fff;border-radius:var(--radius);padding:56px 48px;text-align:center}
.m-slot h2{color:#fff;margin:0 0 16px;font-size:clamp(1.6rem,3vw,2.35rem);font-weight:800}
.m-slot p{color:#bcd0e8;max-width:54ch;margin:0 auto 28px;line-height:1.65}
.m-slot .m-cta{justify-content:center}

@media(max-width:940px){
  .m-merken{grid-template-columns:1fr}
  .m-factuur,.m-roger,.m-bouw{grid-template-columns:1fr;gap:34px}
  .m-stappen{grid-template-columns:repeat(2,1fr)}
  .m-feiten{grid-template-columns:repeat(2,1fr)}
  .m-schermen{height:320px}
  .m-komt .m-uit{margin-left:0;width:100%}
}
@media(max-width:560px){
  .m-stappen{grid-template-columns:1fr}
  .m-slot{padding:40px 22px}
  .m-hero .container{padding-top:56px;padding-bottom:52px}
}

/* sectoren waar Roger geweest is */
.m-sectoren{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.m-sectoren span{font-size:.83rem;font-weight:600;color:var(--tekst-zacht);background:var(--grijs-bg);border:1px solid var(--lichtgrijs);padding:6px 12px;border-radius:999px}

/* dienstenstrip in de navy band */
.m-diensten{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.15)}
.m-diensten .m-d-lbl{font-family:var(--font-kop);font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--goud);width:100%;margin-bottom:2px}
.m-diensten span:not(.m-d-lbl){font-size:.88rem;font-weight:600;color:#dbe6f4;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:7px 14px;border-radius:999px}

/* twee gelijkwaardige deuren onder de hero */
.m-deuren-sec{padding:64px 0 12px}
.m-deuren{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.m-deur{display:flex;flex-direction:column;padding:32px 34px 30px;border-radius:var(--radius);text-decoration:none;border:1px solid var(--lichtgrijs);transition:transform .16s ease,box-shadow .16s ease}
.m-deur:hover{transform:translateY(-3px);box-shadow:var(--schaduw-zwaar)}
.m-deur h2{font-size:1.45rem;font-weight:800;line-height:1.25;margin:0 0 12px;color:var(--navy)}
.m-deur p{font-size:.99rem;color:var(--tekst-zacht);margin:0 0 18px;line-height:1.6}
.m-deur-lbl{font-family:var(--font-kop);font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-bottom:12px}
.m-deur-go{margin-top:auto;font-weight:700;font-size:.99rem;display:inline-flex;align-items:center;gap:8px}
.m-deur-go span{transition:transform .16s}
.m-deur:hover .m-deur-go span{transform:translateX(4px)}
.m-deur-water{background:linear-gradient(160deg,#eef4fb 0%,#f7fafd 100%)}
.m-deur-water .m-deur-lbl,.m-deur-water .m-deur-go{color:var(--blauw)}
.m-deur-ai{background:linear-gradient(160deg,#fdf1ea 0%,#fdf8f5 100%);border-color:#f3ddd0}
.m-deur-ai .m-deur-lbl,.m-deur-ai .m-deur-go{color:#c9531f}

/* dienstenkaarten in het AI-blok */
.m-werk{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.m-werk-kaart{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--lichtgrijs);border-radius:var(--radius);padding:20px 22px;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}
.m-werk-kaart:hover{transform:translateY(-3px);box-shadow:var(--schaduw)}
.m-werk-kaart strong{font-family:var(--font-kop);font-size:1.05rem;font-weight:800;color:var(--navy)}
.m-werk-kaart span{font-size:.92rem;color:var(--tekst-zacht);line-height:1.55}
@media(max-width:940px){.m-deuren{grid-template-columns:1fr}.m-werk{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.m-werk{grid-template-columns:1fr}}

/* hero met beeldmozaiek */
.m-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.m-hero-grid .m-marks{margin-top:40px;padding-top:24px}
.m-hero-beeld{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:26rem}
.m-hero-beeld figure{margin:0;position:relative;border-radius:var(--radius);background-size:cover;background-position:center;overflow:hidden;box-shadow:0 18px 44px rgba(0,10,30,.4)}
.m-hero-beeld figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,32,96,.72),rgba(0,32,96,0) 55%)}
.m-hero-beeld figcaption{position:absolute;left:14px;bottom:11px;z-index:1;font-family:var(--font-kop);font-size:.78rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#fff}
.m-hero-beeld figure:nth-child(1){transform:translateY(-14px)}
.m-hero-beeld figure:nth-child(4){transform:translateY(14px)}
@media(max-width:1080px){.m-hero-grid{grid-template-columns:1fr;gap:38px}.m-hero-beeld{height:19rem}}
@media(max-width:560px){.m-hero-beeld{height:15rem;gap:10px}}

/* hero met beeldmozaiek */
.m-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.m-hero-grid .m-marks{margin-top:38px;padding-top:22px}
.m-hero-beeld{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:26rem}
.m-hero-beeld figure{margin:0;position:relative;border-radius:var(--radius);background-size:cover;background-position:center;overflow:hidden;box-shadow:0 18px 44px rgba(0,10,30,.45)}
.m-hero-beeld figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,32,96,.75),rgba(0,32,96,0) 58%)}
.m-hero-beeld figcaption{position:absolute;left:14px;bottom:11px;z-index:1;font-family:var(--font-kop);font-size:.78rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#fff}
.m-hero-beeld figure:nth-child(1){transform:translateY(-14px)}
.m-hero-beeld figure:nth-child(4){transform:translateY(14px)}
@media(max-width:1080px){.m-hero-grid{grid-template-columns:1fr;gap:34px}.m-hero-beeld{height:18rem}}
@media(max-width:560px){.m-hero-beeld{height:14rem;gap:10px}}

/* galerij met voorbeelden */
.m-galerij{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;padding:0 1.5rem;max-width:100rem;margin:0 auto}
.m-galerij figure{margin:0;position:relative;aspect-ratio:4/3;border-radius:.6rem;overflow:hidden;background-size:cover;background-position:center;transition:transform .18s ease}
.m-galerij figure:hover{transform:scale(1.04);z-index:2;box-shadow:var(--schaduw-zwaar)}
.m-galerij figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,32,96,.78),rgba(0,32,96,0) 60%)}
.m-galerij figcaption{position:absolute;left:10px;bottom:8px;z-index:1;font-family:var(--font-kop);font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#fff}
@media(max-width:1200px){.m-galerij{grid-template-columns:repeat(4,1fr)}}
@media(max-width:640px){.m-galerij{grid-template-columns:repeat(2,1fr)}}

/* demo van de bestek-tool, merkloos */
.m-demo{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center;margin-top:48px;padding-top:44px;border-top:1px solid var(--lichtgrijs)}
.m-demo-tekst h3{font-size:1.45rem;font-weight:800;color:var(--navy);margin:0 0 12px;line-height:1.25}
.m-demo-tekst p{font-size:.99rem;color:var(--tekst-zacht);line-height:1.6;margin:0 0 12px}
.m-demo-ui{background:#fff;border:1px solid var(--lichtgrijs);border-radius:.7rem;overflow:hidden;box-shadow:var(--schaduw-zwaar)}
.m-demo-body{display:grid;grid-template-columns:1fr 1fr;gap:0}
.m-demo-kol{padding:16px 18px}
.m-demo-kol+.m-demo-kol{border-left:1px solid var(--lichtgrijs);background:var(--grijs-bg)}
.m-demo-kop{font-family:var(--font-kop);font-size:.7rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--tekst-zacht);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.m-tabs i{font-style:normal;font-size:.66rem;padding:3px 7px;border-radius:.3rem;border:1px solid var(--lichtgrijs);margin-left:4px;color:var(--tekst-zacht);background:#fff}
.m-tabs i.aan{background:var(--navy);color:#fff;border-color:var(--navy)}
.m-regel{padding:8px 0;border-bottom:1px dashed var(--lichtgrijs)}
.m-regel b{display:block;font-size:.86rem;color:var(--tekst);font-weight:700;margin-top:3px;line-height:1.35}
.m-regel small{font-size:.74rem;color:var(--tekst-zacht)}
.m-regel.m-uit{opacity:.55}
.m-pil{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:.3rem}
.m-pil-groen{background:#e6f4ea;color:#1e8449}
.m-pil-goud{background:#fdf3e0;color:#8a6100}
.m-pil-grijs{background:#eceff3;color:#6b7280}
.m-bestek{background:#fff;border:1px solid var(--lichtgrijs);border-radius:.5rem;padding:12px 14px;font-size:.78rem;line-height:1.55;color:var(--tekst-zacht);max-height:190px;overflow:hidden}
.m-bestek p{margin:0 0 8px}
.m-bestek b{color:var(--navy)}
.m-demo-knoppen{display:flex;gap:8px;margin-top:12px}
.m-knopje.m-licht{background:#e8f1fb;color:var(--navy)}
@media(max-width:1080px){.m-demo{grid-template-columns:1fr;gap:26px}}
@media(max-width:640px){.m-demo-body{grid-template-columns:1fr}.m-demo-kol+.m-demo-kol{border-left:none;border-top:1px solid var(--lichtgrijs)}}

/* klikbare beeldtegels, hero en galerij */
.m-tegel{position:relative;display:block;border-radius:var(--radius);background-size:cover;background-position:center;overflow:hidden;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.m-tegel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,32,96,.78),rgba(0,32,96,0) 58%);transition:background .18s}
.m-tegel:hover::after{background:linear-gradient(to top,rgba(0,32,96,.86),rgba(0,32,96,.12) 70%)}
.m-tegel>span{position:absolute;left:14px;bottom:11px;z-index:1;font-family:var(--font-kop);font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;display:inline-flex;align-items:center;gap:6px}
.m-tegel>span::after{content:"\2192";opacity:0;transform:translateX(-4px);transition:.18s}
.m-tegel:hover>span::after{opacity:1;transform:translateX(0)}
.m-hero-beeld .m-tegel{box-shadow:0 18px 44px rgba(0,10,30,.45)}
.m-hero-beeld .m-tegel:hover{transform:translateY(-4px)}
.m-hero-beeld .m-tegel:nth-child(1){transform:translateY(-14px)}
.m-hero-beeld .m-tegel:nth-child(4){transform:translateY(14px)}
.m-hero-beeld .m-tegel:nth-child(1):hover{transform:translateY(-18px)}
.m-hero-beeld .m-tegel:nth-child(4):hover{transform:translateY(10px)}
.m-galerij .m-tegel{aspect-ratio:4/3;border-radius:.6rem}
.m-galerij .m-tegel:hover{transform:scale(1.05);z-index:2;box-shadow:var(--schaduw-zwaar)}
.m-galerij .m-tegel>span{left:10px;bottom:8px;font-size:.7rem;letter-spacing:.06em}

/* portret netjes passend, niet uitgerekt */
.m-roger .m-portret{aspect-ratio:4/5;display:flex;align-items:flex-end;justify-content:center;padding:22px 14px 0;overflow:hidden;background:linear-gradient(165deg,#e8f1fb 0%,#f4f6f9 58%,#dde8f5 100%)}
.m-roger .m-portret img{width:auto;max-width:100%;max-height:100%;height:auto;display:block;object-fit:contain}

/* drie vakgebieden naast elkaar */
.m-deuren.m-drie{grid-template-columns:repeat(3,1fr)}
.m-deuren.m-drie .m-deur{padding:28px 26px 26px}
.m-deuren.m-drie .m-deur h2{font-size:1.24rem}
.m-deuren.m-drie .m-deur p{font-size:.94rem}
.m-deur-web{background:linear-gradient(160deg,#eef7f1 0%,#f8fbf9 100%);border-color:#d8e9de}
.m-deur-web .m-deur-lbl,.m-deur-web .m-deur-go{color:#2e7d4f}
@media(max-width:1080px){.m-deuren.m-drie{grid-template-columns:1fr}}