/* ---------- tokens ---------- */
:root{
  --forest-darkest:#0F1709; --forest-dark:#16200F; --forest:#25331D;
  --forest-mid:#2E4022;   /* subpage page-heads: lighter than the landing hero, reads green */
  --green-deep:#3E5E27; --green:#5E8A3C; --green-dark:#4A6E2E; --green-muted:#6E8053;
  --sage:#A3B17E; --sage-light:#BCC79C; --sage-tint:#E9EEDB;
  --cream:#F8F7F2; --cream-alt:#F5F7EE; --sand:#E1DDD1; --rule:#D8D5C6;
  --ink:#25331D; --ink-soft:#47523C; --neutral:#645E52; --neutral-dark:#4E4A41;
  --terracotta:#A45A38; --terracotta-deep:#B4452F; --terracotta-dark:#8F4A2C;
  --gold:#E8D9A8;
  --sans:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(22px,5vw,80px);
  --sec:clamp(64px,8vw,108px);
  --max:1440px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--terracotta);text-decoration:none}
a:hover{color:var(--terracotta-deep)}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}
section[id],main[id]{scroll-margin-top:86px}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;margin:0 0 clamp(20px,2.5vw,30px)}
.h2{font-size:clamp(31px,4.4vw,54px);line-height:1.05;letter-spacing:-.028em;font-weight:700}
/* h2-sm is for a headline that has to stay one sentence and would otherwise run to four lines */
.h2-sm{font-size:clamp(28px,3.5vw,44px)}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--neutral)}
/* bold inside a lede carries the argument, so it takes the darker ink, not just more weight */
.lede b{font-weight:600;color:var(--forest-dark)}
.on-dark .lede b,.hero .lede b{color:var(--cream)}
.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.on-dark .lede{color:var(--sage)}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-size:15px;font-weight:600;padding:16px 32px;border:1px solid transparent;
  transition:background .15s ease,border-color .15s ease,color .15s ease;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--terracotta);color:var(--cream)}
.btn-primary:hover{background:var(--terracotta-deep);color:var(--cream)}
.btn-ghost{background:transparent;color:var(--sage-tint);border-color:rgba(188,199,156,.42)}
.btn-ghost:hover{border-color:var(--sage);color:#fff}
.btn-sm{padding:12px 22px;font-size:13px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--forest-dark);
  border-bottom:1px solid rgba(232,217,168,.14)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:20px;padding-bottom:20px}
.nav a.navlink{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--sage-light)}
.nav a.navlink:hover{color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.logo{height:28px;width:auto}
@media(max-width:860px){.nav-links .navlink{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--forest-dark);
  background-image:
    radial-gradient(circle at 78% 22%,rgba(94,138,60,.30) 0%,rgba(94,138,60,0) 42%),
    radial-gradient(circle at 92% 62%,rgba(163,177,126,.16) 0%,rgba(163,177,126,0) 34%),
    radial-gradient(circle at 62% 84%,rgba(94,138,60,.14) 0%,rgba(94,138,60,0) 30%),
    radial-gradient(circle at 12% 8%,rgba(232,217,168,.07) 0%,rgba(232,217,168,0) 36%)}
/* the mark sits fully inside the frame - it used to be cropped by the right edge at right:-8% */
.hero-mark{position:absolute;right:8%;top:12%;width:min(520px,52vw);height:auto;opacity:.30;pointer-events:none}
/* the hero copy shares the left rail with every other section instead of sitting in a narrower
   centred column, which also clears the space the mark needs on the right */
.hero-in{position:relative;padding-top:clamp(64px,9vw,130px);padding-bottom:clamp(60px,8vw,118px)}
.hero h1,.hero .eyebrow{max-width:900px}
.hero .eyebrow{color:var(--gold);letter-spacing:.28em;margin-bottom:clamp(24px,3vw,40px)}
.hero h1{font-size:clamp(42px,8.2vw,104px);line-height:.95;letter-spacing:-.035em;font-weight:700;color:var(--cream);
  margin-bottom:clamp(20px,2.4vw,34px);text-wrap:balance}
.hero p{font-size:clamp(17px,1.9vw,23px);line-height:1.5;color:var(--sage-light);max-width:700px;
  margin-bottom:clamp(30px,3.6vw,48px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
@media(max-width:520px){.hero-cta{flex-direction:column;align-items:stretch}.hero-cta .btn{text-align:center}}

/* ---------- proof bar ---------- */
.proof{background:var(--forest)}
.proof-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(16px,2.4vw,28px);
  padding-top:24px;padding-bottom:24px}
.proof span{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--sage)}
.proof .sep{width:1px;height:13px;background:rgba(163,177,126,.30);flex:0 0 auto}
@media(max-width:760px){.proof .sep{display:none}.proof-in{flex-direction:column;align-items:flex-start;gap:11px}}

/* ---------- stat cards ---------- */
.grid{display:grid;gap:clamp(16px,2.2vw,28px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

.stat{background:var(--sage-tint);padding:clamp(26px,3vw,40px) clamp(24px,2.6vw,36px);border-top:3px solid var(--green)}
.stat-fig{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
.stat-fig b{font-size:clamp(46px,5.4vw,66px);font-weight:700;letter-spacing:-.04em;color:var(--forest-dark);line-height:1}
.stat-fig i{font-family:var(--mono);font-style:normal;font-size:clamp(13px,1.2vw,15px);color:var(--green-dark)}
.stat p{font-size:clamp(15px,1.3vw,16px);line-height:1.5;color:var(--ink-soft)}

/* ---------- team ---------- */
.team{background:var(--forest-dark)}
.team .h2{color:var(--cream);margin-bottom:clamp(36px,4.6vw,68px);max-width:900px}
.member img,.member .avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(163,177,126,.30);background:#fff;
  /* the global img{display:block} rule blocks text-align:center, so centre the box itself */
  margin-left:auto;margin-right:auto}
.member h3{font-size:20px;font-weight:700;color:var(--cream);letter-spacing:-.015em;margin-top:24px}
.member .role{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:8px 0 14px}
.member p{font-size:14px;line-height:1.55;color:var(--sage)}
/* MT cards: portrait, name and role centred (Robin, 10 Sept 2026). The bio keeps
   text-align:justify from the rule below - .member p:not(.role) is more specific
   than .member, so it wins regardless of order. Centred heading + justified body. */
.member{text-align:center}
/* MT bios are justified: full-width rows, word spacing does the work. Needs continuous
   text, so the .cl clause-wrapping is deliberately NOT applied inside .member. */
.member p:not(.role){text-align:justify;text-justify:inter-word;
  hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:7 4 3}
.awards{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.awards span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--gold);
  border-left:2px solid var(--terracotta);padding-left:8px}
.science{margin-top:clamp(34px,4vw,56px);padding-top:clamp(26px,3vw,40px);
  border-top:1px solid rgba(163,177,126,.20);display:grid;gap:clamp(18px,3vw,48px);
  grid-template-columns:minmax(0,520px) minmax(0,1fr);align-items:start}
/* the CTA belongs with the heading, not stranded at the bottom of the column */
.sci-l{display:flex;flex-direction:column;align-items:flex-start}
.science b{font-size:clamp(22px,2.4vw,30px);line-height:1.15;font-weight:700;color:var(--gold);letter-spacing:-.02em}
.science p{font-size:clamp(15px,1.4vw,17px);line-height:1.55;color:var(--sage)}
/* .science b is the gold display heading, so emphasis inside a paragraph needs scoping back */
/* gold, not white: on this block white is reserved for names (Robin, 16 Sept 2026) */
.science p b{font-size:inherit;line-height:inherit;letter-spacing:normal;font-weight:600;color:var(--gold)}
@media(max-width:900px){.science{grid-template-columns:minmax(0,1fr)}}

/* ---------- full team disclosure ---------- */
.fullteam{margin-top:clamp(30px,3.6vw,48px);padding-top:clamp(24px,2.8vw,36px);
  border-top:1px solid rgba(163,177,126,.20)}
.fullteam .ft-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:clamp(20px,2.4vw,30px)}
.fullteam .ft-count{color:var(--sage);letter-spacing:.1em}
.fullteam .ft-tier{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage);margin:clamp(22px,2.6vw,32px) 0 clamp(12px,1.6vw,18px)}
.fullteam .ft-tier:first-of-type{margin-top:0}
.fullteam .ft-wide{grid-column:span 1}
.fullteam .ft-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.2vw,28px)}
.fullteam .ft-grid div{border-top:1px solid rgba(163,177,126,.16);padding-top:14px}
.fullteam .ft-grid b{display:block;font-size:15px;font-weight:600;color:var(--cream);letter-spacing:-.01em}
.fullteam .ft-grid span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--sage);margin-top:5px}
@media(max-width:900px){.fullteam .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.fullteam .ft-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- platform ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule)}
.step{padding:clamp(24px,2.6vw,34px) clamp(20px,2.4vw,32px);border-right:1px solid var(--rule)}
.step:first-child{padding-left:0}
.step:last-child{border-right:0;padding-right:0}
.step.hl{background:var(--sage-tint)}
.step .n{font-family:var(--mono);font-size:13px;color:var(--terracotta-dark);margin-bottom:clamp(12px,1.6vw,20px)}
.step h3{font-size:clamp(20px,1.9vw,24px);font-weight:700;color:var(--forest-dark);letter-spacing:-.018em;margin-bottom:11px}
.step p{font-size:clamp(15px,1.3vw,16px);line-height:1.55;color:var(--neutral)}
@media(max-width:900px){
  .steps{grid-template-columns:minmax(0,1fr)}
  .step{border-right:0;border-bottom:1px solid var(--rule);padding-left:0;padding-right:0}
  .step.hl{padding-left:20px;padding-right:20px;margin-left:-20px;margin-right:-20px}
  .step:last-child{border-bottom:0}
}

