/* ==== Fonts (optioneel via Google Fonts) ==== */
/* <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> */

:root{
  /* Brand palette (van jou) */
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --surface-alt: #F4F4F2;

  --text: #111111;
  --text-secondary: #4B4B4B;
  --text-muted: #8A8A8A;
  --fqg-header-h: 114px; /* dubbele navbar hoogte (pas aan naar jouw header) */

  --gold: #C3922E;
  --gold-hover: #B88724;
  --gold-soft: #F6EED8;
  --gold-border: #E6D4A3;

  --border: #E5E5E3;
  --shadow-soft: 0 10px 30px rgba(0,0,0,.06);
  --radius: 16px;

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --lh-tight: 1.12;
  --lh-normal: 1.55;

  /* Fluid type scale (responsive zonder media queries) */
  --h1: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);   /* 36 → 56 */
  --h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.6rem);  /* 28 → 42 */
  --h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.7rem);   /* 20 → 27 */
  --h4: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);   /* 16.8 → 20 */

  --p:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);     /* 16 → 17.6 */
  --sm: clamp(0.9rem, 0.88rem + 0.1vw, 0.98rem);  /* 14.4 → 15.7 */
}

/* ==== Base ==== */
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Containers / spacing helpers (clean layout) */
.container{
  width: min(1120px, calc(100% - 48px));
  margin-inline: auto;
}
.section{
  padding: clamp(56px, 6vw, 104px) 0; /* responsive spacing */
}
.section--alt{ background: var(--surface-alt); }

/* ==== Headings ==== */
h1,h2,h3,h4{
  margin: 0 0 0.6em 0;
  letter-spacing: -0.02em; /* clean premium */
  font-weight: 600;
  line-height: var(--lh-tight);
}
h1{ font-size: var(--h1); letter-spacing: -0.035em; }
h2{ font-size: var(--h2); }
h3{ font-size: var(--h3); }
h4{ font-size: var(--h4); font-weight: 600; letter-spacing: -0.015em; }

/* ==== Paragraphs & text ==== */
p{
  margin: 0 0 1em 0;
  font-size: var(--p);
  color: var(--text-secondary);
}
.lead{
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
  color: var(--text-secondary);
  max-width: 60ch;
}
.small{
  font-size: var(--sm);
  color: var(--text-muted);
}
.eyebrow{
  font-size: var(--sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* ==== Links ==== */
a{
  color: var(--text);
  text-decoration: none;
  text-underline-offset: 4px;
}
a:hover{ color: var(--gold-hover); }
.link{
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: var(--gold-border);
}
.link:hover{ color: var(--gold-hover); }

/* ==== Buttons (clean) ==== */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ transform: translateY(-1px); border-color: #d9d9d7; }

.btn--primary{
  background: var(--gold);
  border-color: var(--gold);
  color: #111111;
}
.btn--primary:hover{
  background: var(--gold-hover);
  border-color: var(--gold-hover);
}

.btn--ghost{
  background: transparent;
  border-color: transparent;
  color: var(--text);
}
.btn--ghost:hover{ background: rgba(0,0,0,0.04); }

/* ==== Cards (voor merken / blocks) ==== */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(18px, 2.2vw, 28px);
}