/* Verenigd Ondernemers Fonds — stylesheet
   Kleuren afgeleid van het logo: amber #F28E01 naar vermiljoen #E95319 */

:root{
  --ink:#16130F;
  --steel:#242C31;
  --grey:#5C6469;
  --line:#DDDCD8;
  --paper:#FFFFFF;
  --shell:#EDEFEE;
  --amber:#F28E01;
  --verm:#E95319;
  --flame:linear-gradient(135deg,#F28E01 0%,#E95319 100%);

  --wrap:1180px;
  --gut:clamp(20px,5vw,64px);

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.65;
  font-feature-settings:"kern" 1;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* ---------- typografie ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.022em;line-height:1.08;margin:0}
h1{font-size:clamp(2.3rem,5.6vw,4.05rem);font-weight:800}
h2{font-size:clamp(1.65rem,3.3vw,2.5rem)}
h3{font-size:clamp(1.12rem,1.7vw,1.35rem);letter-spacing:-.01em}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.08rem,1.65vw,1.3rem);line-height:1.55;color:#39322C}
.eyebrow{
  font-family:var(--f-mono);font-size:.735rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--verm);
  margin:0 0 1.1rem;display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:16px;height:16px;flex:0 0 16px;border:2px solid var(--verm)}
.eyebrow--pale{color:var(--amber)}
.eyebrow--pale::before{border-color:var(--amber)}
.measure{max-width:63ch}
.dek{color:var(--grey)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;gap:1.5rem;min-height:78px}
.top__logo img{width:210px}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.85rem}
.nav a{
  font-size:.94rem;text-decoration:none;color:var(--ink);padding:.35rem 0;
  border-bottom:2px solid transparent;transition:border-color .18s,color .18s;
}
.nav a:hover,.nav a[aria-current="page"]{border-color:var(--verm)}
.btn{
  display:inline-block;font-family:var(--f-body);font-weight:600;font-size:.95rem;
  text-decoration:none;padding:.72rem 1.35rem;border:0;cursor:pointer;
  background:var(--flame);color:#fff;transition:filter .18s,transform .18s;
}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn--ghost{background:none;color:var(--ink);border:1.5px solid var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff;filter:none}
.btn--light{background:#fff;color:var(--ink)}
.navtoggle{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);padding:.5rem .8rem;font-family:var(--f-mono);font-size:.8rem;cursor:pointer}