/* ---------- materials ---------- */
/* reordered page: materials now sits between two sage-tint sections, so it
   takes the lighter cream-alt to keep the light-dark rhythm going */
.materials{background:var(--cream-alt)}
/* Materials now sits on cream-alt, and a cream card on a cream-alt ground has almost no
   edge - the three blocks stopped reading as blocks (Robin, 16 Sept 2026). The outline
   brings them back without changing the fill. */
.mat{background:var(--cream);display:flex;flex-direction:column;
  border:1px solid var(--rule)}
.mat-head{background:var(--forest-dark);padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;gap:10px;min-height:150px;justify-content:flex-end;text-align:center}
.mat-head .label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.mat-head .name{font-size:clamp(27px,3.1vw,34px);font-weight:700;color:var(--cream);letter-spacing:-.028em;line-height:1.05}
.mat-body{padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column;gap:16px;flex:1 1 auto}
.mat-body p{font-size:clamp(15px,1.3vw,16px);line-height:1.55;color:var(--neutral);flex:1 1 auto}
/* the two status chips stack instead of sitting side by side, and centre with the
   rest of the card body, so the cards line up whatever the label length */
.materials .chips{display:flex;flex-direction:column;align-items:center;gap:8px}
.mat-body{text-align:center}
.mat-body .chip{display:inline-block}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:6px 10px}
.chip-fill{background:var(--green-dark);color:var(--cream)}
.chip-out{border:1px solid var(--sage);color:var(--ink-soft)}
.mat-cta{border-top:1px solid var(--sand);padding-top:17px;font-size:14px;font-weight:600;color:var(--terracotta)}

/* ---------- comparison ---------- */
.compare{background:var(--forest)}
.compare .h2{color:var(--cream);margin-bottom:clamp(34px,4.4vw,64px);max-width:820px}
.ctable{display:grid;grid-template-columns:minmax(140px,240px) minmax(0,1fr) minmax(0,1fr)}
.ctable>div{padding:clamp(18px,2vw,26px) clamp(14px,2.2vw,32px);border-bottom:1px solid rgba(163,177,126,.16)}
.ctable>div:nth-child(3n+1){padding-left:0;color:var(--sage);font-size:clamp(15px,1.3vw,16px)}
.ctable>div:nth-child(3n){background:var(--forest-dark)}
.ctable .hd{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;border-bottom-color:rgba(163,177,126,.28)}
.ctable .hd-a{color:#A8A294}
.ctable .hd-b{color:var(--gold);border-bottom:1px solid var(--terracotta)}
.ctable .va{color:#A8A294;font-size:clamp(16px,1.5vw,19px)}
.ctable .vb{color:var(--cream);font-weight:600;font-size:clamp(16px,1.5vw,19px)}
.ctable>div:nth-last-child(-n+3){border-bottom:0}
@media(max-width:760px){
  .ctable{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ctable .spacer{display:none}
  .ctable .rowlabel{grid-column:1/-1;padding-left:0;padding-bottom:8px;border-bottom:0;
    font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
  .ctable>div{padding-left:14px;padding-right:14px}
  .ctable>div:nth-child(3n+1){padding-left:14px}
}

/* ---------- counters ---------- */
.counters{border-bottom:1px solid var(--sand);padding-top:clamp(44px,5vw,84px);padding-bottom:clamp(44px,5vw,84px)}
.counter b{font-size:clamp(40px,5vw,60px);font-weight:700;letter-spacing:-.04em;color:var(--forest-dark);line-height:1}
.counter i{font-family:var(--mono);font-style:normal;font-size:clamp(13px,1.2vw,15px);color:var(--green-dark);margin-left:7px}
.counter span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--neutral);margin-top:12px}


/* ---------- contact ---------- */
.contact{background:var(--forest-dark);
  background-image:radial-gradient(circle at 88% 30%,rgba(94,138,60,.22) 0%,rgba(94,138,60,0) 40%),
  radial-gradient(circle at 20% 88%,rgba(232,217,168,.06) 0%,rgba(232,217,168,0) 34%)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(34px,6vw,80px);align-items:start}
@media(max-width:1000px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.contact .h2{color:var(--cream);margin-bottom:clamp(24px,3vw,34px);font-size:clamp(30px,4vw,50px)}
.cinfo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,32px);
  margin-top:clamp(28px,3.4vw,44px)}
.cinfo dt{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8A9B6E;margin-bottom:6px}
.cinfo dd{margin:0;font-size:clamp(15px,1.2vw,17px);color:var(--sage-tint);word-break:break-word}
/* a label that wraps to two lines must not push its address out of line with its neighbour,
   so each cell is a column and the address is pinned to the bottom of the row */
.cinfo>div{display:flex;flex-direction:column}
.cinfo>div>dd{margin-top:auto}
.cinfo dd a{color:var(--sage-tint)}
.cinfo dd a:hover{color:var(--gold)}
/* the general mailbox sits under the four named ones, spanning both columns and centred */
.cinfo .gen{grid-column:1/-1;text-align:center;border-top:1px solid rgba(163,177,126,.20);
  padding-top:clamp(16px,2vw,22px)}
.cinfo .loc{grid-column:1/-1;border-top:1px solid rgba(163,177,126,.20);padding-top:clamp(16px,2vw,22px)}
@media(max-width:700px){.cinfo{grid-template-columns:minmax(0,1fr)}}

form{background:var(--cream);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:20px}
label{display:flex;flex-direction:column;gap:8px}
label>span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--neutral)}
input,select,textarea{font-family:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid #C9C5B5;padding:13px 14px;width:100%;border-radius:0;-webkit-appearance:none;appearance:none}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%234A6E2E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6.5l4 4 4-4'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--green-dark);outline:none;box-shadow:0 0 0 2px rgba(74,110,46,.18)}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:520px){.frow{grid-template-columns:minmax(0,1fr)}}
.hp{position:absolute;left:-9999px}

/* ---------- footer ---------- */
footer{background:var(--forest-darkest)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  padding-top:30px;padding-bottom:30px}
.foot-in img{height:22px;width:auto;opacity:.8}
.foot-links{display:flex;flex-wrap:wrap;gap:clamp(14px,2.2vw,30px)}
.foot-links a,.foot-links span{font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:#8A9B6E}
.foot-links a:hover{color:var(--gold)}
/* the addresses are links now, so they need a resting affordance, not just a hover state.
   They jump to the full entry in the Locations block; route links go on the same anchors later. */
.foot-links a.addr{border-bottom:1px dotted rgba(138,155,110,.55);padding-bottom:2px}
.foot-links a.addr:hover{border-bottom-color:var(--gold)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ---------- source lines under stats ---------- */
.stat .src{font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.02em;
  color:var(--green-dark);margin-top:12px}

/* ---------- everyday objects ---------- */
.objects{background:var(--sage-tint)}
.obj{display:flex;flex-direction:column;align-items:flex-start;background:var(--cream);
  padding:clamp(24px,2.6vw,32px);height:100%}
.obj svg{width:clamp(40px,4vw,52px);height:auto;color:var(--green-dark);margin-bottom:clamp(18px,2.2vw,26px)}
.obj b{font-size:clamp(18px,1.8vw,21px);font-weight:700;color:var(--forest-dark);
  letter-spacing:-.018em;line-height:1.2;margin-bottom:10px;
  /* titles are set to two lines with <br> so every description starts at the same height */
  min-height:2.4em}
.obj span{font-size:clamp(14px,1.3vw,15px);line-height:1.55;color:var(--neutral);flex:1 1 auto}
.obj a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--terracotta);margin-top:clamp(16px,2vw,22px);padding-top:14px;
  border-top:1px solid var(--sand);width:100%}
.obj a:hover{color:var(--terracotta-deep)}

/* ---------- plain-words line on the material cards ---------- */
.mat-head .plain{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--sage);margin-top:6px}

