/* ============================================================================
   bauhaus.css — Build Better Education design system (Bauhaus direction)
   Warm, calm, clear: off-white paper, Jost + Space Mono, primary-colour
   accents (red/blue/yellow) used sparingly, generous whitespace.
   Readability first: body copy at weight 400, 16–17px, high-contrast ink.
   ============================================================================ */
:root{
  --red:#D01F16; --blue:#1B44A8; --yellow:#F3C300; --violet:#6C2C91;
  --ink:#1C1B22; --paper:#FAF7F0; --card:#FFFFFF; --line:#E4DFD3;
  --body:#3A3833;        /* body copy — high contrast on paper */
  --muted:#55524A;       /* secondary copy */
  --sans:'Jost',system-ui,-apple-system,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --radius:4px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans); color:var(--body); background:var(--paper); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;}
img{max-width:100%}
a{color:inherit}
p{margin:0 0 1em;}
h1,h2,h3,h4,h5{color:var(--ink);}
.wrap{max-width:1200px; margin:0 auto; padding:0 clamp(20px,5vw,56px);}
.narrow{max-width:820px;}

/* ---- shared bits ---- */
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--red); display:inline-block; line-height:1.4;}
.rule{display:inline-flex; gap:6px; vertical-align:middle;}
.rule i{display:block; width:8px; height:22px;}
.rule .r{background:var(--red)} .rule .b{background:var(--blue)} .rule .y{background:var(--yellow)} .rule .k{background:var(--ink)}

/* ---- logo ---- */
.logo{display:inline-flex; align-items:center; gap:14px; text-decoration:none;}
.logo .blocks{display:flex; flex-direction:column; gap:4px; flex:none;}
.logo .blocks i{display:block; height:9px;}
.logo .blocks .b1{width:44px; background:var(--red);}
.logo .blocks .b2{width:33px; background:var(--blue);}
.logo .blocks .b3{width:23px; background:var(--yellow);}
.logo .wm{font-weight:700; font-size:18px; line-height:1; text-transform:lowercase; letter-spacing:-.01em; color:var(--ink);}
.logo .wm small{display:block; font-family:var(--mono); font-weight:400; font-size:9px; letter-spacing:.13em; text-transform:uppercase; opacity:.72; margin-top:5px;}
.on-dark .wm{color:var(--paper);} .on-dark .wm small{opacity:.75;}

/* ---- nav ---- */
header.nav{background:var(--paper); position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line);}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:88px; flex-wrap:wrap; padding:12px clamp(20px,5vw,56px);}
.nav-menu{display:flex; gap:30px; list-style:none; margin:0; padding:0;}
.nav-menu a{font-family:var(--sans); font-weight:500; font-size:16px; letter-spacing:-.01em; text-decoration:none; color:var(--ink); white-space:nowrap;}
.nav-menu a:hover, .nav-menu a.active{color:var(--red);}
.nav-menu .nav-cta{display:none;}          /* only shown in the mobile dropdown */

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-size:15px; letter-spacing:-.01em; font-weight:600; text-decoration:none; padding:13px 22px; border-radius:2px; cursor:pointer; border:none; line-height:1;}
.btn-red{background:var(--red); color:#fff;} .btn-red:hover{background:var(--ink);}
.btn-ink{background:var(--ink); color:#fff;} .btn-ink:hover{background:var(--red);}
.btn-ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink);} .btn-ghost:hover{background:var(--ink); color:#fff;}
.btn-ghost-light{background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.65);} .btn-ghost-light:hover{background:#fff; color:var(--ink);}

/* ---- sections ---- */
section.band{padding:clamp(52px,7vw,100px) 0;}
.band.line{border-top:1px solid var(--line);}
.sec-head{max-width:680px;}
.sec-head h2{font-weight:700; font-size:clamp(30px,4.2vw,50px); line-height:1.04; letter-spacing:-.02em; margin:14px 0 0;}
.sec-head .lead{font-weight:400; font-size:18px; color:var(--muted); margin-top:14px;}

/* ---- page hero (subpages) ---- */
.page-hero{padding:clamp(46px,6vw,88px) 0 clamp(38px,5vw,60px); border-bottom:1px solid var(--line);}
.page-hero h1{font-weight:700; font-size:clamp(40px,6.5vw,86px); line-height:.96; letter-spacing:-.03em; margin:20px 0 0; max-width:18ch;}
.page-hero h1 .o{color:var(--red);}
.page-hero .lead{font-weight:400; font-size:clamp(17px,1.5vw,20px); max-width:58ch; margin:22px 0 0; color:var(--body);}

/* ---- homepage hero ---- */
.hero{padding:clamp(42px,6vw,88px) 0 clamp(46px,6vw,84px);}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:center;}
.hero h1{font-weight:700; font-size:clamp(44px,7.5vw,100px); line-height:.96; letter-spacing:-.03em; margin:20px 0 0;}
.hero .lead{font-weight:400; font-size:clamp(17px,1.4vw,20px); max-width:44ch; margin:26px 0 0; color:var(--body);}
.hero .cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px;}
.hero-media{position:relative;}
.hero-media .frame{border-radius:3px; overflow:hidden; background:var(--card); box-shadow:0 30px 60px -40px rgba(0,0,0,.4);}
.hero-media img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 28%; display:block;}
.hero-media .sq{position:absolute; width:52px; height:52px; background:var(--blue); right:-20px; top:-20px;}
.hero-media .dot{position:absolute; width:72px; height:72px; border-radius:50%; background:var(--yellow); left:-28px; bottom:42px;}

