/* =========================================================
   Heijman Consultancy — GLOBAL STYLES
   Shared across every page: tokens, base, buttons, nav, footer.
   Link this first, then a page-specific stylesheet (e.g. index.css).

   PALETTE — deliberately minimal, only the original site colours:
     white  #ffffff   (page background)
     taupe  #ded6d3   (accent section blocks)
     ink    #212529   (text, headings, buttons)
     muted  #6c757d   (secondary text)
   ========================================================= */

:root{
  --paper:#ffffff;
  --sand:#ded6d3;
  --ink:#212529;
  --muted:#6c757d;
  --line:rgba(33,37,41,.14);
  --wrap:1240px;
  --gutter:clamp(1.25rem,5vw,3rem);
  --font-display:"Poppins",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);background:var(--paper);
  font-size:clamp(1rem,.96rem + .2vw,1.08rem);line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
figure{margin:0}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.15;letter-spacing:-.01em;margin:0;color:var(--ink)}
p{margin:0}

/* ---------- Layout helper ---------- */
.wrap{width:min(var(--wrap),100%);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Eyebrow label ---------- */
.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);display:inline-flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--muted)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-body);font-weight:600;font-size:.95rem;
  padding:.85rem 1.5rem;border-radius:3px;border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.btn svg{width:1em;height:1em}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#000;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- Section scaffolding ---------- */
.section{padding:clamp(4rem,9vh,7rem) 0}
.section-head{max-width:760px;margin-bottom:clamp(2.4rem,5vh,3.4rem)}
.section-head h2{font-size:clamp(1.9rem,1.4rem + 2vw,2.9rem);margin-top:1rem}
.section-head p{margin-top:1rem;color:var(--muted);max-width:600px}

/* ---------- Navigation ---------- */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;border-bottom:1px solid transparent}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--ink)}
.brand .mark{width:38px;height:38px;flex:0 0 auto}
.brand-text{display:flex;flex-direction:column;justify-content:center;gap:1px;line-height:1.1}
.brand-name{font-family:var(--font-display);font-weight:600;font-size:.98rem;letter-spacing:.04em;line-height:1.1}
.brand-sub{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.1}
.nav-links{display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0}
.nav-links a{position:relative;color:var(--ink);font-size:.92rem;font-weight:500;padding:.5rem .85rem;border-radius:3px;opacity:.82;transition:opacity .18s ease,background .18s ease}
.nav-links a:hover{opacity:1;background:rgba(33,37,41,.06)}
.nav-links a.current{opacity:1}
.nav-links a.current::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:3px;height:2px;background:var(--ink);border-radius:2px}
.nav-links a.nav-contact{margin-left:.4rem;border:1px solid var(--line);padding:.5rem 1rem;border-radius:3px}
.nav-links a.nav-contact:hover{background:var(--ink);color:#fff!important;opacity:1}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);padding:.4rem;cursor:pointer}
.nav-toggle svg{width:26px;height:26px}
.site-nav.scrolled{background:var(--paper);border-color:var(--line);box-shadow:0 6px 24px rgba(33,37,41,.07)}

/* ---------- Footer ---------- */
.site-footer{background:var(--paper);color:var(--ink);padding:clamp(3rem,6vh,4.5rem) 0 2rem;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:2.5rem}
.footer-brand .brand-name{font-size:1.1rem}
.footer-brand p{color:var(--muted);font-size:.9rem;margin-top:1rem;max-width:280px}
.footer-col h4{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 1.1rem}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.footer-col a,.footer-col li{color:var(--muted);font-size:.92rem;transition:color .15s ease}
.footer-col a:hover{color:var(--ink)}
.footer-bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.82rem;color:var(--muted);font-family:var(--font-mono);letter-spacing:.03em}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Shared responsive (nav + footer) ---------- */
@media(max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .site-nav.open{background:var(--paper);border-color:var(--line)}
  .site-nav.open .nav-links{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:var(--paper);padding:1rem var(--gutter) 1.5rem;gap:.2rem;border-bottom:1px solid var(--line);box-shadow:0 14px 30px rgba(33,37,41,.1)}
  .site-nav.open .nav-links a{padding:.75rem .5rem;opacity:1;font-size:1.05rem}
  .site-nav.open .nav-links a.nav-contact{border:0;margin:0}
  .site-nav.open .nav-links a.current::after{display:none}
}
@media(max-width:520px){
  .footer-grid{grid-template-columns:1fr}
  .brand-sub{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none;opacity:1;transform:none}
  *{transition-duration:.01ms!important}
}