/* QWASP B.V.: qwasp.eu static stylesheet, no external fonts/JS.
   Palette, font and corner-radius aligned with the live qwasp.education
   stylesheet (see 99_INBOX/qwasp_education_reference/), 2026-09-22. */

:root{
  --ink:#1a1a1a;
  --ink-soft:#6e6e6e;
  --paper:#f4f4f4;
  --panel:#ffffff;
  --line:#dedede;
  --accent:#2d6da4;
  --accent-dark:#1f4e78;
  --accent-soft:#e8f0f9;
  --focus:#2d6da4;
  --r-sm:3px;
  --r-md:4px;
  --max:1120px;
  --shadow-sm:0 1px 2px rgba(20,20,20,.06);
  --shadow-md:0 6px 20px rgba(20,20,20,.08);
  --shadow-lg:0 14px 40px rgba(20,20,20,.12);
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#eef0f2;
    --ink-soft:#aab2bb;
    --paper:#141414;
    --panel:#1e1e1e;
    --line:#333333;
    --accent:#5b8ec7;
    --accent-dark:#7ea3c4;
    --accent-soft:#1f2c3a;
    --focus:#5b8ec7;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:14px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  line-height:1.55;
}
h1,h2,h3,h4{
  font-family:inherit;
  font-weight:600;
  line-height:1.25;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
  color:var(--ink);
}
h1{font-size:clamp(1.9rem,4vw,2.8rem)}
h2{font-size:clamp(1.3rem,2.6vw,1.7rem);margin-top:2.2em}
h3{font-size:1.1rem}
p{margin:0 0 1em}
a{color:var(--accent)}
a:hover{color:var(--accent-dark)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}

/* Skip link */
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:.6em 1em;z-index:100}
.skip-link:focus{left:12px;top:12px}

/* Header / nav */
header.site{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow-sm)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:1.2em;padding:14px 0}
.brand{display:flex;align-items:center;gap:.6em;font-weight:700;font-size:.95rem;letter-spacing:.04em;color:var(--ink-soft);text-decoration:none;text-transform:uppercase}
.brand img{display:block;height:38px;width:auto;flex:none;margin-left:4px}
nav.primary ul{list-style:none;display:flex;gap:1.4em;margin:0;padding:0;flex-wrap:wrap}
nav.primary a{text-decoration:none;color:var(--accent);font-size:.92rem;font-weight:600}
nav.primary a:hover{color:var(--accent-dark)}
nav.primary a[aria-current="page"]{color:var(--ink);border-bottom:2px solid var(--accent)}
.lang-switch{display:flex;margin-left:1em;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.lang-switch a{font-size:.8rem;font-weight:600;text-decoration:none;padding:.3em .6em;color:var(--ink-soft);border-left:1px solid var(--line)}
.lang-switch a:first-child{border-left:none}
.lang-switch a:hover{color:var(--accent);background:var(--accent-soft)}
.nav-toggle{display:none}
.nav-toggle-label{display:none;cursor:pointer;border:1px solid var(--line);border-radius:var(--r-sm);padding:.4em .7em;font-size:.85rem}
@media (max-width:760px){
  nav.primary{display:none;width:100%}
  .nav-toggle:checked ~ nav.primary{display:block}
  nav.primary ul{flex-direction:column;gap:.8em;padding:1em 0}
  .nav-toggle-label{display:inline-block}
  .nav-row{flex-wrap:wrap}
}

/* Secondary nav: four business lines, shown on every page */
nav.lines{border-bottom:1px solid var(--line);background:var(--paper);overflow-x:auto}
nav.lines .container{display:flex;gap:0;padding:0 20px}
nav.lines a{white-space:nowrap;padding:.9em .1em;margin-right:1.6em;font-size:.85rem;font-weight:600;color:var(--ink-soft);text-decoration:none;border-bottom:2px solid transparent}
nav.lines a:hover{color:var(--accent)}
nav.lines a[aria-current="true"]{color:var(--accent);border-bottom-color:var(--accent)}

/* Tertiary tabs: sub-pages within one business line (e.g. Overview / Verhulsdonck / Method) */
nav.subtabs{border-bottom:1px solid var(--line)}
nav.subtabs .container{display:flex;gap:1.6em;padding:0 20px;overflow-x:auto}
nav.subtabs a{white-space:nowrap;padding:.8em .05em;font-size:.85rem;color:var(--ink-soft);text-decoration:none;border-bottom:2px solid transparent}
nav.subtabs a:hover{color:var(--accent)}
nav.subtabs a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

/* Org chart: QWASP B.V. at the top, four business lines below, in one glance */
.orgchart{padding:8px 0 0;text-align:center}
.org-root{display:inline-block;background:var(--accent);color:#fff;font-weight:700;font-size:.95rem;letter-spacing:.03em;padding:.8em 1.6em;border-radius:var(--r-md);box-shadow:var(--shadow-md)}
.org-children{display:flex;justify-content:center;flex-wrap:wrap;border-top:2px solid var(--line);margin-top:26px;padding-top:26px}
.org-node{position:relative;flex:1 1 220px;max-width:250px;margin:0 12px 20px;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--r-md);padding:1.1em 1em;text-decoration:none;color:var(--ink);text-align:center;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease}
.org-node:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.org-node::before{content:"";position:absolute;top:-26px;left:50%;width:2px;height:26px;background:var(--line)}
.org-node .icon{font-size:1.5rem;display:block;margin-bottom:.4em}
.org-node strong{display:block;font-size:.95rem;margin-bottom:.3em}
.org-node span.sub{display:block;font-size:.78rem;color:var(--ink-soft);line-height:1.4}
@media (max-width:680px){
  .org-children{flex-direction:column;align-items:center;border-top:none;margin-top:16px;padding-top:0}
  .org-node{margin:14px 0 0}
  .org-node::before{top:-14px;height:14px}
}

/* Hero */
.hero{padding:64px 0 48px;border-bottom:1px solid var(--line)}
.hero .container{display:grid;grid-template-columns:1fr;gap:2.4em;align-items:center}
.hero .eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--accent);font-weight:600;margin-bottom:.8em}
.hero p.lead{font-size:1.15rem;color:var(--ink-soft);max-width:56ch}
.hero-actions{display:flex;gap:.8em;flex-wrap:wrap;margin-top:1.4em}
.hero-graphic{width:100%;max-width:320px;height:auto;justify-self:center}
@media (min-width:860px){
  .hero .container{grid-template-columns:1.3fr 1fr}
  .hero-graphic{justify-self:end}
}

