/* Westkoop — site.css. Waarden komen uit het Westkoop Design System (tokens.json). */
@font-face { font-family:"Archivo"; src:url("../fonts/Archivo-Variable.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Instrument Serif"; src:url("../fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Instrument Serif"; src:url("../fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
:root {
  --steen: #e7e5df;
  --kalk: #f4f3ef;
  --wit: #ffffff;
  --inkt: #121412;
  --grafiet: #1e211f;
  --grijs: #5a5e5b;
  --groen: #2e6b4a;
  --groen-licht: #a8d5a0;
  --surface: var(--steen);
  --surface-alt: var(--kalk);
  --surface-raised: var(--wit);
  --surface-inverse: var(--inkt);
  --surface-inverse-raised: var(--grafiet);
  --ink: var(--inkt);
  --ink-muted: var(--grijs);
  --ink-inverse: #f3f2ee;
  --ink-inverse-muted: #a4a9a5;
  --line: #cfccc4;
  --line-strong: #7b7f7c;
  --brand: var(--inkt);
  --on-brand: #f3f2ee;
  --brand-inverse: #f3f2ee;
  --on-brand-inverse: var(--inkt);
  --accent: var(--groen);
  --accent-inverse: var(--groen-licht);
  --link: var(--inkt);
  --focus: var(--groen);
  --shadow-nav: 0 1px 2px #1214120f, 0 8px 24px #12141214;
  --focus-ring: 0 0 0 2px #e7e5df, 0 0 0 4px #2e6b4a;
  --focus-ring-inverse: 0 0 0 2px #121412, 0 0 0 4px #a8d5a0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-24: 96px;
  --space-40: 160px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-icon: 22%;
  --radius-full: 9999px;
  --font-sans: Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
}
.display { font-family:var(--font-sans); font-size:88px; line-height:88px; font-weight:500; letter-spacing:-0.04em; }
.h1 { font-family:var(--font-sans); font-size:56px; line-height:60px; font-weight:500; letter-spacing:-0.03em; }
.h2 { font-family:var(--font-sans); font-size:36px; line-height:42px; font-weight:500; letter-spacing:-0.02em; }
.h3 { font-family:var(--font-sans); font-size:22px; line-height:28px; font-weight:500; letter-spacing:-0.01em; }
.label { font-family:var(--font-sans); font-size:12px; line-height:16px; font-weight:500; letter-spacing:0.08em; }
.serif-display { font-family:var(--font-serif); font-size:64px; line-height:66px; font-weight:400; letter-spacing:-0.01em; }
.body-lg { font-family:var(--font-sans); font-size:20px; line-height:30px; font-weight:400; letter-spacing:-0.005em; }
.body { font-family:var(--font-sans); font-size:16px; line-height:25px; font-weight:400; }
.body-strong { font-family:var(--font-sans); font-size:16px; line-height:25px; font-weight:500; }
.small { font-family:var(--font-sans); font-size:14px; line-height:21px; font-weight:400; }
.caption { font-family:var(--font-sans); font-size:12px; line-height:17px; font-weight:400; }

  * { box-sizing:border-box; }
  html, body { margin:0; }
  body { background:var(--surface); color:var(--ink); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; }
  h1, h2, h3, p, ul, dl, dd { margin:0; padding:0; }
  a { color:inherit; }
  .page { position:relative; overflow:hidden; }
  .wrap { max-width:1280px; margin:0 auto; padding:0 var(--space-8); }
  .label { text-transform:uppercase; }
  .muted { color:var(--ink-muted); }

  /* ---------- loader ---------- */
  .loader { display:none; }
  .js .loader { position:absolute; inset:0 0 auto 0; height:min(100vh, 860px); z-index:20; background:var(--surface-inverse); color:var(--ink-inverse);
            display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-6);
            transition:transform 1000ms cubic-bezier(.76,0,.24,1); }
  .js.seen .loader { display:none; }
  .loader.done { transform:translateY(-101%); }
  .loader svg.route { width:96px; height:96px; overflow:visible; }
  .loader .count { position:absolute; bottom:var(--space-8); left:0; right:0; text-align:center; color:var(--ink-inverse-muted); font-variant-numeric:tabular-nums; }
  .loader .lw { opacity:0; transform:translateY(8px); transition:opacity 600ms, transform 600ms cubic-bezier(.16,1,.3,1); }
  .loader.show-word .lw { opacity:1; transform:none; }

  /* ---------- header ---------- */
  header { position:absolute; top:0; left:0; right:0; z-index:10; }
  header .wrap { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:96px; }
  .navpill { display:flex; gap:var(--space-1); padding:6px; border-radius:var(--radius-full); background:#f4f3efcc; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:var(--shadow-nav); }
  .navpill a { text-decoration:none; padding:8px 16px; border-radius:var(--radius-full); transition:background 200ms; }
  .navpill a:hover { background:var(--surface); }
  .tools { justify-self:end; display:flex; gap:var(--space-2); align-items:center; }
  .lang { display:flex; padding:4px; border-radius:var(--radius-full); border:1px solid var(--line); }
  .lang a { color:var(--ink); text-decoration:none; padding:6px 12px; border-radius:var(--radius-full); }
  .lang a[aria-current="true"] { background:var(--brand); color:var(--on-brand); }
  a:focus-visible { outline:none; box-shadow:var(--focus-ring); }

  /* ---------- reveal ---------- */
  .rv .w { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em; }
  .rv .w > span { display:inline-block; transform:translateY(110%); transition:transform 900ms cubic-bezier(.16,1,.3,1); transition-delay:var(--d,0ms); }
  .rv.in .w > span { transform:none; }
  .js .fade { opacity:0; transform:translateY(16px); transition:opacity 900ms cubic-bezier(.16,1,.3,1), transform 900ms cubic-bezier(.16,1,.3,1); transition-delay:var(--d,0ms); }
  .js .fade.in { opacity:1; transform:none; }
  .ink-rv .w > span { color:#bdbab2; transition:color 500ms ease; transition-delay:var(--d,0ms); }
  .ink-rv.in .w > span { color:var(--ink); }

  /* ---------- hero ---------- */
  .hero { padding:220px 0 var(--space-12); text-align:center; }
  .hero .label { color:var(--accent); margin-bottom:var(--space-6); }
  .hero h1 { font-size:104px; line-height:100px; max-width:1060px; margin:0 auto; }
  .hero .intro { max-width:640px; margin:var(--space-8) auto var(--space-8); color:var(--ink-muted); }
  .ctas { display:flex; gap:var(--space-3); justify-content:center; align-items:center; flex-wrap:wrap; }
  .pill { display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:var(--radius-full); text-decoration:none; font-size:16px; line-height:24px; font-weight:500; transition:transform 200ms, background 200ms; }
  .pill .arr { display:inline-block; transition:transform 200ms cubic-bezier(.16,1,.3,1); }
  .pill:hover .arr { transform:translateX(4px); }
  .pill-dark { background:var(--brand); color:var(--on-brand); }
  .pill-light { background:var(--brand-inverse); color:var(--on-brand-inverse); }
  .pill-line { border:1px solid var(--line-strong); color:var(--ink); }
  .pill-line:hover { background:var(--surface-alt); }

  /* ---------- route ---------- */
  .route-band { padding:var(--space-12) 0 var(--space-24); }
  .route-band svg { display:block; width:100%; height:auto; overflow:visible; }
  .route-path { fill:none; stroke:var(--ink); stroke-width:2; stroke-dasharray:var(--len); stroke-dashoffset:var(--len); transition:stroke-dashoffset 1800ms cubic-bezier(.65,0,.35,1); }
  .route-band.in .route-path { stroke-dashoffset:0; }
  .route-start { fill:var(--ink); }
  .route-end { fill:var(--accent); transform-box:fill-box; transform-origin:center; transition:transform 500ms cubic-bezier(.16,1,.3,1) 1700ms; }
  .js .route-end { transform:scale(0); }
  .js .route-band.in .route-end { transform:scale(1); }
  .runner { fill:var(--accent); opacity:0; }
  .route-txt { font-family:var(--font-sans); font-size:14px; fill:var(--ink-muted); letter-spacing:.08em; text-transform:uppercase; }
  .route-cap { text-align:center; margin-top:var(--space-6); color:var(--ink-muted); }

  /* ---------- marquee ---------- */
  .marquee { border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:var(--space-6) 0; }
  .track { display:flex; width:max-content; animation:slide 48s linear infinite; }
  .track span { font-size:64px; line-height:72px; font-weight:500; letter-spacing:-.03em; white-space:nowrap; padding-right:var(--space-8); }
  .track i { font-style:normal; color:var(--accent); }
  @keyframes slide { to { transform:translateX(-50%); } }

  /* ---------- statement ---------- */
  .statement { padding:var(--space-40) 0 var(--space-24); text-align:center; }
  .statement p { font-size:52px; line-height:60px; font-weight:500; letter-spacing:-.025em; max-width:1040px; margin:0 auto; }

  /* ---------- principles ---------- */
  .principles .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-8); }
  .principles .item { border-top:1px solid var(--ink); padding-top:var(--space-6); }
  .principles .num { color:var(--accent); margin-bottom:var(--space-12); }
  .principles .h3 { margin-bottom:var(--space-2); }

  /* ---------- Plants by Frank ---------- */
  .pbf { padding:var(--space-24) 0; }
  .panel { position:relative; background:var(--surface-inverse); color:var(--ink-inverse); border-radius:var(--radius-lg); overflow:hidden; display:grid; grid-template-columns:1.05fr 1fr; min-height:600px; }
  .panel .txt { padding:var(--space-24) var(--space-12); display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-12); position:relative; z-index:1; }
  .panel .label { color:var(--accent-inverse); margin-bottom:var(--space-6); }
  .panel .serif-display { font-size:96px; line-height:92px; }
  .panel .serif-display em { font-style:italic; }
  .panel .line { margin-top:var(--space-6); max-width:440px; }
  .panel .sub { color:var(--ink-inverse-muted); margin-top:var(--space-3); max-width:440px; }
  .field { position:relative; display:grid; grid-template-columns:repeat(12, 1fr); align-content:center; gap:22px 0; padding:var(--space-12) var(--space-8); }
  .field b { width:10px; height:10px; border-radius:50%; background:#3a3f3b; justify-self:center; animation:grow 4.8s cubic-bezier(.45,0,.55,1) infinite; animation-delay:var(--d); }
  @keyframes grow { 0%, 55%, 100% { transform:scale(1); background:#3a3f3b; } 22% { transform:scale(2.1); background:var(--accent-inverse); } }

  /* ---------- contact ---------- */
  .contact { padding:var(--space-12) 0 var(--space-24); }
  .contact .grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-12); align-items:end; border-top:1px solid var(--line); padding-top:var(--space-12); }
  .contact .label { color:var(--accent); margin-bottom:var(--space-6); }
  .contact .lead { margin-top:var(--space-6); max-width:460px; color:var(--ink-muted); }
  .mail { font-size:44px; line-height:52px; font-weight:500; letter-spacing:-.025em; text-decoration:none; background:linear-gradient(var(--accent),var(--accent)) 0 100% / 100% 2px no-repeat; padding-bottom:4px; transition:background-size 300ms cubic-bezier(.16,1,.3,1); }
  .mail:hover { background-size:0 2px; background-position:100% 100%; }
  .contact dl { display:grid; grid-template-columns:120px 1fr; row-gap:var(--space-3); margin-top:var(--space-8); }
  .contact dt { color:var(--ink-muted); }
  .contact a.tel { text-decoration:none; }

  /* ---------- footer ---------- */
  footer { padding:0 0 var(--space-8); }
  footer .row { display:flex; justify-content:space-between; align-items:center; padding:var(--space-6) 0; border-top:1px solid var(--line); }
  footer .links { display:flex; gap:var(--space-6); }
  footer .links a { text-decoration:none; }
  .bigword-wrap { padding-top:var(--space-6); overflow:hidden; }
  .js .bigword-wrap .bigword { transform:translateY(100%); transition:transform 1200ms cubic-bezier(.16,1,.3,1); }
  .js .bigword-wrap.in .bigword { transform:none; }

  @media (prefers-reduced-motion: reduce) {
    .loader { display:none; }
    .rv .w > span, .fade, .route-path, .route-end, .bigword-wrap .bigword { transition:none !important; transform:none !important; opacity:1 !important; stroke-dashoffset:0 !important; }
    .ink-rv .w > span { color:var(--ink) !important; }
    .track, .field b { animation:none; }
  }

  /* ---------- tekstpagina's (privacy, 404) ---------- */
  .doc { max-width:760px; margin:0 auto; padding:180px var(--space-8) var(--space-24); }
  .doc h1 { margin-bottom:var(--space-8); }
  .doc h2 { margin:var(--space-12) 0 var(--space-3); }
  .doc p, .doc li { margin-bottom:var(--space-3); color:var(--ink); }
  .doc ul { padding-left:1.2em; }
  .doc .meta { color:var(--ink-muted); }
  .doc a { text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:3px; }
  .notfound { min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:var(--space-6); padding:160px var(--space-8) var(--space-12); }
  footer .legal { display:flex; gap:var(--space-4); flex-wrap:wrap; color:var(--ink-muted); }
  footer .legal a { text-decoration:none; }

  @media (max-width: 900px) {
    .wrap { padding:0 var(--space-4); }
    header .wrap { grid-template-columns:1fr auto; height:72px; }
    header .navpill { display:none; }
    header .home svg { height:22px !important; }
    .hero { padding-top:150px; }
    .hero h1 { font-size:48px; line-height:50px; }
    .track span { font-size:40px; line-height:48px; }
    .statement { padding:var(--space-24) 0; }
    .statement p { font-size:30px; line-height:36px; }
    .principles .grid, .contact .grid, .panel { grid-template-columns:1fr; }
    .principles .num { margin-bottom:var(--space-6); }
    .panel .txt { padding:var(--space-12) var(--space-6); }
    .panel .serif-display { font-size:60px; line-height:58px; }
    .field { min-height:240px; padding:var(--space-6); gap:16px 0; }
    .mail { font-size:26px; line-height:34px; }
    .contact dl { grid-template-columns:90px 1fr; }
    footer .row { flex-direction:column; align-items:flex-start; gap:var(--space-3); }
    .doc { padding:130px var(--space-4) var(--space-24); }
  }