/* ============================================================
   BRAVIO — Design System
   Eén bron van waarheid voor kleur, type, ruimte en componenten.
   Laad dit bestand op elke pagina (bravio.css) en compose met de
   .b-* classes hieronder. Tokens nooit hardcoden — gebruik var(--*).
   ============================================================ */

/* ---- Fonts (self-hosted, gevuld in stap 4) ----------------- */
@font-face {
  font-family: "Noi Grotesk";
  src: url("assets/fonts/NoiGrotesk-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noi Grotesk";
  src: url("assets/fonts/NoiGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* Kleur — vaste huisstijl, niet wijzigen */
  --petrol:       #018585;  /* primair — accent, knoppen, beeldmerk */
  --deep-petrol:  #012935;  /* donkere secties, footer, ink */
  --mint:         #58C3AE;  /* accent — highlight, hover, dataviz */
  --ice:          #DCF0F6;  /* zachte vlakken, kaarten */
  --cream:        #FCFCF6;  /* paginabasis — nooit hard wit */

  /* Tints (afgeleid, voor borders/vlakken) */
  --petrol-75:    #2f9d9d;
  --petrol-12:    rgba(1,133,133,.12);
  --petrol-06:    rgba(1,133,133,.06);
  --mint-30:      rgba(88,195,174,.30);
  --mint-14:      rgba(88,195,174,.14);
  --deep-70:      rgba(1,41,53,.70);
  --deep-55:      rgba(1,41,53,.55);
  --hairline:     rgba(1,41,53,.12);

  /* Semantisch */
  --ink:          var(--deep-petrol);
  --ink-soft:     var(--deep-55);
  --bg:           var(--cream);
  --link:         var(--petrol);

  /* Type */
  --font: "Noi Grotesk", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --w-light: 300;
  --w-reg:   400;

  /* Type schaal (display klein → groot) */
  --t-eyebrow: .8125rem;   /* 13px */
  --t-body:    1.125rem;   /* 18px */
  --t-lead:    1.375rem;   /* 22px */
  --t-h3:      1.5rem;     /* 24px */
  --t-h2:      2.25rem;    /* 36px */
  --t-h1:      3.25rem;    /* 52px */
  --t-display: 4.5rem;     /* 72px */

  /* Ruimte */
  --s-1: .5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;
  --container: 1200px;

  /* Vorm */
  --r-pill: 999px;
  --r-card: 16px;
  --r-sm:   10px;

  /* Schaduw — zacht, teal-getint, laag */
  --shadow-soft: 0 2px 14px rgba(1,41,53,.06);
  --shadow-card: 0 12px 42px rgba(1,41,53,.08);
  --shadow-pop:  0 20px 60px rgba(1,41,53,.14);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .22s;
}

/* ============================================================
   BASIS
   ============================================================ */
.b-root, body.b-root {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: var(--w-reg);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.b-root *, .b-root *::before, .b-root *::after { box-sizing: border-box; }

.b-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-4); }

/* ============================================================
   TYPOGRAFIE
   Display/koppen = Light (300); kernwoorden zwaarder via <strong>.
   ============================================================ */
.b-eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-reg);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--petrol);
  margin: 0 0 var(--s-2);
  display: inline-flex; align-items: center; gap: .6em;
}
.b-eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--mint);
}

.b-display, .b-h1, .b-h2, .b-h3 {
  font-weight: var(--w-light);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
.b-display { font-size: var(--t-display); }
.b-h1 { font-size: var(--t-h1); }
.b-h2 { font-size: var(--t-h2); }
.b-h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.01em; }

.b-display strong, .b-h1 strong, .b-h2 strong, .b-h3 strong {
  font-weight: var(--w-reg);   /* kernwoord zwaarder, niet bold */
  color: var(--petrol);
}

.b-lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-soft); font-weight: var(--w-light); margin: 0 0 var(--s-3); max-width: 56ch; }
.b-body { font-size: var(--t-body); color: var(--ink); margin: 0 0 var(--s-2); }
.b-body--muted { color: var(--ink-soft); }
.b-small { font-size: .9375rem; color: var(--ink-soft); }

.b-root a { color: var(--link); text-decoration: none; border-bottom: 1px solid var(--mint-30); transition: border-color var(--dur) var(--ease); }
.b-root a:hover { border-color: var(--mint); }

/* ============================================================
   SECTIE-SHELLS
   ============================================================ */