/* Soft cascade-in on page load: CSS only, no scroll detection (no JS).
   Respects reduced-motion; see ADR-0006. */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
  section{animation:fade-up .5s ease-out both}
  section:nth-of-type(1){animation-delay:0s}
  section:nth-of-type(2){animation-delay:.08s}
  section:nth-of-type(3){animation-delay:.16s}
  section:nth-of-type(4){animation-delay:.24s}
  section:nth-of-type(5){animation-delay:.32s}
  section:nth-of-type(n+6){animation-delay:.38s}
}
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.btn{display:inline-block;padding:.65em 1.2em;border-radius:var(--r-md);text-decoration:none;font-size:.92rem;font-weight:600;border:1px solid var(--accent);transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn-ghost{color:var(--accent);background:transparent}
.btn-ghost:hover{background:var(--accent-soft);transform:translateY(-1px)}
.btn-external::after{content:" ↗";font-weight:400}

section{padding:44px 0}
section.tight{padding:28px 0}
section.alt{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Cards / grid */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--r-md);padding:24px;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.card .icon{font-size:1.7rem;line-height:1;display:block;margin-bottom:.6em}
.card h3{margin-top:0}
.card .meta{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:.6em}
.card a.card-link{display:inline-block;font-size:.9rem;font-weight:600;text-decoration:none;transition:transform .15s ease}
.card:hover a.card-link{transform:translateX(3px)}

/* History / roadmap timeline: vertical stack of cards, subtle connecting line */
.history-timeline{display:flex;flex-direction:column;gap:20px;position:relative;padding-left:22px;border-left:2px solid var(--line)}
.history-timeline .card{position:relative}
.history-timeline .card::before{content:"";position:absolute;left:-29px;top:28px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.history-timeline .card .tag{margin-bottom:.6em;display:inline-block}
.history-timeline .card .meta:last-child{margin-top:.6em;margin-bottom:0;text-transform:none;letter-spacing:normal;font-style:italic}

.tag{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;padding:.2em .6em;border-radius:var(--r-sm);border:1px solid var(--line);color:var(--ink-soft);margin:0 .4em .4em 0}
.tag-current{border-color:var(--accent);color:var(--accent)}
.tag-target{border-color:#8a6d2a;color:#8a6d2a}
.tag-research{border-color:#6a6a6a;color:var(--ink-soft)}

.status-note{font-size:.85rem;color:var(--ink-soft);background:var(--paper);border-left:3px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:.8em 1em;margin:1em 0}
section.alt .status-note{background:var(--paper)}

.breadcrumbs{font-size:.8rem;color:var(--ink-soft);margin-bottom:1em}
.breadcrumbs a{color:var(--ink-soft)}

footer.site{border-top:1px solid var(--line);padding:36px 0;font-size:.85rem;color:var(--ink-soft)}
footer.site .grid{margin-bottom:1.2em}
footer.site a{color:var(--ink-soft)}
footer.site h4{color:var(--ink);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;font-family:inherit;font-weight:600}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:.4em}

table{border-collapse:collapse;width:100%;margin:1em 0}
th,td{text-align:left;padding:.5em .7em;border-bottom:1px solid var(--line);font-size:.92rem}
th{color:var(--ink-soft);font-weight:600}

blockquote{border-left:3px solid var(--accent);margin:1.4em 0;padding:.2em 0 .2em 1em;color:var(--ink-soft);font-style:italic}

.faq details{border-bottom:1px solid var(--line);padding:.9em 0}
.faq summary{cursor:pointer;font-weight:600}