/* ---------- hero ---------- */
.hero{padding:clamp(3.2rem,7vw,6rem) 0 clamp(2.6rem,5vw,4.2rem)}
.hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1 em{font-style:normal;background:var(--flame);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{margin-top:1.5rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* signature: het fonds als kader met deelnemingen erin */
.frame{border:3px solid var(--verm);padding:clamp(14px,2.4vw,22px);position:relative;background:#fff}
.frame__label{
  position:absolute;top:0;left:clamp(14px,2.4vw,22px);transform:translateY(-50%);
  background:#fff;padding:0 .6rem;font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--verm);
}
.cells{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,16px)}
.cell{
  aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(12px,1.8vw,18px);text-decoration:none;
  opacity:0;transform:scale(.94);animation:pop .55s cubic-bezier(.2,.7,.3,1) forwards;
}
.cell--filled{background:var(--flame);color:#fff}
.cell--filled:nth-of-type(2){background:linear-gradient(135deg,#E95319 0%,#C93A16 100%)}
.cell--open{border:2px dashed #C9C5BE;color:var(--grey);background:var(--shell)}
.cell:nth-child(1){animation-delay:.05s}
.cell:nth-child(2){animation-delay:.18s}
.cell:nth-child(3){animation-delay:.31s}
.cell:nth-child(4){animation-delay:.44s}
.cell__k{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;opacity:.8}
.cell__n{font-family:var(--f-display);font-weight:700;font-size:clamp(.98rem,1.5vw,1.18rem);line-height:1.15;margin-top:.3rem}
a.cell--open:hover{border-color:var(--verm);color:var(--verm)}
@keyframes pop{to{opacity:1;transform:scale(1)}}
.frame__foot{font-family:var(--f-mono);font-size:.72rem;color:var(--grey);margin-top:1rem;line-height:1.5}

/* ---------- secties ---------- */
section{padding:clamp(3rem,6vw,5.2rem) 0}
.sec--shell{background:var(--shell)}
.sec--ink{background:var(--steel);color:#EDEFEE}
.sec--ink h2,.sec--ink h3{color:#fff}
.sec--ink .dek{color:#AAB3B8}
.sec--ink a{color:#fff}
.hd{max-width:70ch;margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.hd p{margin-top:1rem}

.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(1.2rem,2.6vw,2.2rem)}
.card{background:#fff;border:1px solid var(--line);padding:clamp(1.3rem,2.4vw,1.9rem);display:flex;flex-direction:column}
.card h3{margin-bottom:.6rem}
.card p{color:var(--grey);font-size:.97rem}
.card a.more{margin-top:auto;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--verm);text-decoration:none}
.card a.more:hover{text-decoration:underline}

/* argumentenlijst, genummerd omdat het een opsomming van oorzaken is */
.args{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0;border-top:1px solid var(--line)}
.arg{border-bottom:1px solid var(--line);padding:1.6rem 0;padding-right:clamp(1rem,3vw,2.6rem)}
.arg h3{margin-bottom:.55rem}
.arg p{margin:0;color:var(--grey);font-size:.97rem}
.arg__k{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;color:var(--verm);display:block;margin-bottom:.5rem}

/* tijdlijn markt */
.era{border-left:3px solid var(--line);padding:0 0 2.6rem clamp(1.2rem,2.4vw,2rem);margin-left:.35rem;position:relative}
.era:last-child{padding-bottom:0}
.era::before{content:"";position:absolute;left:-9px;top:.55rem;width:15px;height:15px;background:var(--flame)}
.era--past::before{background:#B9BEC0}
.era__k{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:.45rem}
.era h2{margin-bottom:.9rem}
.era h3{margin:1.9rem 0 .5rem}

/* bedrijfsprofiel */
.co{display:grid;grid-template-columns:1fr;gap:1.6rem;border-top:3px solid var(--ink);padding-top:1.8rem;margin-bottom:clamp(2.6rem,5vw,4rem)}
.co__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9rem}
.co__head h2{margin:0}
.co__tag{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;color:var(--verm)}
.co__body{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(1.4rem,4vw,3.2rem)}
.spec{border:1px solid var(--line);padding:1.3rem;background:var(--shell);font-size:.93rem}
.spec dt{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--grey);margin-top:.9rem}
.spec dt:first-of-type{margin-top:0}
.spec dd{margin:.15rem 0 0}
.spec a{color:var(--verm)}

/* stappen */
.steps{counter-reset:s;display:grid;gap:1.4rem;max-width:70ch}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start}
.step__n{
  counter-increment:s;font-family:var(--f-mono);font-size:.8rem;color:#fff;
  background:var(--flame);width:34px;height:34px;display:grid;place-items:center;
}
.step__n::before{content:counter(s,decimal-leading-zero)}
.step p{margin:.25rem 0 0;color:var(--grey);font-size:.97rem}
.sec--ink .step p{color:#AAB3B8}

.list{margin:0;padding:0;list-style:none;max-width:70ch}
.list li{padding:.65rem 0 .65rem 1.7rem;border-bottom:1px solid var(--line);position:relative}
.list li::before{content:"";position:absolute;left:0;top:1.15rem;width:9px;height:9px;background:var(--verm)}
.sec--ink .list li{border-color:#3A444A}

/* cta strip */
.strip{background:var(--flame);color:#fff}
.strip .wrap{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center;justify-content:space-between;padding-top:clamp(2.4rem,4vw,3.4rem);padding-bottom:clamp(2.4rem,4vw,3.4rem)}
.strip h2{max-width:20ch}
.strip p{margin:.7rem 0 0;max-width:44ch}

/* formulier */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:640px}
.form label{display:flex;flex-direction:column;gap:.35rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.form input,.form textarea{
  font-family:var(--f-body);font-size:1rem;padding:.72rem .8rem;
  border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:0;
}
.form input:focus,.form textarea:focus{outline:2px solid var(--verm);outline-offset:1px}
.form .full{grid-column:1/-1}
.form .note{grid-column:1/-1;font-family:var(--f-body);font-size:.83rem;color:var(--grey);text-transform:none;letter-spacing:0}

/* footer */
.foot{background:var(--steel);color:#B9C1C6;padding:clamp(2.8rem,5vw,4rem) 0 2rem;font-size:.93rem}
.foot__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem}
.foot img{width:172px;filter:invert(1) grayscale(1) brightness(2.4)}
.foot .foot__h{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin:0 0 .8rem;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.45rem}
.foot a{color:#B9C1C6;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot__adviseur{border:1px solid #3A444A;padding:1rem;margin-top:1.3rem;font-size:.87rem;line-height:1.55}
.foot__adviseur strong{color:#fff;font-weight:600}
.foot__bar{border-top:1px solid #3A444A;margin-top:2.4rem;padding-top:1.3rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.82rem;font-family:var(--f-mono)}

/* toegankelijkheid */
a:focus-visible,button:focus-visible{outline:3px solid var(--verm);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:#fff;padding:.7rem 1rem;z-index:99}

@media (max-width:900px){
  .hero__grid,.co__body,.foot__grid{grid-template-columns:1fr}
  .nav{position:fixed;inset:78px 0 auto;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:0;padding:.5rem var(--gut) 1.4rem;display:none}
  .nav.open{display:flex}
  .nav a{padding:.85rem 0;width:100%;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:.9rem;width:100%;text-align:center;border-bottom:0}
  .navtoggle{display:block}
  .form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .cell{opacity:1;transform:none}
}

/* ---------- logo's van de deelnemingen ---------- */
.cell--co{
  background:#fff;border:1px solid var(--line);color:var(--ink);
  aspect-ratio:auto;min-height:clamp(158px,21vw,200px);
  justify-content:space-between;gap:.9rem;transition:border-color .18s,transform .18s;
}
.cell--co:hover{border-color:var(--verm);transform:translateY(-2px)}
.cell__logo{max-height:clamp(30px,4.2vw,46px);max-width:74%;width:auto;object-fit:contain;object-position:left center}
.cell--co .cell__k{color:var(--grey);opacity:1}
.cell--co .cell__n{color:var(--ink)}
.co__logo{max-height:58px;max-width:250px;width:auto;margin-bottom:1.1rem}
@media (max-width:560px){
  .cells{grid-template-columns:1fr}
  .cell--co{min-height:0}
}

/* ============================================================
   VORMGEVING v2 — patroon uit de merkgeometrie, cijferband,
   grafieken, rijkere kaarten en koppen
   ============================================================ */

/* ---------- draadpatroon: het logo als raster ---------- */
.mesh{position:relative;overflow:hidden;isolation:isolate}
.mesh::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(to right, rgba(233,83,25,.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(233,83,25,.11) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse 90% 70% at 70% 30%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 70% 30%, #000 30%, transparent 78%);
}
.sec--ink .mesh::before{
  background-image:
    linear-gradient(to right, rgba(242,142,1,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,142,1,.16) 1px, transparent 1px);
}

/* ---------- hero v2 ---------- */
.hero{padding:clamp(3.4rem,8vw,7rem) 0 clamp(3rem,6vw,5rem)}
.hero h1{font-size:clamp(2.5rem,6.2vw,4.6rem);line-height:1.02;letter-spacing:-.032em}
.hero .lead{max-width:52ch}
.hero__rule{
  width:clamp(56px,7vw,88px);height:6px;background:var(--flame);
  margin:0 0 1.7rem;display:block;
}

/* het kader krijgt diepte */
.frame{box-shadow:14px 14px 0 rgba(233,83,25,.09)}
.frame--flat{box-shadow:none}

/* ---------- cijferband ---------- */
.figs{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.figs__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0}
.fig{padding:clamp(1.6rem,3vw,2.4rem) clamp(1rem,2vw,1.8rem);border-left:1px solid var(--line)}
.fig:first-child{border-left:0}
.fig__n{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.035em;line-height:1;
  font-size:clamp(2.1rem,4.4vw,3.1rem);
  background:var(--flame);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.fig__l{font-family:var(--f-mono);font-size:.73rem;letter-spacing:.11em;text-transform:uppercase;color:var(--grey);margin-top:.7rem;line-height:1.45}

/* ---------- koppen met nummering ---------- */
.hd--num{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2.4vw,2rem);align-items:start}
.hd__num{
  font-family:var(--f-mono);font-size:.78rem;color:#fff;background:var(--ink);
  width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;margin-top:.35rem;
}

/* ---------- kaarten met meer karakter ---------- */
.card{position:relative;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--flame);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(22,19,15,.09);border-color:#CFCEC9}
.card:hover::after{transform:scaleX(1)}
.card h3{padding-top:.2rem}

/* ---------- grafieken ---------- */
.chart{border:1px solid var(--line);background:#fff;padding:clamp(1.2rem,2.4vw,1.9rem);margin:2rem 0}
.chart__t{font-family:var(--f-mono);font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;color:var(--verm);margin:0 0 .3rem}
.chart__s{font-size:.92rem;color:var(--grey);margin:0 0 1.3rem}
.bars{display:grid;gap:.75rem}
.bar{display:grid;grid-template-columns:clamp(88px,16%,132px) 1fr auto;gap:.8rem;align-items:center;font-size:.9rem}
.bar__k{font-family:var(--f-mono);font-size:.76rem;color:var(--grey)}
.bar__t{height:20px;background:var(--shell);position:relative;overflow:hidden}
.bar__f{position:absolute;inset:0 auto 0 0;background:var(--flame);width:var(--w,0%);
  animation:grow 1s cubic-bezier(.2,.7,.3,1) both}
.bar__f--muted{background:#B8BDC0}
.bar__v{font-family:var(--f-display);font-weight:700;font-size:.92rem;min-width:4.2em;text-align:right}
@keyframes grow{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
.chart__f{font-family:var(--f-mono);font-size:.7rem;color:var(--grey);margin:1.1rem 0 0;line-height:1.5}

/* saldo grafiek: nulpunt in het midden */
.swing{display:grid;gap:.75rem}
.swing__row{display:grid;grid-template-columns:clamp(96px,18%,150px) 1fr;gap:.8rem;align-items:center;font-size:.9rem}
.swing__t{position:relative;height:22px;background:var(--shell)}
.swing__t::before{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;background:#B8BDC0}
.swing__neg,.swing__pos{position:absolute;top:0;bottom:0}
.swing__neg{right:50%;background:#8D9497}
.swing__pos{left:50%;background:var(--flame)}
.swing__lab{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--f-mono);font-size:.7rem;color:var(--ink)}

/* ---------- pull quote ---------- */
.pull{
  border-left:4px solid var(--verm);padding:.4rem 0 .4rem 1.4rem;margin:2.2rem 0;
  font-family:var(--f-display);font-weight:600;font-size:clamp(1.12rem,2vw,1.42rem);
  line-height:1.32;letter-spacing:-.018em;max-width:34ch;
}

/* ---------- sectiescheiding ---------- */
.rule{height:1px;background:var(--line);border:0;margin:0}
.sec--ink{position:relative}
.strip{position:relative;overflow:hidden}
.strip::after{
  content:"";position:absolute;right:-40px;top:-40px;width:280px;height:280px;
  border:34px solid rgba(255,255,255,.13);pointer-events:none;
}

/* ---------- co profiel: logo naast kop ---------- */
.co{border-top-width:4px}
.co__logo{max-height:64px}

@media (max-width:700px){
  .fig{border-left:0;border-top:1px solid var(--line)}
  .fig:first-child{border-top:0}
  .hd--num{grid-template-columns:1fr}
  .hd__num{display:none}
}

/* ---------- portret en beeldblokken ---------- */
.portret{position:relative;align-self:start}
.portret img{width:100%;height:auto;display:block;filter:saturate(.94) contrast(1.03)}
.portret::after{content:"";position:absolute;left:-14px;bottom:-14px;width:64%;height:34%;border-left:6px solid var(--verm);border-bottom:6px solid var(--verm);z-index:-1}
.co__head--pf{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:clamp(1.4rem,3.5vw,2.6rem);align-items:start}

.shot{position:relative;margin:0}
.shot img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.shot figcaption{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;color:var(--grey);margin-top:.6rem;line-height:1.5}
.shot--tall img{aspect-ratio:3/4}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(1rem,2vw,1.5rem);margin:1.8rem 0 0}
@media (max-width:760px){.co__head--pf{grid-template-columns:1fr}.portret{max-width:280px}}

/* ============================================================
   VORMGEVING v3 — HET REKENVEL
   Raster over de hele site, secties als bladen, donkere
   cijferband, maatlijn in de hero
   ============================================================ */
body{
  background:
    linear-gradient(to right, rgba(22,19,15,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22,19,15,.045) 1px, transparent 1px),
    linear-gradient(to right, rgba(233,83,25,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(233,83,25,.06) 1px, transparent 1px),
    var(--paper);
  background-size:17px 17px,17px 17px,85px 85px,85px 85px;
  background-attachment:fixed;
}
main{padding:clamp(1.6rem,3.5vw,2.8rem) clamp(10px,2.5vw,32px) clamp(2rem,4vw,3.2rem)}
main > section, main > .figs{
  width:min(1280px,100%);margin:0 auto clamp(1.5rem,3vw,2.3rem);
  border:1px solid #D8D4CA;position:relative;
  box-shadow:0 2px 4px rgba(22,19,15,.04), 0 18px 44px rgba(22,19,15,.07);
}
main > section{
  background-color:#fff;
  background-image:
    linear-gradient(var(--verm),var(--verm)),linear-gradient(var(--verm),var(--verm)),
    linear-gradient(var(--verm),var(--verm)),linear-gradient(var(--verm),var(--verm)),
    linear-gradient(var(--verm),var(--verm)),linear-gradient(var(--verm),var(--verm)),
    linear-gradient(var(--verm),var(--verm)),linear-gradient(var(--verm),var(--verm));
  background-size:16px 1.5px,1.5px 16px,16px 1.5px,1.5px 16px,16px 1.5px,1.5px 16px,16px 1.5px,1.5px 16px;
  background-position:
    left 5px top 12px, left 12.25px top 5px,
    right 5px top 12px, right 12.25px top 5px,
    left 5px bottom 12px, left 12.25px bottom 5px,
    right 5px bottom 12px, right 12.25px bottom 5px;
  background-repeat:no-repeat;
}
main > section:last-child{margin-bottom:0}
main > .sec--shell{background-color:var(--shell)}
main > .strip{border-color:transparent}

/* donkere cijferband (staalplaat) */
.figs{background:#100E0B;border-color:#100E0B !important}
.figs .fig{border-left:1px solid rgba(255,255,255,.09)}
.figs .fig:first-child{border-left:0}
.fig__l{color:#8F897D}
@media (max-width:700px){
  .figs .fig{border-left:0;border-top:1px solid rgba(255,255,255,.09)}
  .figs .fig:first-child{border-top:0}
}

/* maatlijn */
.maat{position:relative;margin:2.1rem 0 0;height:26px;max-width:420px}
.maat::before{content:"";position:absolute;left:0;right:0;top:12.5px;height:1.5px;background:var(--ink)}
.maat::after{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1.5px;background:var(--ink)}
.maat i{position:absolute;right:0;top:6px;bottom:6px;width:1.5px;background:var(--ink)}
.maat b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;
  padding:0 .75rem;font-family:var(--f-mono);font-weight:500;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--verm);white-space:nowrap}

/* header en footer aansluiten op het vel */
.top{border-bottom:1px solid #D8D4CA;background:rgba(252,251,248,.92);backdrop-filter:blur(8px)}