.fullteam .ft-grid span.owns{color:var(--sage-light);margin-top:7px;letter-spacing:.02em;
  text-transform:none;font-size:11px;line-height:1.5}

/* The .cl / .sen clause-wrapping is gone (Robin, 16 Sept 2026: "ophouden met die rare
   cut-offs/enters mid-sentence"). .cl kept a clause from splitting, but in a wide column
   every clause then took its own line and the paragraph read as a stack. Text now wraps
   normally. Do not reintroduce either class. */

/* ---------- team tier headers: three unmistakable groups ---------- */
.fullteam .ft-tier{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:8px 20px;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin:clamp(38px,4.4vw,56px) 0 clamp(16px,2vw,22px);padding-bottom:12px;
  border-bottom:1px solid rgba(232,217,168,.30)}
.fullteam .ft-tier:first-of-type{margin-top:0}
.fullteam .ft-grid div{border-top:0;padding-top:0}
.fullteam .ft-grid{gap:clamp(18px,2.4vw,30px)}
.fullteam .ft-grid span.owns{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:520px){.fullteam .ft-grid span.owns{white-space:normal}}
/* science & application runs as two rows of three, not four across */
.fullteam .ft-grid.ft-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.fullteam .ft-grid.ft-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.fullteam .ft-grid.ft-3{grid-template-columns:minmax(0,1fr)}}

/* ---------- locations schematic ---------- */
.geo{display:flex;flex-direction:column;margin-top:4px}
/* city and what happens there on one line, the street address underneath in a quieter
   register - it is reference information, not the point of the entry (Robin, 16 Sept 2026) */
.geo-row{display:grid;grid-template-columns:minmax(90px,auto) minmax(0,1fr);
  gap:2px 18px;align-items:baseline;padding:9px 0;scroll-margin-top:110px}
.geo-row + .geo-row{border-top:1px solid rgba(163,177,126,.14)}
.geo-addr{grid-column:2;font-style:italic;font-size:12.5px;line-height:1.5;
  color:rgba(163,177,126,.72)}
/* the footer address links jump here, so the target flags itself for a moment */
.geo-row:target .geo-city,.geo-row:target .geo-what{color:var(--gold)}
.geo-row:target .geo-addr{color:rgba(232,217,168,.8)}
/* the gold bullets are gone: the city name is already the marker */
.geo-city{font-size:clamp(15px,1.3vw,17px);font-weight:600;color:var(--sage-tint);letter-spacing:-.01em}
.geo-what{font-size:13px;line-height:1.5;color:var(--sage)}
@media(max-width:520px){
  .geo-row{grid-template-columns:minmax(0,1fr);row-gap:3px}
  .geo-what,.geo-addr{grid-column:1}
}

/* ---------- form privacy note ---------- */
/* GDPR wants the notice where the data is collected, not only in the footer. */
.formnote{font-size:12.5px;line-height:1.5;color:var(--sage);margin-top:14px;max-width:46ch}
.formnote a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.formnote a:hover{color:var(--cream)}

/* ---------- comparison table ---------- */
/* The one section that proves the performance claim. Incumbents on top in muted type,
   Parana rows below in full ink, so the eye reads "beaten by" without a single adjective. */
.cmp{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--rule);padding-top:clamp(28px,3.4vw,44px)}
.cmp-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:clamp(16px,2vw,24px)}
.cmp-head span:first-child{font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-dark)}
.cmp-note{font-size:12.5px;color:var(--neutral);line-height:1.45}
.cmp-note b{color:var(--forest-dark);font-weight:700}
/* the table scrolls sideways on a phone rather than squashing the numbers */
.cmp .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.perftable{width:100%;min-width:620px;border-collapse:collapse;font-size:clamp(13px,1.15vw,15px)}
.perftable th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--neutral);font-weight:400;
  padding:0 16px 10px 0;border-bottom:1px solid var(--rule);white-space:nowrap}
.perftable td{padding:12px 16px 12px 0;border-bottom:1px solid rgba(216,213,198,.55);
  color:var(--ink-soft);white-space:nowrap}
.perftable tr.inc td{color:var(--neutral)}
.perftable tr.ours td{color:var(--forest-dark)}
.perftable tr.ours td b{font-weight:700}
.perftable tr:last-child td{border-bottom:0}
.cmp-foot{margin-top:clamp(18px,2.2vw,26px);font-size:clamp(15px,1.3vw,17px);
  line-height:1.6;color:var(--neutral);max-width:860px}
.cmp-foot b{font-weight:600;color:var(--forest-dark)}
@media(max-width:620px){.perftable th,.perftable td{padding-right:12px}}

/* ---------- why now ---------- */
.whynow{background:var(--forest)}
.whynow .eyebrow{color:var(--gold)}
/* the quote runs the full column width - a narrow measure broke it into four short lines */
.pull{margin:0 0 clamp(24px,3vw,36px);max-width:none}
.pull p{font-size:clamp(23px,3.1vw,38px);line-height:1.22;letter-spacing:-.022em;
  font-weight:700;color:var(--cream);text-wrap:balance}
.pull cite{display:block;margin-top:clamp(16px,2vw,24px);font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sage);font-style:normal}

/* ---------- latest ---------- */
.latest{background:var(--cream-alt)}
.news{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.news li{display:grid;grid-template-columns:150px minmax(0,1fr) 130px;gap:clamp(14px,2.4vw,32px);
  align-items:start;padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid var(--rule)}
.news .when{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-dark);padding-top:3px}
.news .what{font-size:clamp(15px,1.3vw,17px);line-height:1.55;color:var(--ink-soft)}
.news .what b{font-weight:600;color:var(--forest-dark)}
.news .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--neutral);text-align:right;padding-top:4px}
@media(max-width:760px){
  .news li{grid-template-columns:minmax(0,1fr);gap:6px}
  .news .who{text-align:left}
}

/* ---------- science page link out of the team block ---------- */
.sci-cta{display:inline-block;margin-top:clamp(14px,1.8vw,22px);font-family:var(--mono);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid rgba(232,217,168,.35);padding-bottom:3px}
.sci-cta:hover{color:var(--cream);border-bottom-color:var(--cream)}

