:root{
  --cream:#F5F0E6;
  --paper:#FBF7EF;
  --ink:#1A1A1A;
  --ink-soft:#2A2A2A;
  --orange:#E85D26;
  --orange-deep:#C94A16;
  --grey-text:#6B7280;
  --grey-warm:#8B8680;
  --grey-soft:#B8B3AC;
  --rule:#E5DFD1;
  --rule-soft:#EDE7D8;
  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:'Inter Tight','Helvetica Neue', Helvetica, Arial, sans-serif;

  --hero-pad-y: 140px;
  --section-pad-y: 160px;
  --hero-title-size: clamp(56px, 7.4vw, 124px);
  --section-title-size: clamp(44px, 5.4vw, 84px);
  --accent: #E85D26;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--cream); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased;}
body{overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent); color:var(--cream);}

.top-accent{position:fixed; top:0; left:0; right:0; height:6px; background:var(--accent); z-index:50;}

header.nav{
  position:sticky; top:6px; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding: 26px 56px;
  background:linear-gradient(var(--cream) 78%, rgba(245,240,230,0));
}
.nav-brand{display:flex; align-items:center; gap:12px; font-family:var(--sans); font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--grey-warm);}
.nav-brand .dot{width:6px; height:6px; background:var(--accent); border-radius:50%;}
.nav-brand b{font-weight:600; color:var(--ink); letter-spacing:3px;}
.nav-right{display:flex; align-items:center; gap:36px;}
.nav-links{display:flex; gap:28px; font-size:11px; letter-spacing:2.2px; text-transform:uppercase; color:var(--ink);}
.nav-links a{position:relative; padding:6px 0; transition:color .2s;}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--ink); transition:right .35s cubic-bezier(.2,.7,.2,1);}
.nav-links a:hover::after, .nav-links a.is-current::after{right:0;}

.lang-toggle{display:inline-flex; align-items:center; font-size:10px; letter-spacing:2.5px; text-transform:uppercase; border:1px solid var(--ink); border-radius:2px; overflow:hidden;}
.lang-toggle button{background:transparent; border:none; cursor:pointer; padding:8px 12px; font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--ink); font-family:var(--sans); transition:background .15s, color .15s;}
.lang-toggle button.active{background:var(--ink); color:var(--cream);}
.lang-toggle button:not(.active):hover{background:rgba(26,26,26,.06);}

[data-lang="en"] .nl-only, [data-lang="nl"] .en-only{display:none;}

.hero{max-width:1280px; margin:0 auto; padding: var(--hero-pad-y) 56px calc(var(--hero-pad-y) * .85);}
.hero-label{font-family:var(--sans); font-size:10px; letter-spacing:3.5px; text-transform:uppercase; color:var(--accent); font-weight:600; display:flex; align-items:center; gap:14px; margin-bottom:56px;}
.hero-label::before{content:""; display:block; width:40px; height:1px; background:var(--accent);}

h1.hero-title{font-family:var(--serif); font-weight:400; font-size: var(--hero-title-size); line-height:.96; letter-spacing:-0.022em; color:var(--ink); max-width:18ch; text-wrap:pretty;}
h1.hero-title .it{font-style:italic; color:var(--accent);}
h1.hero-title .ink-it{font-style:italic;}

.hero-rule{width:64px; height:1px; background:var(--ink); margin:64px 0 36px;}