/* ---- card grid ---- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px); margin-top:clamp(32px,4.5vw,52px);}
a.card,a.card:hover{text-decoration:none; color:inherit;}
.card{background:var(--card); border-radius:var(--radius); padding:30px 28px; display:flex; flex-direction:column; box-shadow:0 1px 0 var(--line), 0 20px 40px -34px rgba(0,0,0,.22);}
.card .top{display:flex; align-items:center; justify-content:space-between;}
.card .no{font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--muted);}
.card h3{font-weight:600; font-size:22px; letter-spacing:-.01em; margin:20px 0 0; line-height:1.2;}
.card p{font-weight:400; font-size:16px; color:var(--muted); margin:10px 0 0; line-height:1.62;}
.card.cta-card{background:var(--red); color:#fff;} .card.cta-card h3{color:#fff;} .card.cta-card p{color:rgba(255,255,255,.92);} .card.cta-card .no{color:#fff;}
.mark{width:26px; height:26px; flex:none;}
.mk-sq{background:var(--red);}
.mk-ci{background:var(--blue); border-radius:50%;}
.mk-tr{width:0;height:0;background:transparent;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:24px solid var(--yellow);}
.mk-hex{background:var(--ink); clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);}
.mk-di{background:var(--violet); clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);}

/* ---- service detail blocks ---- */
.svc-block{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); padding:clamp(38px,5vw,64px) 0; border-top:1px solid var(--line); align-items:start;}
.svc-block:first-of-type{border-top:none;}
.svc-block .tagn{display:flex; align-items:center; gap:14px;}
.svc-block .sq-mark{width:28px; height:28px; flex:none;}
.svc-block .no{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase;}
.svc-block h2{font-weight:700; font-size:clamp(26px,3vw,38px); line-height:1.08; letter-spacing:-.02em; margin:18px 0 0;}
.svc-block .desc{font-weight:400; font-size:17px; color:var(--body); margin:16px 0 0;}
.formats{display:flex; gap:8px; flex-wrap:wrap; margin-top:20px;}
.formats span{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:7px 12px; border-radius:2px; background:var(--card); border:1px solid var(--line); color:var(--muted);}
.feat-title{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin:0 0 14px;}
.feat{list-style:none; margin:0; padding:0;}
.feat li{display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-top:1px solid var(--line);}
.feat li:first-child{border-top:none; padding-top:0;}
.feat .dot{width:12px; height:12px; flex:none; margin-top:7px;}
.feat b{display:block; font-weight:600; font-size:17px; color:var(--ink);}
.feat span.t{display:block; font-size:16px; color:var(--muted); margin-top:4px;}