/* ---------- the optional half of the contact form ---------- */
/* Three required fields get the visitor to Send; company and message are one click away. */
.fmore{margin:0}
.fmore summary{cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--green-dark);padding:2px 0;list-style:none}
.fmore summary::-webkit-details-marker{display:none}
.fmore summary::before{content:"+ ";font-weight:700}
.fmore[open] summary::before{content:"\2212 "}
.fmore summary:hover{color:var(--terracotta)}
.fmore label{display:flex;flex-direction:column;gap:8px;margin-top:16px}

/* ---------- founder card, inside the science block ---------- */
/* Built to take a portrait: drop a 240x240 jpg in as <img class="avatar"> and the
   initials block below can go. Same 96px box either way, so nothing else moves. */
/* the science block is a two-column grid; the founder card spans both */
.science .founder{grid-column:1/-1}
.science .founder b{font-size:17px;color:var(--cream)}
.founder{display:flex;gap:clamp(16px,2.2vw,26px);align-items:flex-start;
  margin-top:clamp(24px,3vw,36px);padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid rgba(163,177,126,.20)}
.founder .avatar,.founder img.avatar{width:96px;height:96px;flex:0 0 96px;border-radius:50%;
  object-fit:cover;border:1px solid rgba(163,177,126,.30);background:rgba(163,177,126,.12);
  display:flex;align-items:center;justify-content:center}
.founder .avatar span{font-family:var(--mono);font-size:22px;letter-spacing:.06em;color:var(--sage)}
.founder b{display:block;font-size:17px;font-weight:700;color:var(--cream);letter-spacing:-.01em}
.founder .frole{display:block;margin-top:5px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.founder p{margin-top:12px;font-size:15px;line-height:1.6;color:var(--sage);max-width:62ch}
@media(max-width:560px){.founder{flex-direction:column}}

/* ---------- section 01: what the industry tried / what we do ---------- */
.ba{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  margin-top:clamp(30px,4vw,52px);border-top:1px solid var(--rule)}
.ba-h{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 0 14px}
.ba-l{padding-right:clamp(18px,2.4vw,32px)}
.ba-l .ba-h{color:var(--neutral)}
.ba-r{background:var(--sage-tint);padding-left:clamp(18px,2.4vw,32px);padding-right:clamp(18px,2.4vw,32px)}
.ba-r .ba-h{color:var(--terracotta-dark)}
.ba p{font-size:clamp(15px,1.35vw,17px);line-height:1.5;padding:18px 0;border-top:1px solid var(--rule)}
.ba-l p{color:var(--neutral)}
.ba-l p b{font-weight:600;color:var(--neutral-dark)}
.ba-r p{color:var(--forest-dark)}
.ba-r p b{font-weight:700}
/* the Coca-Cola story sits under the left column as evidence, not as a paired row,
   so the four-against-four rhythm of the two columns survives */
.ba-note{font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--neutral);
  border-top:0 !important;padding-top:14px !important;max-width:46ch}
@media(max-width:700px){.ba{grid-template-columns:minmax(0,1fr)}.ba-r{margin-top:22px}.ba-l{padding-right:0}}

/* ---------- glass transition comparison ---------- */
/* One measure (Tg, degC) across three named materials. The 0-86 degC zone is a tinted
   region, not a hairline, because the threshold IS the argument; the 121 degC mark is a
   reference line, not a fourth bar. Every bar is direct-labelled, so colour is redundant
   emphasis and never the sole carrier of identity. Fills #5E8A3C and #8F4A2C pass all six
   palette checks on this surface: CVD deltaE 9.0, normal-vision 18.4, contrast >= 3:1.
   Do not restyle them without re-running the validator. */
.tgc{margin-top:clamp(40px,5vw,72px);max-width:1000px}
.tgc-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:clamp(26px,3vw,38px)}
.tgc-head span:first-child{font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-dark)}
.tgc-sub{font-size:13px;color:var(--neutral);line-height:1.45}

.tgc-chart{display:grid;grid-template-columns:clamp(110px,14vw,170px) minmax(0,1fr);gap:clamp(14px,2vw,24px)}
.tgc-labels,.tgc-plot{display:flex;flex-direction:column;gap:16px}
.tgc-labels{padding-top:26px}
.tgc-lab{height:34px;display:flex;flex-direction:column;justify-content:center;
  font-size:13px;line-height:1.25;color:var(--neutral);text-align:right}
.tgc-lab b{font-size:15px;font-weight:700;color:var(--forest-dark);letter-spacing:-.01em}

.tgc-plot{position:relative;padding-top:26px}
/* the zone every bio-based polyester is stuck inside */
/* no tint fill: the 16px gaps between bars turn a background band into stripes, which
   reads as a rendering fault. A single strong boundary carries the threshold instead. */
/* the threshold sits ABOVE the bars so it visibly cuts across them - behind them it only
   showed in the gaps and read as a row of dashes */
.tgc-zone{position:absolute;left:47.8%;top:22px;bottom:26px;width:0;z-index:3;
  border-left:2px solid var(--forest-dark);pointer-events:none}
/* a reference line, drawn differently from a bar on purpose */
.tgc-mark{position:absolute;top:22px;bottom:26px;width:0;z-index:3;border-left:1px dashed rgba(22,32,15,.55);
  pointer-events:none}
.tgc-mark span{position:absolute;top:-24px;left:0;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--neutral)}
.tgc-mark span i{font-style:normal}

.tgc-track{position:relative;height:34px;z-index:1}
.tgc-bar{height:34px;border-radius:0 4px 4px 0;background:#5E8A3C;display:flex;align-items:center;
  justify-content:flex-end;padding-right:12px;box-shadow:0 0 0 2px var(--cream)}
.tgc-bar span{font-size:13.5px;font-weight:600;color:#fff;letter-spacing:.01em}
.tgc-bar.ours{background:#8F4A2C}

.tgc-foot{position:relative;height:30px;margin-top:-2px}
.tgc-zlab{position:absolute;left:0;top:8px;max-width:47.8%;font-size:12px;line-height:1.35;
  color:var(--neutral);padding-right:10px}
.tgc-zlab b{color:var(--forest-dark);font-weight:700}
/* no axis-maximum label: every bar is direct-labelled, so a "180 degC" tick added nothing
   and clipped off the right edge of the plot at every width */

.tgc-note{margin-top:clamp(22px,2.6vw,32px);font-size:clamp(15px,1.35vw,17.5px);line-height:1.6;
  color:var(--neutral);max-width:76ch}
.tgc-note b{color:var(--forest-dark);font-weight:600}

@media(max-width:700px){
  .tgc-chart{grid-template-columns:minmax(0,1fr);gap:0}
  .tgc-labels{display:none}
  .tgc-plot{gap:30px}
  .tgc-bar{border-radius:0 3px 3px 0}
  .tgc-bar::before{content:attr(data-name);position:absolute;left:0;top:-19px;
    font-size:12px;font-weight:700;color:var(--forest-dark);white-space:nowrap}
  /* two lines of threshold label need the room, and the boundary lines are re-anchored
     to match so they still stop just below the last bar */
  .tgc-foot{height:44px}
  .tgc-zone,.tgc-mark{bottom:40px}
  .tgc-zlab{max-width:100%}
  /* the full annotation runs off a 390px screen, so only the number survives */
  .tgc-mark span i{display:none}
}
/* the honest footnote: Tg is a ceiling, not a service temperature */
.tgc-caveat{margin-top:14px;font-size:12.5px;line-height:1.55;color:var(--neutral);
  max-width:70ch;padding-left:14px;border-left:2px solid var(--rule)}

/* ---------- IP and publications ---------- */
/* Replaces the founder card: the defensibility claim is only worth making if the reader
   can click through and check it, so every row is a live link to the primary source. */
.ip{background:var(--cream-alt)}
.ipgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.ipcol-h{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-dark);padding-bottom:14px;border-bottom:1px solid var(--rule)}
.iplist{list-style:none;margin:0;padding:0}
.iplist li{padding:18px 0;border-bottom:1px solid rgba(216,213,198,.6)}
.iplist li:last-child{border-bottom:0}
.iplist a{display:block;font-size:clamp(15px,1.3vw,16.5px);line-height:1.4;font-weight:600;
  color:var(--forest-dark);border-bottom:1px solid transparent}
.iplist a:hover{color:var(--terracotta-dark);border-bottom-color:var(--terracotta-dark)}
.iplist span{display:block;margin-top:7px;font-size:13.5px;line-height:1.5;color:var(--neutral)}
.ip-cta{display:inline-block;margin-top:clamp(28px,3.4vw,44px);font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta-dark);
  border-bottom:1px solid rgba(143,74,44,.35);padding-bottom:3px}