.b-section { padding-block: var(--s-6); }
.b-section--cream { background: var(--cream); }
.b-section--ice   { background: var(--ice); }
.b-section--dark  { background: var(--deep-petrol); color: var(--cream); }
.b-section--dark .b-display,
.b-section--dark .b-h1,
.b-section--dark .b-h2,
.b-section--dark .b-h3 { color: var(--cream); }
.b-section--dark .b-display strong,
.b-section--dark .b-h1 strong,
.b-section--dark .b-h2 strong { color: var(--mint); }
.b-section--dark .b-lead,
.b-section--dark .b-body { color: rgba(252,252,246,.78); }
.b-section--dark .b-eyebrow { color: var(--mint); }

/* ============================================================
   NAV
   ============================================================ */
.b-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-2); }
.b-nav__brand { display: flex; align-items: center; }
.b-nav__brand img { height: 34px; width: auto; display: block; }
.b-nav__links { display: flex; align-items: center; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.b-nav__links a:not(.b-btn) { color: var(--ink); border-bottom: 0; font-size: 1rem; transition: color var(--dur) var(--ease); }
.b-nav__links a:not(.b-btn):hover { color: var(--petrol); }
.b-nav--on-dark .b-nav__links a:not(.b-btn) { color: rgba(252,252,246,.82); }
.b-nav--on-dark .b-nav__links a:not(.b-btn):hover { color: var(--mint); }
.b-nav__links a.b-btn { border-bottom: 0; }

/* ============================================================
   KNOPPEN — pill, Regular caps niet vereist (zinvolle labels)
   ============================================================ */
.b-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font); font-weight: var(--w-reg); font-size: 1.0625rem;
  line-height: 1; padding: .95em 1.7em; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.b-btn svg { width: 1.1em; height: 1.1em; }
.b-btn.b-btn--primary { background: var(--petrol); color: var(--cream); }
.b-btn.b-btn--primary:hover { background: var(--deep-petrol); transform: translateY(-1px); }
.b-btn.b-btn--ghost { background: transparent; color: var(--petrol); border-color: var(--petrol); }
.b-btn.b-btn--ghost:hover { background: var(--petrol-06); border-color: var(--deep-petrol); color: var(--deep-petrol); }
.b-btn.b-btn--on-dark { background: var(--cream); color: var(--deep-petrol); }
.b-btn.b-btn--on-dark:hover { background: var(--mint); color: var(--deep-petrol); transform: translateY(-1px); }
.b-btn.b-btn--ghost-light { background: transparent; color: var(--cream); border-color: rgba(252,252,246,.55); }
.b-btn.b-btn--ghost-light:hover { border-color: var(--mint); color: var(--mint); }

/* ============================================================
   BADGES
   ============================================================ */
.b-badge {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .45em .85em; border-radius: var(--r-pill);
}
.b-badge--ice  { background: var(--ice); color: var(--petrol); }
.b-badge--mint { background: var(--mint-14); color: var(--deep-petrol); }
.b-badge--outline { background: transparent; border: 1px solid var(--hairline); color: var(--ink-soft); }
.b-badge--dark { background: rgba(252,252,246,.10); color: var(--mint); }

/* ============================================================
   DIAMANT-DIVIDER
   ============================================================ */
.b-divider { display: flex; align-items: center; gap: var(--s-3); width: 100%; }
.b-divider::before, .b-divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.b-divider__gem { width: 22px; height: 22px; flex: none; }
.b-section--dark .b-divider::before, .b-section--dark .b-divider::after { background: rgba(252,252,246,.18); }

/* ============================================================
   KAART (generiek)
   ============================================================ */
.b-card {
  background: var(--cream); border: 1px solid var(--hairline);
  border-radius: var(--r-card); padding: var(--s-4);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.b-card--ice { background: var(--ice); border-color: transparent; }
.b-card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.b-card__title { font-size: var(--t-h3); font-weight: var(--w-light); margin: 0 0 var(--s-2); letter-spacing: -.01em; }

/* ============================================================
   PAKKETKAART
   ============================================================ */
.b-package {
  display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--cream); border: 1px solid var(--hairline);
  border-radius: var(--r-card); padding: var(--s-4);
  box-shadow: var(--shadow-soft); height: 100%;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.b-package:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--mint-30); }
.b-package--ice { background: var(--ice); border-color: transparent; }
.b-package__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.b-package__name { font-size: var(--t-h3); font-weight: var(--w-light); letter-spacing: -.01em; margin: 0; }
.b-package__deliver { display: flex; gap: .7em; align-items: flex-start; color: var(--ink); margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--hairline); }
.b-package__deliver svg { width: 20px; height: 20px; color: var(--petrol); flex: none; margin-top: 2px; }
.b-package__deliver-label { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: .2em; }

/* ============================================================
   DRIELUIK (Slim / Strak / Geborgd)
   ============================================================ */