/* ---- process steps ---- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,26px); margin-top:clamp(30px,4vw,48px);}
.step{background:var(--card); border-radius:var(--radius); padding:26px 24px; box-shadow:0 1px 0 var(--line);}
.step .n{font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--red);}
.step h4{font-weight:600; font-size:19px; margin:14px 0 0;}
.step p{font-size:15.5px; color:var(--muted); margin:8px 0 0;}

/* ---- belief / dark section ---- */
.belief{background:var(--ink); color:#F2EFE8;}
.belief h2,.belief h3{color:#fff;}
.belief .inner{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(30px,5vw,64px); align-items:center;}
.belief h2{font-weight:700; font-size:clamp(28px,3.8vw,44px); line-height:1.1; letter-spacing:-.02em; margin:16px 0 0;}
.belief p{color:rgba(255,255,255,.86);}
.belief ul{list-style:none; margin:0; padding:0;}
.belief li{font-weight:500; font-size:clamp(17px,2vw,21px); padding:12px 0; border-bottom:1px solid rgba(255,255,255,.16); display:flex; align-items:center; gap:14px; color:#fff;}
.belief li:last-child{border:none;}
.belief li::before{content:""; width:12px; height:12px; flex:none; background:var(--red);}
.belief li:nth-child(2)::before{background:var(--blue);}
.belief li:nth-child(3)::before{background:var(--yellow); border-radius:50%;}
.belief li:nth-child(4)::before{background:#fff;}
.belief li:nth-child(5)::before{background:var(--red); border-radius:50%;}

/* ---- stats ---- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); margin-top:36px;}
.stat{padding-top:16px; border-top:3px solid var(--ink);}
.stat b{font-weight:700; font-size:clamp(30px,3.6vw,50px); line-height:1.05; letter-spacing:-.03em; display:block; color:var(--ink);}
.stat:nth-child(1) b{color:var(--red);} .stat:nth-child(2) b{color:var(--blue);} .stat:nth-child(4) b{color:var(--red);}
.stat span{font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); display:block; margin-top:10px; line-height:1.6;}

/* ---- people ---- */
.people{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,32px); margin-top:clamp(28px,4vw,44px);}
.person{background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 0 var(--line), 0 20px 40px -34px rgba(0,0,0,.22);}
.person .pic{aspect-ratio:4/3; overflow:hidden; background:var(--line);}
.person .pic img{width:100%; height:100%; object-fit:cover; object-position:center 25%; display:block;}
.person .body{padding:26px 28px 30px;}
.person h3{font-weight:600; font-size:24px; margin:0;}
.person .role{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--red); margin-top:8px;}
.person p{font-weight:400; font-size:16px; color:var(--muted); margin:14px 0 0;}
.person .chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}
.person .chips span{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:6px 11px; border-radius:2px; background:var(--paper); border:1px solid var(--line); color:var(--muted);}

/* ---- bio (about page) ---- */
.bio{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,4vw,56px); align-items:start; padding:clamp(38px,5vw,64px) 0; border-top:1px solid var(--line);}
.bio.rev{grid-template-columns:1.2fr .8fr;} .bio.rev .media{order:2;}
.bio .pic{border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; background:var(--line);}
.bio .pic img{width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block;}
.bio h2{font-weight:700; font-size:clamp(26px,3vw,40px); letter-spacing:-.02em; margin:14px 0 0;}
.bio .role{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--red); margin-top:8px;}
.bio p{font-size:17px; color:var(--body); margin:16px 0 0;}

/* ---- values / network ---- */
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,26px); margin-top:clamp(28px,4vw,44px);}
.value{background:var(--card); border-radius:var(--radius); padding:28px 26px; box-shadow:0 1px 0 var(--line);}
.value .bar{width:34px; height:8px; margin-bottom:16px;}
.value h4{font-weight:600; font-size:19px; margin:0;}
.value p{font-size:16px; color:var(--muted); margin:10px 0 0;}
.net{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px;}
.net .n{background:var(--card); border:1px solid var(--line); border-radius:2px; padding:14px 20px; font-weight:600; font-size:16px;}

/* ---- resource cards ---- */
.ins-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,26px); margin-top:clamp(28px,4vw,44px);}
.ins{background:var(--card); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; box-shadow:0 1px 0 var(--line), 0 20px 40px -34px rgba(0,0,0,.2); transition:transform .18s ease;}
.ins:hover{transform:translateY(-4px);}
.ins .pic{aspect-ratio:16/10; background:var(--line); overflow:hidden;}
.ins .pic img{width:100%; height:100%; object-fit:cover; display:block;}
.ins .pic.pic-contain{background:var(--paper);} .ins .pic.pic-contain img{object-fit:contain; padding:16px;}
.ins .ins-body{padding:22px 24px 26px;}
.ins .type{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);}
.ins h4{font-weight:600; font-size:19px; letter-spacing:-.01em; margin:12px 0 0; line-height:1.25; color:var(--ink);}
.ins p{font-weight:400; font-size:15.5px; color:var(--muted); margin:8px 0 0; line-height:1.55;}
.ins .dl{display:inline-block; margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--red);}

/* ---- tool cards ---- */
.tool-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(18px,2.4vw,26px); margin-top:clamp(28px,4vw,44px);}
.tool-card{background:var(--card); border-radius:var(--radius); padding:34px 30px; display:flex; flex-direction:column; text-decoration:none; color:inherit; box-shadow:0 1px 0 var(--line), 0 20px 40px -34px rgba(0,0,0,.2);}
.tool-card:hover{transform:translateY(-3px);}
.tool-card .badge{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--red);}
.tool-card h3{font-weight:700; font-size:28px; letter-spacing:-.02em; margin:14px 0 0;}
.tool-card .sub{font-weight:600; font-size:16px; color:var(--blue); margin-top:6px;}
.tool-card p{font-size:16px; color:var(--muted); margin:14px 0 22px; flex:1;}
.tool-card .go-row{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--ink);}