.ip-cta:hover{color:var(--terracotta-deep);border-bottom-color:var(--terracotta-deep)}
@media(max-width:760px){.ipgrid{grid-template-columns:minmax(0,1fr)}}

/* why now: one measure, full width, no forced breaks */
.pull-after{max-width:96ch}

/* the longer headline needs a smaller size to hold two lines and still clear the mark */
.hero h1.h1-sm{font-size:clamp(38px,6.6vw,86px);max-width:1040px}

/* ============================================================
   REDESIGN v2 - appended overrides. Loaded after the original
   rules, so same-specificity declarations here win.
   ============================================================ */
:root{
  --terracotta-tint:#F7E7DD; --terracotta-tint-2:#EFD6C7;
  --teal:#4A8076; --teal-deep:#2F564F; --teal-tint:#DCEBE6;
  --gold-mid:#C79A3A; --gold-deep:#8C6A1E;
  --disp:Outfit,Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
/* display face. Bare h1/h2 are included so the science, material and privacy pages
   take Outfit too - without them the homepage was Outfit and every other page Archivo,
   which shows the moment you click through from the nav. */
h1,h2,.h1-sm,.h2,.h2-sm,.hero h1,.mat-head .name,.step h3,.counter b,.obj b,
.pz-n b,.vs-hd .nm,.rc b,.feat h3,.cmp2-foot .k,.tgc-lab b{font-family:var(--disp)}

/* ---- proportion stat ---- */
.pz{margin:clamp(30px,4vw,48px) 0 0}
.pz-bar{margin-top:0}
.pz-big{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(20px,5vw,72px);margin-bottom:clamp(16px,2vw,24px)}
.pz-n{line-height:.86}
.pz-n b{display:block;font-size:clamp(50px,8.4vw,108px);font-weight:800;letter-spacing:-.05em;color:var(--terracotta-deep)}
.pz-n.good b{color:var(--green-deep)}
.pz-n i{display:block;font-family:var(--mono);font-style:normal;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--neutral);margin-top:15px}
.pz-bar{height:32px;display:flex;align-items:stretch;background:var(--terracotta)}
.pz-seg{width:.6%;background:var(--green-dark);min-width:3px}
.pz-scale{display:flex;justify-content:space-between;margin-top:11px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.pz-scale .bio{color:var(--green-deep)}
.pz-scale .fos{color:var(--terracotta-dark)}

/* ---- one quote, split across the two tables ---- */
.qpart{margin-top:clamp(34px,4.2vw,58px);border-left:3px solid var(--green-dark);padding-left:clamp(18px,2.2vw,28px);max-width:88ch}
.qpart p{font-size:clamp(17px,1.85vw,23px);line-height:1.34;letter-spacing:-.014em;font-weight:500;color:var(--ink-soft);text-wrap:pretty}
.qpart p b{font-weight:700;color:var(--green-deep)}
.qpart p .hl{font-weight:700;color:var(--terracotta-deep)}
.qpart.i{border-left-color:var(--terracotta)}
.qpart .cont{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta-dark);margin-top:11px}
.qpart cite{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--neutral);font-style:normal;margin-top:12px;text-transform:uppercase}
.qpart cite a{color:var(--terracotta-dark);border-bottom:1px solid rgba(143,74,44,.4);padding-bottom:2px}
.qpart cite a:hover{color:var(--terracotta-deep);border-bottom-color:var(--terracotta-deep)}

/* ---- paired ledger: fossil left orange, ours right green ---- */
/* The ledger, in the site's own vocabulary (Robin, 16 Sept 2026).
   It used to sit in peach and pale-green tint panels that appear nowhere else on the
   site - they came in with the design export. Rules and a left border carry the two
   sides instead, the same device as the material-page comparisons.
   Colour roles are also fixed here: the incumbent takes neutral ink, and terracotta is
   left to mean "something you click". It was doing three jobs at once. */
.pair{margin-top:clamp(38px,5vw,64px);border-top:1px solid var(--forest)}
.pair-hd,.pair-row{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,1fr)}
.pair-hd>*{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 0 13px}
/* tints back, per Robin: fossil side orange, ours green, and the emphasised words carry
   the same two colours so the eye can pick the argument out of the row */
.pair-hd .a{color:var(--terracotta-dark);background:var(--terracotta-tint)}
.pair-hd .b{color:var(--green-deep);background:var(--sage-tint)}
.pair-hd>*{padding-left:clamp(16px,2vw,28px);padding-right:clamp(16px,2vw,28px)}
.pair-row{border-top:1px solid var(--rule)}
.pair-row .n{font-family:var(--mono);font-size:11px;color:var(--sage);padding:21px 0 0}
.pair-row .a,.pair-row .b{padding:19px clamp(16px,2vw,28px) 21px;
  font-size:clamp(15px,1.35vw,17px);line-height:1.5}
.pair-row .a{background:var(--terracotta-tint);color:var(--neutral-dark)}
.pair-row .a b{font-weight:700;color:var(--terracotta-deep)}
.pair-row .b{background:var(--sage-tint);color:var(--ink)}
.pair-row .b b{font-weight:700;color:var(--green-deep)}
.pair-row.res{border-top:1px solid var(--forest)}
.pair-row.res .a{color:var(--terracotta-deep);font-weight:600}
.pair-row.res .b{color:var(--green-deep);font-weight:600}
@media(max-width:700px){
  .pair-hd,.pair-row{grid-template-columns:24px minmax(0,1fr)}
  .pair-hd .b,.pair-row .b{grid-column:2}
  .pair-row .b{margin-top:10px}
}
/* the old mobile block put a peach panel behind the step number; the tints are gone,
   and the column headers must survive the stack or the two sides lose their labels */
@media(max-width:700px){
  .pair-hd{display:none}
  .pair-row .a::before{content:"What the industry tried";display:block;
    font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--neutral);margin-bottom:7px}
  .pair-row .b::before{content:"What we do differently";display:block;
    font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--green-dark);margin-bottom:7px}
}

/* ---- Tg chart: incumbents now read orange ---- */
.tgc-lab b{color:var(--terracotta-dark)}
.tgc-lab.ours b{color:var(--green-deep)}
/* The redesign's colour roles kept (orange = conventional, green = ours), but at full
   strength rather than as tints. The tint pair #EFD6C7 / #4A6E2E fails three palette
   checks: the tint sits at 1.35:1 against the surface (floor is 3:1) and reads grey,
   and #4A6E2E against terracotta is deltaE 0.8 for deuteranopes - invisible. This pair
   (#8F4A2C / #5E8A3C) passes all six: CVD deltaE 9.0, normal 18.4, contrast >= 3:1.
   Re-run scripts/validate_palette.js before changing either value. */
.tgc-bar{background:var(--terracotta-dark)}
.tgc-bar span{color:var(--cream)}
.tgc-bar.ours{background:var(--green)}
.tgc-bar.ours span{color:var(--cream);font-weight:600}
.tgc-note b{color:var(--green-deep);font-weight:600}
.tgc-note .fos{color:var(--terracotta-deep);font-weight:600}