.hero-lede{font-family:var(--serif); font-style:italic; font-weight:400; font-size: clamp(22px, 1.55vw, 28px); line-height:1.5; color:#3A3A3A; max-width: 42ch; margin-bottom:56px; text-wrap:pretty;}
.hero-lede em{font-style:italic; color:var(--ink);}

.section-mark{max-width:1280px; margin:0 auto; padding: 0 56px; display:flex; align-items:center; gap:18px;}
.section-mark .line{flex:1; height:1px; background:var(--rule);}
.section-mark .dot{width:5px; height:5px; border-radius:50%; background:var(--accent);}

.recognition{max-width:1280px; margin:0 auto; padding: var(--section-pad-y) 56px;}
.sec-label{font-size:10px; letter-spacing:3.5px; text-transform:uppercase; color:var(--accent); font-weight:600; display:flex; align-items:center; gap:14px; margin-bottom:48px;}
.sec-label::before{content:""; display:block; width:40px; height:1px; background:var(--accent);}
.sec-label .idx{color:var(--grey-warm); font-weight:600;}

h2.sec-title{font-family:var(--serif); font-weight:400; font-size: var(--section-title-size); line-height:1.0; letter-spacing:-0.018em; color:var(--ink); max-width:18ch; margin-bottom:72px; text-wrap:pretty;}
h2.sec-title .it{font-style:italic; color:var(--accent);}

.friction-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 56px; border-top:1px solid var(--rule); padding-top:48px; margin-bottom:88px;}
.friction{display:flex; flex-direction:column; gap:18px;}
.friction .num{font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent);}
.friction p{font-family:var(--serif); font-size: clamp(18px, 1.35vw, 22px); line-height:1.5; color:var(--ink); text-wrap:pretty;}

.cocoon{display:grid; grid-template-columns: 1fr 2fr; gap:80px; align-items:start; border-top:1px solid var(--rule); padding-top:64px; margin-bottom:88px;}
.cocoon-eyebrow{font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--grey-warm);}
.cocoon-eyebrow::before{content:""; display:inline-block; width:24px; height:1px; background:var(--accent); vertical-align:middle; margin-right:14px; transform:translateY(-3px);}
.cocoon-body{font-family:var(--serif); font-size: clamp(24px, 2.1vw, 36px); line-height:1.32; color:var(--ink); letter-spacing:-0.01em; max-width: 28ch; text-wrap:pretty;}
.cocoon-body .it{font-style:italic; color:var(--accent);}
.cocoon-body strong{font-weight:400; font-style:italic;}

.herkenbaar{display:grid; grid-template-columns: 1fr 2fr; gap:80px; align-items:start; border-top:1px solid var(--rule); padding-top:48px;}
.herkenbaar-q{font-family:var(--serif); font-style:italic; font-size: clamp(28px, 2.4vw, 40px); line-height:1.1; color:var(--ink); letter-spacing:-0.01em;}
.herkenbaar-q::after{content:""; display:block; width:32px; height:1px; background:var(--accent); margin-top:18px;}
.herkenbaar-list{list-style:none;}
.herkenbaar-list li{display:grid; grid-template-columns: 24px 1fr; gap:14px; font-family:var(--serif); font-size: clamp(18px, 1.4vw, 22px); line-height:1.55; color:var(--ink); padding: 8px 0; text-wrap:pretty;}
.herkenbaar-list li .mark{color:var(--accent); font-family:var(--sans); font-weight:600; font-size:14px; line-height:1.6;}

footer{margin-top: 80px; padding: 72px 56px 48px; background:var(--cream); border-top:1px solid var(--rule);}
.foot-inner{max-width:1280px; margin:0 auto; display:grid; grid-template-columns: 1fr auto auto; gap:56px; align-items:flex-end;}
.foot-brand img{height:36px; opacity:.9;}
.foot-tag{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--grey-text); margin-top:14px; max-width:32ch;}
.foot-col h4{font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--grey-warm); font-weight:600; margin-bottom:14px;}
.foot-col a, .foot-col p{display:block; font-size:13px; color:var(--ink); line-height:1.85;}
.foot-col a:hover{color:var(--accent);}
.foot-meta{max-width:1280px; margin:48px auto 0; padding-top:24px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--grey-warm);}

.reveal{opacity:0; transform: translateY(14px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}

@media (max-width: 980px){
  header.nav{padding:18px 24px;}
  .nav-links{display:none;}
  .hero{padding: 80px 24px;}
  .section-mark{padding:0 24px;}
  .recognition{padding: 80px 24px;}
  .friction-grid{grid-template-columns:1fr; gap:36px;}
  .cocoon, .herkenbaar{grid-template-columns:1fr; gap:24px;}
  .foot-inner{grid-template-columns:1fr; gap:32px; align-items:flex-start;}
  .foot-meta{flex-direction:column; gap:8px;}
  footer{padding:56px 24px 32px;}
}