/* ---- forms ---- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start;}
.field{margin-bottom:18px;}
.field label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:7px;}
.field input,.field select,.field textarea{width:100%; font-family:var(--sans); font-size:16px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:2px; padding:13px 14px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--red); border-color:transparent;}
.field textarea{min-height:130px; resize:vertical;}
.contact-cards{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px;}
.contact-card{background:var(--card); border-radius:var(--radius); padding:22px; box-shadow:0 1px 0 var(--line);}
.contact-card .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.contact-card .val{font-weight:600; font-size:16px; margin-top:8px; word-break:break-word;}

/* ---- prose (terms) ---- */
.prose{max-width:76ch;}
.prose h2{font-weight:700; font-size:clamp(22px,2.4vw,28px); margin:36px 0 10px;}
.prose p,.prose li{font-size:17px; color:var(--body); line-height:1.7;}
.prose ul{padding-left:20px;}

/* ---- footer ---- */
footer.site{background:var(--ink); color:#F2EFE8; padding:clamp(46px,6vw,70px) 0;}
.foot-top{display:flex; justify-content:space-between; gap:44px; flex-wrap:wrap;}
.foot-links{display:flex; gap:56px; flex-wrap:wrap;}
.foot-links h5{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--yellow); margin:0 0 14px;}
.foot-links ul{list-style:none; margin:0; padding:0;}
.foot-links a{display:block; text-decoration:none; font-size:15.5px; padding:5px 0; color:#F2EFE8; opacity:.9;}
.foot-links a:hover{opacity:1; color:var(--yellow);}
.foot-bot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:42px; padding-top:20px; border-top:1px solid rgba(255,255,255,.2); font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.75);}
.foot-bot a{text-decoration:none;}

/* ---- language toggle ---- */
.nav-in .bbe-lang-toggle{background:transparent; border:2px solid var(--ink); border-radius:2px; color:var(--ink); font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.05em; padding:9px 12px; cursor:pointer; display:inline-flex; gap:5px; align-items:center; margin:0;}
.nav-in .bbe-lang-toggle:hover{border-color:var(--red);}
.nav-in .bbe-lang-toggle .bbe-sep{opacity:.45;}
.nav-in .bbe-lang-toggle span.on{color:var(--red);}
.nav-in .bbe-lang-toggle span:not(.on):not(.bbe-sep){opacity:.6;}

/* ---- mobile navigation (hamburger) ---- */
.nav-toggle{display:none;}
@media (max-width:900px){
  .nav-in{flex-wrap:nowrap; gap:12px;}
  .nav-in .logo{margin-right:auto; gap:11px;}
  .nav-in > .btn-red{display:none;}            /* CTA moves into the dropdown */
  .nav-toggle{
    display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:48px; height:42px; padding:0; background:transparent; border:2px solid var(--ink);
    border-radius:2px; cursor:pointer; margin-left:12px; flex:none;
  }
  .nav-toggle i{display:block; width:20px; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .15s ease;}
  .nav-open .nav-toggle i:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .nav-open .nav-toggle i:nth-child(2){opacity:0;}
  .nav-open .nav-toggle i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

  .nav-menu{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; background:var(--paper);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    box-shadow:0 24px 34px -24px rgba(0,0,0,.28); padding:6px 0;
  }
  .nav-open .nav-menu{display:flex;}
  .nav-menu li{width:100%;}
  .nav-menu a{display:block; font-size:14px; padding:16px 26px; border-bottom:1px solid var(--line);}
  .nav-menu li:last-child a{border-bottom:none;}
  .nav-menu .nav-cta{display:block; padding:16px 26px 8px;}
  .nav-menu .nav-cta .btn-red{display:flex; justify-content:center; width:100%; padding:16px; font-size:13px;}

  .hero-grid,.belief .inner,.svc-block,.bio,.bio.rev,.form-grid{grid-template-columns:1fr;}
  .bio.rev .media{order:0;}
  .cards,.ins-grid,.values-grid,.steps{grid-template-columns:1fr 1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .people{grid-template-columns:1fr;}
  .hero-media{order:-1; max-width:420px;}
}
@media (max-width:600px){
  .cards,.ins-grid,.values-grid,.steps,.stats,.contact-cards{grid-template-columns:1fr;}
}
@media (max-width:430px){
  /* shrink the logo a touch so logo + EN/NL + hamburger stay on one line */
  .nav-in .logo .wm{font-size:16px;}
  .nav-in .logo .wm small{font-size:8px; letter-spacing:.1em;}
  .nav-in .logo .blocks .b1{width:36px;} .nav-in .logo .blocks .b2{width:27px;} .nav-in .logo .blocks .b3{width:19px;}
  .nav-in{gap:10px;}
}

/* steps keep their light-card colours, also inside a dark band */
.belief .step h4{color:var(--ink);}
.belief .step p{color:var(--muted);}
.belief .step .n{color:var(--red);}

/* headings that contain an abbreviation keep their own capitals */
.keep-caps{text-transform:none !important;}