/* ---- science & IP: blocks ---- */
.refgrp-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid var(--forest);padding-bottom:12px;flex-wrap:wrap}
.refgrp-h .t{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-dark)}
.refgrp-h .c{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--neutral)}
.refcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);margin-top:clamp(20px,2.4vw,30px);border:1px solid var(--rule)}
.rc{background:var(--cream);padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:11px;transition:background .13s ease}
.rc:hover{background:var(--sage-tint)}
.rc .top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rc .code{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--green-dark)}
.rc b{font-size:clamp(15px,1.4vw,17px);font-weight:600;line-height:1.35;color:var(--forest-dark);letter-spacing:-.012em}
.rc:hover b{color:var(--terracotta-dark)}
.rc p{font-size:13.5px;line-height:1.55;color:var(--neutral);flex:1 1 auto}
.rc .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--neutral);border-top:1px solid var(--sand);padding-top:12px;margin-top:2px}
.pill{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;white-space:nowrap}
.pill-g{background:var(--green-dark);color:var(--cream)}
.pill-o{border:1px solid var(--sage);color:var(--ink-soft)}
.pill-j{background:var(--teal);color:#fff}
@media(max-width:800px){.refcards{grid-template-columns:minmax(0,1fr)}}

/* ---- comparison: conventional | ours ---- */
.cmp2-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:clamp(22px,2.6vw,32px)}
.cmp2-h .t{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-dark)}
.vs{background:var(--cream);border:1px solid var(--rule);margin-bottom:clamp(16px,2vw,24px)}
.vs:last-of-type{margin-bottom:0}
.vsr{display:grid;grid-template-columns:clamp(132px,16vw,210px) minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--rule)}
.vsr:first-child{border-top:0}
.vsr>*{padding:14px clamp(14px,1.8vw,24px)}
.vs-hd>*{padding-top:17px;padding-bottom:17px}
.vs-hd .sp{background:var(--cream)}
.vsr.vs-hd .inc{background:var(--terracotta-tint);border-top:3px solid var(--terracotta-dark);color:var(--terracotta-deep)}
.vsr.vs-hd .our{background:var(--sage-tint);border-top:3px solid var(--green-dark);color:var(--green-deep)}
.vs-hd .nm{font-size:clamp(18px,1.9vw,23px);font-weight:700;letter-spacing:-.022em;line-height:1.1}
.vs-hd .rl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-top:7px;color:var(--neutral-dark)}
.vsr .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--neutral);align-self:center}
.vsr .inc,.vsr .our{font-size:clamp(15px,1.5vw,18px);display:flex;align-items:baseline;gap:9px}
.vsr.vs-hd .inc,.vsr.vs-hd .our{display:block}
.vsr .inc{background:var(--terracotta-tint)}
.vsr .our{background:var(--sage-tint)}
.vsr.win .inc{color:var(--terracotta-deep);font-weight:700}
.vsr.win .our{color:var(--green-deep);font-weight:700}
.vsr.win .our .d{font-family:var(--mono);font-size:11.5px;font-weight:400;color:var(--green-dark)}
.vsr.same .inc,.vsr.same .our{color:var(--ink-soft);font-weight:500;background:rgba(225,221,209,.42)}
.vsr.stage .inc,.vsr.stage .our{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--neutral-dark);font-weight:400;background:rgba(225,221,209,.42)}
@media(max-width:800px){
  .vsr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vsr .k{grid-column:1/-1;padding-bottom:0}
  .vs-hd .sp{display:none}
}
.cmp2-foot{margin-top:clamp(26px,3vw,40px);border-top:1px solid var(--rule);padding-top:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
.cmp2-foot .k{font-size:clamp(25px,3vw,38px);font-weight:800;letter-spacing:-.04em;color:var(--green-deep);line-height:1}
.cmp2-foot p{font-size:13.5px;line-height:1.5;color:var(--neutral);margin-top:11px}
.cmp2-foot p b{color:var(--forest-dark);font-weight:600}
.cmp2-foot p .o{color:var(--terracotta-deep);font-weight:600}
@media(max-width:800px){.cmp2-foot{grid-template-columns:minmax(0,1fr);gap:20px}}

/* ---- latest: featured + rail ---- */
.feat{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,3.4vw,56px);border-top:1px solid var(--forest);padding-top:clamp(22px,2.6vw,34px);align-items:start}
.feat .when{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--terracotta-dark)}
.feat h3{font-size:clamp(21px,2.4vw,31px);font-weight:700;line-height:1.16;letter-spacing:-.024em;color:var(--forest-dark);margin-top:13px;text-wrap:pretty}
.feat p{font-size:15px;line-height:1.6;color:var(--neutral);margin-top:13px}
.feat .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--neutral);border:1px solid var(--sage);padding:5px 9px;display:inline-block;margin-top:18px}
.feat .side{border-left:1px solid var(--rule);padding-left:clamp(18px,2.4vw,32px)}
.feat .side .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-dark);margin-bottom:15px}
.mini{padding:15px 0;border-bottom:1px solid rgba(216,213,198,.7)}
.mini:first-of-type{border-top:1px solid rgba(216,213,198,.7)}
.mini .d{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;color:var(--neutral)}
.mini b{display:block;font-size:14.5px;font-weight:600;line-height:1.4;color:var(--forest-dark);margin-top:6px;letter-spacing:-.008em}
.mini a{border-bottom:1px solid rgba(143,74,44,.4);color:var(--terracotta-dark)}
.allnews{display:inline-block;margin-top:clamp(24px,3vw,38px);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta-dark);border-bottom:1px solid rgba(143,74,44,.35);padding-bottom:3px}
.allnews:hover{color:var(--terracotta-deep)}
@media(max-width:820px){.feat{grid-template-columns:minmax(0,1fr)}.feat .side{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:22px}}

/* ---- chart left, its reading on the right (Robin, 16 Sept 2026) ---- */
.tgc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);
  gap:clamp(24px,3.4vw,52px);align-items:start;max-width:none}
.tgc-side{border-left:2px solid var(--rule);padding-left:clamp(18px,2vw,26px);padding-top:38px}
.tgc-side p{font-size:clamp(14px,1.2vw,16px);line-height:1.6;color:var(--neutral)}
.tgc-side p + p{margin-top:12px}
.tgc-side p.k{margin-top:14px;color:var(--green-deep)}
.tgc-side .fos{color:var(--terracotta-dark);font-weight:600}
@media(max-width:1000px){
  .tgc-split{grid-template-columns:minmax(0,1fr)}
  .tgc-side{border-left:0;border-top:2px solid var(--rule);padding-left:0;
    padding-top:clamp(16px,2vw,22px);margin-top:clamp(20px,2.4vw,28px)}
}

/* ---- the traction counters, now inside Platform: "where that stands today" ---- */
.ct-head{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-dark);margin-top:clamp(40px,4.6vw,64px);padding-bottom:14px;
  border-bottom:1px solid var(--rule)}
.counters-in{border-bottom:0;padding-top:clamp(28px,3.2vw,40px);padding-bottom:0;
  padding-left:0;padding-right:0;max-width:none}

/* the quote is one quote again, not two halves with a "continues below" bridge */
.qpart.whole{margin:clamp(30px,4vw,52px) 0}
/* Marian sits alone on the first row of the 3-up fellows grid, the PhDs fill the second */
.ft-gap{border:0 !important;padding:0 !important}

/* ---- comparison + Tg chart now live on the material pages, not the landing page ---- */
.cmpsec{background:var(--cream-alt)}
.cmpsec .cmp{margin-top:0;border-top:0;padding-top:0}
/* one pull-out instead of three, so it reads as the conclusion of this page's comparison */
.cmp2-foot.one{grid-template-columns:minmax(0,1fr);max-width:70ch}