.b-triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.b-pillar { display: flex; flex-direction: column; gap: var(--s-2); }
.b-pillar__icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--ice); color: var(--petrol); margin-bottom: var(--s-1); }
.b-pillar__icon svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.b-pillar__title { font-size: var(--t-h3); font-weight: var(--w-light); margin: 0; letter-spacing: -.01em; }
.b-section--dark .b-pillar__icon { background: rgba(88,195,174,.14); color: var(--mint); }

/* ============================================================
   STATEMENT-BLOK (grote quote / belofte)
   ============================================================ */
.b-statement { max-width: 22ch; }
.b-statement__quote { font-size: var(--t-h1); font-weight: var(--w-light); line-height: 1.1; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.b-statement__quote strong { font-weight: var(--w-reg); color: var(--petrol); }
.b-section--dark .b-statement__quote strong { color: var(--mint); }

/* ============================================================
   STAT-BLOK (één hard cijfer)
   ============================================================ */
.b-stat { display: flex; flex-direction: column; gap: .25em; }
.b-stat__num { font-size: clamp(3.5rem, 8vw, 5.5rem); font-weight: var(--w-light); line-height: .95; letter-spacing: -.03em; color: var(--petrol); }
.b-section--dark .b-stat__num { color: var(--mint); }
.b-stat__label { font-size: var(--t-lead); font-weight: var(--w-light); color: var(--ink-soft); max-width: 30ch; }
.b-section--dark .b-stat__label { color: rgba(252,252,246,.78); }

/* ============================================================
   TEAMKAART (z/w portret)
   ============================================================ */
.b-team-card { display: flex; flex-direction: column; gap: var(--s-2); }
.b-team-card__photo {
  aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden;
  background: linear-gradient(150deg, #dfe6e8, #c6d2d6);
  display: grid; place-items: center; position: relative;
}
.b-team-card__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); display: block; }
.b-team-card__ph { color: var(--deep-55); display: flex; flex-direction: column; align-items: center; gap: .5em; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; }
.b-team-card__ph svg { width: 34px; height: 34px; stroke: currentColor; stroke-width: 1.4; fill: none; }
.b-team-card__name { font-size: var(--t-h3); font-weight: var(--w-light); margin: var(--s-1) 0 0; letter-spacing: -.01em; }
.b-team-card__role { color: var(--petrol); font-size: 1rem; }
.b-team-card__cred { color: var(--ink-soft); font-size: 1rem; margin: .3em 0 0; }

/* ============================================================
   HERO
   ============================================================ */
.b-hero { position: relative; overflow: hidden; background: var(--deep-petrol); color: var(--cream); padding-block: var(--s-6); min-height: 78vh; display: flex; align-items: center; }
.b-hero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: .9; }
.b-hero__scrim { position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(120% 90% at 75% 30%, rgba(1,133,133,.35), transparent 60%),
  linear-gradient(90deg, rgba(1,41,53,.92) 0%, rgba(1,41,53,.72) 45%, rgba(1,41,53,.30) 100%); }
.b-hero__ribbon { position: absolute; inset: 0; z-index: 1; opacity: .5; pointer-events: none; }
.b-hero .b-container { position: relative; z-index: 2; }
.b-hero__inner { max-width: 60ch; }
.b-hero .b-display { color: var(--cream); }
.b-hero .b-display strong { color: var(--mint); }
.b-hero__sub { font-size: var(--t-lead); font-weight: var(--w-light); color: rgba(252,252,246,.85); max-width: 52ch; margin: 0 0 var(--s-4); }
.b-hero__cta { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ============================================================
   FOOTER (CTA op deep petrol)
   ============================================================ */
.b-footer { background: var(--deep-petrol); color: var(--cream); padding-block: var(--s-6) var(--s-4); }
.b-footer__cta { max-width: 30ch; }
.b-footer__cta .b-h2 { color: var(--cream); }
.b-footer__cta .b-h2 strong { color: var(--mint); }
.b-footer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid rgba(252,252,246,.18); color: rgba(252,252,246,.6); font-size: .9375rem; }
.b-footer__bar img { height: 30px; width: auto; }
.b-footer__contact { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.b-footer__contact a { color: rgba(252,252,246,.85); border-bottom-color: rgba(88,195,174,.4); }
.b-footer__contact a:hover { color: var(--mint); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 880px) {
  :root { --t-display: 3rem; --t-h1: 2.4rem; --t-h2: 1.9rem; }
  .b-triptych { grid-template-columns: 1fr; }
  .b-container { padding-inline: var(--s-3); }
  .b-nav__links { display: none; }
}