/* ---- one call to action: a sample IS how a partnership starts, so the partnership
        route is a link under the button rather than a competing button ---- */
.cta-alt{display:inline-flex;align-items:center;font-size:15px;font-weight:500;
  color:var(--sage-light);border-bottom:1px solid rgba(188,199,156,.35);padding-bottom:3px}
.cta-alt:hover{color:var(--gold);border-bottom-color:var(--gold)}
.hero-cta{align-items:center;gap:14px clamp(20px,2.6vw,34px)}
@media(max-width:520px){.cta-alt{margin-top:6px}}

/* a lede that is meant to sit on one line gets the full column */
.lede-wide{max-width:none}
/* the quote runs the width of the page, like everything else in this section */
.qpart{max-width:none}

/* Deliberate line breaks, desktop only. On a phone the column is too narrow for the
   author's line lengths and a forced break leaves a two-word orphan, so below 860px
   the text wraps on its own. */
/* display:none would swallow the whitespace and glue the words together, so the
   break is neutralised instead and the space in the markup does the separating. */
@media(max-width:860px){ br.lb{display:none} }

/* ---- a non-win row in the on-dark comparison must not be dressed as a win ---- */
.ctable .vb.neu{color:#A8A294;font-weight:400}

/* ---- the Tg chart, folded away until asked for, in the on-dark comparison ---- */
.cdet{margin-top:clamp(26px,3vw,40px);border-top:1px solid rgba(163,177,126,.20);padding-top:clamp(18px,2.2vw,26px)}
.cdet summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold);padding:2px 0}
.cdet summary::-webkit-details-marker{display:none}
.cdet summary::before{content:"+ ";font-weight:700}
.cdet[open] summary::before{content:"\2212 "}
.cdet summary:hover{color:var(--cream)}
.cdet-in{margin-top:clamp(22px,2.6vw,32px);background:var(--cream);
  padding:clamp(22px,2.8vw,36px);border-radius:2px}
.cdet-in .tgc{margin-top:0}

/* ---------- stacked comparison (Robin, 16 Sept 2026) ----------
   The two columns could not hold a long value side by side - "PISA blocks 7x more
   oxygen than PET" wrapped to two lines while its counterpart stayed on one, and the
   rows stopped lining up. Each measure is now one block: the label, then the fossil
   material, then ours underneath it. Nothing wraps against anything else, and it reads
   the same at 1440 and at 390. */
.cmp3{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px);max-width:980px}
.cmprow{border-top:1px solid rgba(163,177,126,.22);padding-top:clamp(14px,1.8vw,20px)}
.cmpk{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px}
.cmpv{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);
  gap:4px clamp(14px,2vw,24px);align-items:baseline;padding:9px clamp(12px,1.6vw,18px);
  border-left:3px solid transparent}
.cmpv .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.cmpv .val{font-size:clamp(15px,1.35vw,17px);line-height:1.45}
/* the incumbent, muted */
.cmpv.inc{border-left-color:rgba(164,90,56,.55)}
.cmpv.inc .who{color:#9C8B7E}
.cmpv.inc .val{color:#A8A294}
/* ours, carrying the emphasis */
.cmpv.our{background:rgba(94,138,60,.13);border-left-color:var(--green);margin-top:4px}
.cmpv.our .who{color:var(--sage)}
.cmpv.our .val{color:var(--cream);font-weight:600}
/* a measure we do not win, or have not measured, is not dressed as a win */
.cmpv.our.neu{background:rgba(163,177,126,.06);border-left-color:rgba(163,177,126,.35)}
.cmpv.our.neu .val{color:#A8A294;font-weight:400}
@media(max-width:620px){
  .cmpv{grid-template-columns:minmax(0,1fr);padding-left:12px}
  .cmpv .who{margin-bottom:2px}
}

/* platform picks up sage-tint so it does not run into the cream problem section */
#platform{background:var(--sage-tint)}

/* ---------- one line, by default ----------
   Section headings and their intro line kept wrapping because individual elements
   carried their own max-width, far below the page column. Those inline caps are gone
   from index.html; this is the rule that replaces them, so it does not come back.
   A measure cap belongs on running body copy, not on a one-sentence intro. */
.sec > .wrap > .h2,
.sec > .wrap > .lede{max-width:none}


/* ---- applications: the object is the word that should jump, not the whole title ---- */
.obj .objt{font-size:clamp(18px,1.8vw,21px);font-weight:400;color:var(--forest-dark);
  letter-spacing:-.018em;line-height:1.2;margin-bottom:10px;min-height:2.4em;
  font-family:var(--disp)}
.obj .objt b{font-weight:700}

/* ---- hero claim: four lines, the two things we replace indented under the verb ----
   The .hero p max-width:700px would break the lines in the wrong places, so the claim
   sets its own measure and each part becomes its own block. */
.hero-claim{max-width:none !important;font-size:clamp(17px,1.75vw,22px);line-height:1.55}
.hero-claim .hc-in,.hero-claim .hc-out{display:block}
.hero-claim .hc-in{padding-left:clamp(20px,2.6vw,38px)}
.hero-claim .hc-out{margin-top:.5em}
@media(max-width:560px){.hero-claim .hc-in{padding-left:16px}}

/* ---- ledger column headers: they are the frame for the whole argument, so they
        carry the weight of a heading rather than of a caption ---- */
.pair-hd>*{font-family:var(--disp);font-size:clamp(17px,1.9vw,23px);letter-spacing:.01em;
  text-transform:none;font-weight:700;padding:17px clamp(16px,2vw,28px) 15px}
.pair-hd .a{color:var(--terracotta-deep)}
.pair-hd .b{color:var(--green-deep)}

/* ---- proportion bar labels: at 11px mono in a muted weight the two colours were
        not reading as colours at all, which is the entire point of the graphic ---- */
.pz-scale{font-size:clamp(12px,1.15vw,14px);font-weight:700;letter-spacing:.09em;margin-top:13px}
.pz-scale .bio{color:var(--green-deep)}
.pz-scale .fos{color:var(--terracotta-deep)}

/* ---- active nav state: the bar now carries every section, so it doubles as a
        position indicator. Gold text plus a rule under the current one. ---- */
.nav a.navlink{position:relative;padding-bottom:5px;transition:color .2s}
.nav a.navlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .28s}
.nav a.navlink.on{color:var(--gold)}
.nav a.navlink.on::after{transform:scaleX(1)}
/* eight labels need a tighter gap than four did, or the bar runs into the logo */
.nav-links{gap:clamp(13px,1.6vw,26px)}

/* ---- material cards: back to the original palette. The all-green version read as
        three black slabs against cream-alt, which is not the site's language. Dark head,
        cream body, as designed. Nothing here overrides the shared .chip rules; the
        subpage headers own theirs in material.css. ---- */
/* the head was forest-dark, which at that depth reads as black rather than green
   (Robin, twice). green-deep is unmistakably green and still clears contrast for
   both the cream name and the gold label. */

/* ---- the line that answers the quote's last sentence. It sits at heading weight so it
        reads as a reply, not as a caption, and it introduces the ledger below it. ---- */
.answer{font-family:var(--disp);font-weight:700;color:var(--green-deep);
  font-size:clamp(26px,3.4vw,44px);letter-spacing:-.03em;line-height:1.05;
  margin-top:clamp(26px,3.2vw,42px)}

/* ---------- mobile navigation ----------
   Below 860px the eight links were simply hidden, which left a phone with no navigation
   at all. A disclosure button opens them as a full-width panel under the bar. No
   JavaScript: <details> carries the open state, so it works before the page has
   finished loading and with scripting off. */
.navtoggle{display:none}
@media(max-width:860px){
  .navtoggle{display:block;position:relative}
  .navtoggle summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
    font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--sage-light);padding:9px 2px}
  .navtoggle summary::-webkit-details-marker{display:none}
  .navtoggle summary .bars{display:inline-flex;flex-direction:column;gap:3.5px;width:17px}
  .navtoggle summary .bars i{display:block;height:1.6px;background:currentColor}
  .navtoggle[open] summary{color:var(--gold)}
  /* the panel hangs off the sticky bar, so it scrolls with nothing and covers nothing
     once closed */
  .navtoggle .panel{position:absolute;right:0;top:calc(100% + 9px);z-index:60;
    min-width:min(74vw,260px);background:var(--forest-dark);
    border:1px solid rgba(232,217,168,.20);padding:6px 0;
    box-shadow:0 18px 44px rgba(0,0,0,.45)}
  .navtoggle .panel a{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--sage-light);padding:13px clamp(16px,5vw,22px)}
  .navtoggle .panel a + a{border-top:1px solid rgba(163,177,126,.14)}
  .navtoggle .panel a:hover,.navtoggle .panel a:focus-visible{color:var(--gold);
    background:rgba(163,177,126,.08)}
  /* the current section is marked here too, by the same scroll spy */
  .navtoggle .panel a.on{color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
}

/* ---- voorbeelden onder de linkerkolom van de ledger ---- */
.pair-row .a .eg{display:block;margin-top:5px;font-family:var(--mono);
  font-size:clamp(11px,1.05vw,12.5px);letter-spacing:.04em;
  color:var(--terracotta-deep);opacity:.78}

/* ---- vier materiaalkaarten: koppen op gelijke hoogte ---- */
.materials .grid.g4{grid-template-rows:auto auto}
.materials .grid.g4 .mat{grid-row:span 2;display:grid;grid-template-rows:subgrid}
.materials .grid.g4 .mat-head .name{font-size:clamp(20px,2.1vw,28px)}
@media(max-width:900px){.materials .grid.g4{grid-template-rows:none}
  .materials .grid.g4 .mat{grid-row:auto;display:block}}

/* ---- Tg-balk als bereik (PISOX: 100-167 C, gezet door de comonomeer) ---- */
.tgc-bar.rng{border-radius:4px;justify-content:center;padding-right:0}
@media(max-width:620px){.tgc-bar.rng span{font-size:12px}}

/* ---- subsidiestrook: EU-embleem minimaal even groot als elk ander logo ---- */
.funders{background:var(--sage-tint);border-top:1px solid var(--rule);
  padding:clamp(30px,3.6vw,46px) 0 clamp(30px,3.6vw,46px)}
.funders-in{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.2vw,26px);text-align:center}
.fund-lede{max-width:720px;font-size:clamp(13.5px,1.25vw,15px);line-height:1.6;color:var(--ink-soft)}
.fund-lede a{color:var(--terracotta-deep);white-space:nowrap}
.fund-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(22px,3.4vw,48px)}
/* Alle logo's op gelijke hoogte. De operationele richtsnoeren eisen dat het
   EU-embleem minstens even groot is als het grootste andere logo, gemeten in
   hoogte OF breedte - gelijke hoogte voldoet daaraan. */
.fund-logos img{height:44px;width:auto;display:block}
@media(max-width:620px){
  .fund-logos{gap:16px}
  .fund-logos img{height:32px}
}

/* ---- funding-pagina: blok per financier ---- */
.fundblock{margin-top:clamp(38px,4.4vw,58px);padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid var(--rule)}
.fundblock:first-of-type{margin-top:0;border-top:0;padding-top:0}
.fb-logos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,2.6vw,34px);
  margin-bottom:clamp(18px,2.2vw,26px)}
.fb-logos img{height:44px;width:auto;display:block}
.legal .fundblock h2{margin-top:0;border-top:0;padding-top:0}
@media(max-width:620px){.fb-logos{gap:16px}.fb-logos img{height:32px}}

/* ---- funding-pagina: lucht tussen beschrijving en Aim, en voor het vragenblok ---- */
.legal .fundblock p + p{margin-top:clamp(22px,2.6vw,32px)}
.legal .contactbox{margin-top:clamp(70px,9vw,120px)}

/* ---- proofbar-links ---- */
.proof a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(232,217,168,.38);
  padding-bottom:1px;transition:color .2s,border-color .2s}
.proof a:hover{color:var(--gold);border-color:var(--gold)}

/* ---- JTF-woordmerk draagt optisch zwaarder dan de andere logo's ---- */
.fb-logos img[alt="Just Transition Fund"]{height:34px}
@media(max-width:620px){.fb-logos img[alt="Just Transition Fund"]{height:25px}}

/* ---- materiaalkaarten: kleur zoals live, en titels op gelijke hoogte ---- */
.materials .mat-head{background:var(--green-deep)}
.mat-head .name a{color:inherit}
.materials .grid.g4 .mat-head .label{min-height:2.9em;display:flex;align-items:flex-end;
  justify-content:center;text-align:center}
.materials .grid.g4 .mat-head .plain{min-height:2.9em}

/* ---------- herkomstblok verplaatst van het team naar IP (lichte achtergrond) ---------- */
/* .science was ontworpen voor de donkere teamsectie; op cream moeten de kleuren om. */
.ip .science{border-top-color:var(--rule)}
.ip .science b{color:var(--forest-dark)}
.ip .science p{color:var(--ink-soft)}
.ip .science p b{color:var(--forest-dark)}
.ip .sci-cta{color:var(--terracotta-dark);border-bottom-color:rgba(143,74,44,.35)}
.ip .sci-cta:hover{color:var(--terracotta-deep);border-bottom-color:var(--terracotta-deep)}

/* het featured nieuwsitem linkt door naar het persbericht van Avantium */
.feat-cta{display:block;margin-top:16px;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta-dark);
  border-bottom:1px solid rgba(143,74,44,.35);padding-bottom:3px;width:fit-content}
.feat-cta:hover{color:var(--terracotta-deep);border-bottom-color:var(--terracotta-deep)}
.feat .feat-cta+.tag{margin-top:20px}

/* contact: de persoonlijke adressen zijn eruit, alleen info@ blijft over.
   Als enig adres hoort het links uitgelijnd en zonder scheidingslijn erboven. */
.cinfo .gen{text-align:left;border-top:0;padding-top:0}
.cinfo .gen dd{font-size:clamp(17px,1.6vw,21px)}

/* ---------- MT terug, compact, onder het herkomstblok in IP ----------
   Alleen portret, naam en functie: de bio's zijn eruit, dus de rij mag rustig
   zijn en hoeft niet te concurreren met de patent- en publicatiekaarten erboven. */
.mtrow{margin-top:clamp(34px,4vw,54px);padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--rule)}
.mt-k{font-family:var(--disp);font-size:clamp(22px,2.4vw,30px);font-weight:700;
  line-height:1.15;letter-spacing:-.02em;color:var(--forest-dark);
  margin-bottom:clamp(26px,3vw,38px)}
.mt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.mt{text-align:center}
.mt img{width:clamp(84px,7.5vw,108px);height:clamp(84px,7.5vw,108px);border-radius:50%;
  object-fit:cover;border:1px solid var(--rule);background:#fff;margin:0 auto}
.mt b{display:block;margin-top:16px;font-size:clamp(15px,1.3vw,17px);font-weight:700;
  line-height:1.25;color:var(--forest-dark);letter-spacing:-.015em}
.mt span{display:block;margin-top:6px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.5;color:var(--neutral)}
@media(max-width:760px){.mt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}

/* MT-namen in hetzelfde display-lettertype als de rest van de kopteksten */
.mt b{font-family:var(--disp)}

/* ---------- ritme tussen twee secties met dezelfde achtergrond ----------
   Zonder kleurverschil leest dubbele sectiepadding als een gat. Deze twee
   klassen halveren de padding aan beide kanten, zodat twee secties zonder
   kleurverschil net zo ver uit elkaar staan als twee secties mét. */
.sec.rh-tight{padding-bottom:calc(var(--sec)/2)}
.sec.rh-next{padding-top:calc(var(--sec)/2)}