/* ==========================================================================
   Self-hosted fonts (SIL Open Font License) — no external calls (AVG-safe)
   ========================================================================== */
@font-face { font-family:"Playfair Display"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/playfair-500.woff2") format("woff2"); }
@font-face { font-family:"Playfair Display"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/playfair-600.woff2") format("woff2"); }
@font-face { font-family:"Playfair Display"; font-style:italic; font-weight:500; font-display:swap; src:url("fonts/playfair-500-italic.woff2") format("woff2"); }
@font-face { font-family:"Playfair Display"; font-style:italic; font-weight:600; font-display:swap; src:url("fonts/playfair-600-italic.woff2") format("woff2"); }
@font-face { font-family:"Questrial"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/questrial-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/plexmono-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/plexmono-500.woff2") format("woff2"); }

/* ==========================================================================
   Finovatec Finance — website layer  (CPC house style)
   Tokens sampled from Logo_new.png + the CPC portal screenshots.
   Static, build-free, Afrihost-proof.
   ========================================================================== */

:root {
  /* -- hex mesh textures (generated, seamless tile 48 x 27.71) -- */
  --hexmesh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48.00' height='27.71' viewBox='0 0 48.00 27.71'%3E%3Cpath d='M-32.00,-55.43 -40.00,-41.57 -56.00,-41.57 -64.00,-55.43 -56.00,-69.28 -40.00,-69.28Z M-32.00,-27.71 -40.00,-13.86 -56.00,-13.86 -64.00,-27.71 -56.00,-41.57 -40.00,-41.57Z M-32.00,0.00 -40.00,13.86 -56.00,13.86 -64.00,0.00 -56.00,-13.86 -40.00,-13.86Z M-32.00,27.71 -40.00,41.57 -56.00,41.57 -64.00,27.71 -56.00,13.86 -40.00,13.86Z M-32.00,55.43 -40.00,69.28 -56.00,69.28 -64.00,55.43 -56.00,41.57 -40.00,41.57Z M-32.00,83.14 -40.00,96.99 -56.00,96.99 -64.00,83.14 -56.00,69.28 -40.00,69.28Z M-8.00,-41.57 -16.00,-27.71 -32.00,-27.71 -40.00,-41.57 -32.00,-55.43 -16.00,-55.43Z M-8.00,-13.86 -16.00,0.00 -32.00,0.00 -40.00,-13.86 -32.00,-27.71 -16.00,-27.71Z M-8.00,13.86 -16.00,27.71 -32.00,27.71 -40.00,13.86 -32.00,0.00 -16.00,0.00Z M-8.00,41.57 -16.00,55.43 -32.00,55.43 -40.00,41.57 -32.00,27.71 -16.00,27.71Z M-8.00,69.28 -16.00,83.14 -32.00,83.14 -40.00,69.28 -32.00,55.43 -16.00,55.43Z M-8.00,96.99 -16.00,110.85 -32.00,110.85 -40.00,96.99 -32.00,83.14 -16.00,83.14Z M16.00,-55.43 8.00,-41.57 -8.00,-41.57 -16.00,-55.43 -8.00,-69.28 8.00,-69.28Z M16.00,-27.71 8.00,-13.86 -8.00,-13.86 -16.00,-27.71 -8.00,-41.57 8.00,-41.57Z M16.00,0.00 8.00,13.86 -8.00,13.86 -16.00,0.00 -8.00,-13.86 8.00,-13.86Z M16.00,27.71 8.00,41.57 -8.00,41.57 -16.00,27.71 -8.00,13.86 8.00,13.86Z M16.00,55.43 8.00,69.28 -8.00,69.28 -16.00,55.43 -8.00,41.57 8.00,41.57Z M16.00,83.14 8.00,96.99 -8.00,96.99 -16.00,83.14 -8.00,69.28 8.00,69.28Z M40.00,-41.57 32.00,-27.71 16.00,-27.71 8.00,-41.57 16.00,-55.43 32.00,-55.43Z M40.00,-13.86 32.00,0.00 16.00,0.00 8.00,-13.86 16.00,-27.71 32.00,-27.71Z M40.00,13.86 32.00,27.71 16.00,27.71 8.00,13.86 16.00,0.00 32.00,0.00Z M40.00,41.57 32.00,55.43 16.00,55.43 8.00,41.57 16.00,27.71 32.00,27.71Z M40.00,69.28 32.00,83.14 16.00,83.14 8.00,69.28 16.00,55.43 32.00,55.43Z M40.00,96.99 32.00,110.85 16.00,110.85 8.00,96.99 16.00,83.14 32.00,83.14Z M64.00,-55.43 56.00,-41.57 40.00,-41.57 32.00,-55.43 40.00,-69.28 56.00,-69.28Z M64.00,-27.71 56.00,-13.86 40.00,-13.86 32.00,-27.71 40.00,-41.57 56.00,-41.57Z M64.00,0.00 56.00,13.86 40.00,13.86 32.00,0.00 40.00,-13.86 56.00,-13.86Z M64.00,27.71 56.00,41.57 40.00,41.57 32.00,27.71 40.00,13.86 56.00,13.86Z M64.00,55.43 56.00,69.28 40.00,69.28 32.00,55.43 40.00,41.57 56.00,41.57Z M64.00,83.14 56.00,96.99 40.00,96.99 32.00,83.14 40.00,69.28 56.00,69.28Z M88.00,-41.57 80.00,-27.71 64.00,-27.71 56.00,-41.57 64.00,-55.43 80.00,-55.43Z M88.00,-13.86 80.00,0.00 64.00,0.00 56.00,-13.86 64.00,-27.71 80.00,-27.71Z M88.00,13.86 80.00,27.71 64.00,27.71 56.00,13.86 64.00,0.00 80.00,0.00Z M88.00,41.57 80.00,55.43 64.00,55.43 56.00,41.57 64.00,27.71 80.00,27.71Z M88.00,69.28 80.00,83.14 64.00,83.14 56.00,69.28 64.00,55.43 80.00,55.43Z M88.00,96.99 80.00,110.85 64.00,110.85 56.00,96.99 64.00,83.14 80.00,83.14Z M112.00,-55.43 104.00,-41.57 88.00,-41.57 80.00,-55.43 88.00,-69.28 104.00,-69.28Z M112.00,-27.71 104.00,-13.86 88.00,-13.86 80.00,-27.71 88.00,-41.57 104.00,-41.57Z M112.00,0.00 104.00,13.86 88.00,13.86 80.00,0.00 88.00,-13.86 104.00,-13.86Z M112.00,27.71 104.00,41.57 88.00,41.57 80.00,27.71 88.00,13.86 104.00,13.86Z M112.00,55.43 104.00,69.28 88.00,69.28 80.00,55.43 88.00,41.57 104.00,41.57Z M112.00,83.14 104.00,96.99 88.00,96.99 80.00,83.14 88.00,69.28 104.00,69.28Z' fill='none' stroke='%2317535F' stroke-width='1.0' stroke-opacity='0.55'/%3E%3C/svg%3E");
  --hexmesh-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48.00' height='27.71' viewBox='0 0 48.00 27.71'%3E%3Cpath d='M-32.00,-55.43 -40.00,-41.57 -56.00,-41.57 -64.00,-55.43 -56.00,-69.28 -40.00,-69.28Z M-32.00,-27.71 -40.00,-13.86 -56.00,-13.86 -64.00,-27.71 -56.00,-41.57 -40.00,-41.57Z M-32.00,0.00 -40.00,13.86 -56.00,13.86 -64.00,0.00 -56.00,-13.86 -40.00,-13.86Z M-32.00,27.71 -40.00,41.57 -56.00,41.57 -64.00,27.71 -56.00,13.86 -40.00,13.86Z M-32.00,55.43 -40.00,69.28 -56.00,69.28 -64.00,55.43 -56.00,41.57 -40.00,41.57Z M-32.00,83.14 -40.00,96.99 -56.00,96.99 -64.00,83.14 -56.00,69.28 -40.00,69.28Z M-8.00,-41.57 -16.00,-27.71 -32.00,-27.71 -40.00,-41.57 -32.00,-55.43 -16.00,-55.43Z M-8.00,-13.86 -16.00,0.00 -32.00,0.00 -40.00,-13.86 -32.00,-27.71 -16.00,-27.71Z M-8.00,13.86 -16.00,27.71 -32.00,27.71 -40.00,13.86 -32.00,0.00 -16.00,0.00Z M-8.00,41.57 -16.00,55.43 -32.00,55.43 -40.00,41.57 -32.00,27.71 -16.00,27.71Z M-8.00,69.28 -16.00,83.14 -32.00,83.14 -40.00,69.28 -32.00,55.43 -16.00,55.43Z M-8.00,96.99 -16.00,110.85 -32.00,110.85 -40.00,96.99 -32.00,83.14 -16.00,83.14Z M16.00,-55.43 8.00,-41.57 -8.00,-41.57 -16.00,-55.43 -8.00,-69.28 8.00,-69.28Z M16.00,-27.71 8.00,-13.86 -8.00,-13.86 -16.00,-27.71 -8.00,-41.57 8.00,-41.57Z M16.00,0.00 8.00,13.86 -8.00,13.86 -16.00,0.00 -8.00,-13.86 8.00,-13.86Z M16.00,27.71 8.00,41.57 -8.00,41.57 -16.00,27.71 -8.00,13.86 8.00,13.86Z M16.00,55.43 8.00,69.28 -8.00,69.28 -16.00,55.43 -8.00,41.57 8.00,41.57Z M16.00,83.14 8.00,96.99 -8.00,96.99 -16.00,83.14 -8.00,69.28 8.00,69.28Z M40.00,-41.57 32.00,-27.71 16.00,-27.71 8.00,-41.57 16.00,-55.43 32.00,-55.43Z M40.00,-13.86 32.00,0.00 16.00,0.00 8.00,-13.86 16.00,-27.71 32.00,-27.71Z M40.00,13.86 32.00,27.71 16.00,27.71 8.00,13.86 16.00,0.00 32.00,0.00Z M40.00,41.57 32.00,55.43 16.00,55.43 8.00,41.57 16.00,27.71 32.00,27.71Z M40.00,69.28 32.00,83.14 16.00,83.14 8.00,69.28 16.00,55.43 32.00,55.43Z M40.00,96.99 32.00,110.85 16.00,110.85 8.00,96.99 16.00,83.14 32.00,83.14Z M64.00,-55.43 56.00,-41.57 40.00,-41.57 32.00,-55.43 40.00,-69.28 56.00,-69.28Z M64.00,-27.71 56.00,-13.86 40.00,-13.86 32.00,-27.71 40.00,-41.57 56.00,-41.57Z M64.00,0.00 56.00,13.86 40.00,13.86 32.00,0.00 40.00,-13.86 56.00,-13.86Z M64.00,27.71 56.00,41.57 40.00,41.57 32.00,27.71 40.00,13.86 56.00,13.86Z M64.00,55.43 56.00,69.28 40.00,69.28 32.00,55.43 40.00,41.57 56.00,41.57Z M64.00,83.14 56.00,96.99 40.00,96.99 32.00,83.14 40.00,69.28 56.00,69.28Z M88.00,-41.57 80.00,-27.71 64.00,-27.71 56.00,-41.57 64.00,-55.43 80.00,-55.43Z M88.00,-13.86 80.00,0.00 64.00,0.00 56.00,-13.86 64.00,-27.71 80.00,-27.71Z M88.00,13.86 80.00,27.71 64.00,27.71 56.00,13.86 64.00,0.00 80.00,0.00Z M88.00,41.57 80.00,55.43 64.00,55.43 56.00,41.57 64.00,27.71 80.00,27.71Z M88.00,69.28 80.00,83.14 64.00,83.14 56.00,69.28 64.00,55.43 80.00,55.43Z M88.00,96.99 80.00,110.85 64.00,110.85 56.00,96.99 64.00,83.14 80.00,83.14Z M112.00,-55.43 104.00,-41.57 88.00,-41.57 80.00,-55.43 88.00,-69.28 104.00,-69.28Z M112.00,-27.71 104.00,-13.86 88.00,-13.86 80.00,-27.71 88.00,-41.57 104.00,-41.57Z M112.00,0.00 104.00,13.86 88.00,13.86 80.00,0.00 88.00,-13.86 104.00,-13.86Z M112.00,27.71 104.00,41.57 88.00,41.57 80.00,27.71 88.00,13.86 104.00,13.86Z M112.00,55.43 104.00,69.28 88.00,69.28 80.00,55.43 88.00,41.57 104.00,41.57Z M112.00,83.14 104.00,96.99 88.00,96.99 80.00,83.14 88.00,69.28 104.00,69.28Z' fill='none' stroke='%23E3C278' stroke-width='1.0' stroke-opacity='0.3'/%3E%3C/svg%3E");

  /* -- brand core ------------------------------------------------------- */
  --fv-ink:            #13263C;
  --fv-ink-deep:       #0A1E35;
  --fv-ink-black:      #08142C;
  --fv-teal:           #17535F;
  --fv-teal-top:       #1E6875;
  --fv-teal-light:     #4E9BA1;
  --fv-gold:           #B78A38;
  --fv-gold-bright:    #E3C278;
  --fv-gold-pale:      #F7E29D;
  --fv-gold-text:      #8A6227;

  /* -- portal chrome ---------------------------------------------------- */
  --fv-green:          #134651;   /* action gradient stops                 */
  --fv-green-p:        #0D3949;
  --fv-canvas:         #F1EEE9;
  --fv-surface:        #FFFDF8;
  --fv-surface-alt:    #F5F2ED;
  --fv-line:           #E2DCD0;
  --fv-line-strong:    #CFC6B4;
  --fv-muted:          #6B6659;

  --fv-ok-bg:          #E6EFF0;
  --fv-ok-fg:          #17535F;

  /* -- topbar ----------------------------------------------------------- */
  --fv-topbar-from:    #101F30;
  --fv-topbar-to:      #16293F;
  --fv-topbar-rule:    rgba(183,138,56,.55);

  /* -- type ------------------------------------------------------------- */
  --fv-ff-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --fv-ff-body:    "Questrial", "Poppins", -apple-system, "Segoe UI", Roboto, sans-serif;
  --fv-ff-num:     "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* -- shape & depth ---------------------------------------------------- */
  --fv-r-sm: 3px;
  --fv-r-md: 6px;
  --fv-r-lg: 10px;
  --fv-r-xl: 16px;
  --fv-shadow-card:
      0 1px 1px rgba(19,38,60,.04),
      0 8px 24px -12px rgba(19,38,60,.18),
      0 32px 60px -40px rgba(19,38,60,.35);
  --fv-shadow-soft: 0 1px 2px rgba(19,38,60,.05), 0 14px 34px -24px rgba(19,38,60,.30);
  --fv-focus: 0 0 0 3px rgba(183,138,56,.35);

  --fv-gold-edge: linear-gradient(135deg,#F7E29D,#B78A38 22%,#E3C278 44%,#8A6227 68%,#E3C278 86%,#F7E29D);
  --fv-btn-teal:  linear-gradient(180deg,#1E6875,#17535F 52%,#0D3949);

  --fv-maxw: 1180px;
  --fv-header-maxw: 1240px;
  --fv-header-h: 72px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fv-ff-body);
  color: var(--fv-ink);
  background: var(--fv-canvas);
  line-height: 1.62;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--fv-teal); }
h1,h2,h3,h4 { font-family: var(--fv-ff-display); color: var(--fv-ink); font-weight: 600; line-height: 1.14; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); letter-spacing: -.01em; }
h3 { font-size: 1.22rem; }
p  { margin: 0 0 1rem; }
.container { width: 100%; max-width: var(--fv-maxw); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--fv-ink); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--fv-r-md) 0;
}
.skip-link:focus { left: 0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* eyebrow with gold rule */
.eyebrow {
  font-family: var(--fv-ff-body);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fv-gold-text); margin: 0 0 .85rem;
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: ""; width: 30px; height: 2px; flex: none;
  background: linear-gradient(90deg, var(--fv-gold), var(--fv-gold-pale));
}

.lead { font-size: 1.12rem; color: #3a4658; }
.muted { color: var(--fv-muted); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,253,248,.86);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--fv-line);
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--fv-topbar-rule) 20%, var(--fv-gold-bright) 50%, var(--fv-topbar-rule) 80%, transparent);
  opacity: .8;
}
.header-inner {
  max-width: var(--fv-header-maxw); margin: 0 auto; padding: 0 24px;
  height: var(--fv-header-h);
  display: flex; align-items: center; gap: 20px;
}

/* lockup: bol + wordmark */
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.brand-lockup__mark { height: 40px; width: 40px; flex: none; filter: drop-shadow(0 2px 6px rgba(19,38,60,.18)); }
.brand-lockup__name {
  font-family: var(--fv-ff-display); font-size: 1.44rem; line-height: 1;
  color: var(--fv-ink); white-space: nowrap; letter-spacing: .1px;
}
.brand-lockup__name b { font-weight: 600; }
.brand-lockup__name span { color: var(--fv-teal); font-weight: 500; }
.brand-lockup:focus-visible { outline: none; box-shadow: var(--fv-focus); border-radius: var(--fv-r-sm); }

.header-spacer { flex: 1 1 auto; }

.main-nav ul { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.main-nav a {
  display: inline-block; text-decoration: none; color: var(--fv-ink);
  font-size: .93rem; padding: 8px 10px; border-radius: var(--fv-r-md);
  position: relative; transition: color .15s ease, background-color .15s ease;
}
.main-nav a:hover { background: rgba(19,38,60,.05); }
.main-nav a.active { color: var(--fv-teal); }
.main-nav a.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  background: linear-gradient(90deg, var(--fv-gold), var(--fv-gold-bright)); border-radius: 2px;
}

/* language switch (fv-lang) */
.fv-lang { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--fv-line); border-radius: 999px; background: var(--fv-surface-alt); flex: none; }
.fv-lang button {
  appearance: none; border: 0; background: transparent; border-radius: 999px;
  padding: 5px 13px; font-family: var(--fv-ff-body); font-size: .76rem; letter-spacing: .08em;
  color: var(--fv-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.fv-lang button[aria-pressed="true"] { background: var(--fv-teal); color: #FFFDF8; }
.fv-lang button:focus-visible { outline: none; box-shadow: var(--fv-focus); }

.mobile-menu-btn {
  display: none; appearance: none; border: 1px solid var(--fv-line-strong); background: var(--fv-surface);
  width: 42px; height: 42px; border-radius: var(--fv-r-md); font-size: 1.2rem; color: var(--fv-ink); cursor: pointer;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  --_fg: #FFFDF8;
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--fv-r-md);
  font-family: var(--fv-ff-body); font-size: .96rem; font-weight: 500; letter-spacing: .02em;
  text-decoration: none; cursor: pointer; position: relative; isolation: isolate; white-space: nowrap;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn--primary {
  background: var(--fv-btn-teal); color: #FFFDF8;
  border-color: rgba(138,98,39,.35);
  box-shadow: 0 1px 0 rgba(247,226,157,.20) inset, 0 8px 20px -12px rgba(13,57,73,.9);
}
.btn--primary::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: linear-gradient(180deg, rgba(247,226,157,.30), rgba(247,226,157,0) 46%); opacity: .7; transition: opacity .18s ease;
}
.btn--primary:hover { filter: brightness(1.06); }
.btn--primary:hover::before { opacity: 1; }
.btn--primary:active { transform: translateY(1px); }

.btn--gold {
  background: linear-gradient(180deg, var(--fv-gold-bright), var(--fv-gold));
  color: #2A1E07; border-color: rgba(138,98,39,.55);
  box-shadow: 0 8px 20px -12px rgba(138,98,39,.8);
}
.btn--gold:hover { filter: brightness(1.04); }
.btn--gold:active { transform: translateY(1px); }

.btn--ghost { background: transparent; color: var(--fv-ink); border-color: var(--fv-line-strong); }
.btn--ghost:hover { background: rgba(19,38,60,.04); }
.btn--block { width: 100%; }
.btn:focus-visible { outline: none; box-shadow: var(--fv-focus); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* text link with gold underline */
.link {
  color: var(--fv-gold-text); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid rgba(138,98,39,.35); padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.link::after { content: "\2192"; transition: transform .15s ease; }
.link:hover { color: var(--fv-ink); border-bottom-color: var(--fv-ink); }
.link:hover::after { transform: translateX(3px); }
.link--plain::after { content: none; }

/* ==========================================================================
   Header consultation button (in nav)
   ========================================================================== */
.header-cta {
  flex: none;
  background: transparent; color: var(--fv-teal);
  border: 1px solid var(--fv-teal); border-radius: 999px;
  box-shadow: none; min-height: 40px; padding: 0 18px;
}
.header-cta::before { content: none; }
.header-cta:hover { background: rgba(23,83,95,.06); filter: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 120% at 88% -10%, rgba(23,83,95,.10), transparent 46%),
    radial-gradient(90% 90% at 12% 110%, rgba(183,138,56,.08), transparent 50%),
    var(--fv-canvas);
  border-bottom: 1px solid var(--fv-line);
}
.hero__mesh {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--hexmesh);
  background-size: 48px 27.71px; opacity: .5;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 20%, #000 0%, rgba(0,0,0,.35) 55%, transparent 80%);
          mask-image: radial-gradient(120% 90% at 70% 20%, #000 0%, rgba(0,0,0,.35) 55%, transparent 80%);
}
.hero__bol {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  right: -60px; top: 50%; transform: translateY(-50%);
  width: min(560px, 46vw); aspect-ratio: 1; opacity: .16;
  filter: saturate(1.05);
}
.hero__inner { position: relative; z-index: 2; max-width: var(--fv-maxw); margin: 0 auto; padding: 84px 24px 78px; }
.hero__content { max-width: 680px; }
.hero h1 { margin-bottom: .35em; }
.hero h1 em { font-style: italic; color: var(--fv-teal); }
.hero__sub { font-size: 1.24rem; color: #33404f; max-width: 40ch; margin-bottom: 1.1rem; }
.hero__meta { color: var(--fv-muted); max-width: 52ch; margin-bottom: 1.9rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }

/* techy hero chips (mono data pills) */
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2.4rem; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fv-ff-num); font-size: .74rem; letter-spacing: .02em; color: var(--fv-teal);
  background: rgba(255,253,248,.7); border: 1px solid var(--fv-line);
  padding: 7px 12px; border-radius: 999px; box-shadow: var(--fv-shadow-soft);
}
.chip b { color: var(--fv-ink); font-weight: 600; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg,var(--fv-teal-light),var(--fv-gold)); flex: none; }

/* services strip under hero */
.hero-strip { position: relative; z-index: 2; background: var(--fv-surface); border-top: 1px solid var(--fv-line); border-bottom: 1px solid var(--fv-line); }
.hero-strip__inner { max-width: var(--fv-maxw); margin: 0 auto; padding: 18px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.hero-strip__label { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fv-muted); }
.hero-strip__items { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hero-strip__items span { font-size: .92rem; color: var(--fv-ink); display: inline-flex; align-items: center; gap: 8px; }
.hero-strip__items span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fv-gold); flex: none; }

/* ==========================================================================
   Sections
   ========================================================================== */
section[id] { scroll-margin-top: 124px; }
.section { padding: 76px 0; position: relative; }
.section--alt { background: var(--fv-surface-alt); border-top: 1px solid var(--fv-line); border-bottom: 1px solid var(--fv-line); }
.section[data-hidden="true"] { display: none; }

.section-header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px 40px; align-items: end; margin-bottom: 40px; }
.section-header h2 { margin-bottom: .35em; }
.section-header p { color: var(--fv-muted); max-width: 60ch; margin: 0; }
.section-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; }

/* card grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--fv-surface); border: 1px solid var(--fv-line); border-radius: var(--fv-r-lg);
  padding: 26px 24px; box-shadow: var(--fv-shadow-soft); position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--fv-shadow-card); border-color: var(--fv-line-strong); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--fv-muted); margin-bottom: 1rem; }
.card > .link { margin-top: auto; }

/* lead card with gold gradient border */
.card--lead { border: 0; padding: 0; background: var(--fv-gold-edge); border-radius: var(--fv-r-lg); box-shadow: var(--fv-shadow-card); }
.card--lead > .card__inner { background: var(--fv-surface); border-radius: calc(var(--fv-r-lg) - 1px); padding: 26px 24px; margin: 1.5px; height: calc(100% - 3px); }

/* card top accent */
.card--accent { border-top: 3px solid var(--fv-teal); }

/* persona selector cards */
.persona-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.persona-card {
  appearance: none; text-align: left; cursor: pointer;
  background: var(--fv-surface); border: 1px solid var(--fv-line); border-radius: var(--fv-r-lg);
  padding: 20px 18px; font-family: inherit; color: var(--fv-ink);
  display: flex; flex-direction: column; gap: 10px; min-height: 150px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
.persona-card:hover { transform: translateY(-3px); box-shadow: var(--fv-shadow-card); border-color: var(--fv-line-strong); }
.persona-card:focus-visible { outline: none; box-shadow: var(--fv-focus); }
.persona-card.is-active { border-color: transparent; box-shadow: 0 0 0 2px var(--fv-teal), var(--fv-shadow-card); background: #FBFAF5; }
.persona-card.is-active .persona-ic { background: var(--fv-btn-teal); }
.persona-card.is-active .persona-ic svg { fill: var(--fv-gold-pale); }
.persona-ic { width: 44px; height: 44px; border-radius: var(--fv-r-md); background: var(--fv-ok-bg); display: grid; place-items: center; transition: background-color .16s ease; }
.persona-ic svg { width: 26px; height: 26px; fill: var(--fv-teal); transition: fill .16s ease; }
.persona-card h3 { font-size: 1.02rem; margin: 0; }
.persona-card p { font-size: .84rem; color: var(--fv-muted); margin: 0; }

/* ==========================================================================
   Tabs + filters + accordion (services)
   ========================================================================== */
.tab-toggle { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--fv-line); border-radius: 999px; background: var(--fv-surface-alt); margin-bottom: 18px; }
.tab-toggle-btn { appearance: none; border: 0; background: transparent; cursor: pointer; display: inline-flex; gap: 2px; border-radius: 999px; padding: 0; font-family: var(--fv-ff-body); }
.tab-toggle-btn > span { padding: 8px 18px; border-radius: 999px; font-size: .84rem; letter-spacing: .06em; color: var(--fv-muted); transition: background-color .15s ease, color .15s ease; }
.tab-toggle-btn[aria-pressed="false"] > span:first-child,
.tab-toggle-btn[aria-pressed="true"]  > span:last-child { background: var(--fv-ink); color: #FFFDF8; }
.tab-toggle-btn:focus-visible { outline: none; box-shadow: var(--fv-focus); border-radius: 999px; }

.tab-filters { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; }
.tab-filter { display: grid; gap: 6px; }
.tab-filter[data-hidden="true"] { display: none; }
.tab-filter > span { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fv-teal); }
.tab-filter select {
  min-height: 46px; padding: 0 14px; border: 1px solid var(--fv-line-strong); border-radius: var(--fv-r-md);
  background: #FFFEFB; color: var(--fv-ink); font-family: var(--fv-ff-body); font-size: .95rem; min-width: 220px;
}
.tab-filter select:focus { outline: none; border-color: var(--fv-teal); box-shadow: var(--fv-focus); }
.accordion-hint { font-size: .85rem; color: var(--fv-muted); margin: 4px 0 16px; }

.tab-panel[hidden] { display: none; }
.accordion[data-hidden="true"], .grid[data-hidden="true"], .role-services-list[data-hidden="true"] { display: none; }

/* details/accordion */
.accordion details, .card details { border: 1px solid var(--fv-line); border-radius: var(--fv-r-md); background: var(--fv-surface); margin-bottom: 10px; overflow: hidden; }
.accordion details[data-hidden="true"] { display: none; }
.accordion summary, .card details summary {
  cursor: pointer; list-style: none; padding: 15px 18px; font-family: var(--fv-ff-display); font-size: 1.06rem; color: var(--fv-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.accordion summary::-webkit-details-marker, .card details summary::-webkit-details-marker { display: none; }
.accordion summary::after, .card details summary::after {
  content: "+"; font-family: var(--fv-ff-body); font-size: 1.3rem; color: var(--fv-gold-text); flex: none; transition: transform .18s ease;
}
.accordion details[open] > summary::after, .card details[open] > summary::after { transform: rotate(45deg); }
.accordion details[open] > summary { border-bottom: 1px solid var(--fv-line); }
.accordion-body, .card details > p { padding: 4px 18px 18px; }
.accordion-body p { color: var(--fv-muted); }
.accordion-body ul, .card details ul { margin: .6rem 0 0; padding-left: 1.1rem; }
.accordion-body li, .role-services-lines li { margin-bottom: .5rem; color: #3a4658; }
.accordion-body strong { color: var(--fv-ink); }
.card details summary { font-size: .95rem; padding: 12px 0 4px; }
.card details { border: 0; background: transparent; margin: .4rem 0 0; }
.card details[open] > summary { border-bottom: 0; }
.card details > p { padding: 4px 0 0; color: var(--fv-muted); }

.role-services-list { margin-top: 18px; padding: 20px 22px; background: var(--fv-surface); border: 1px solid var(--fv-line); border-left: 3px solid var(--fv-teal); border-radius: var(--fv-r-md); }
.role-services-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }

.section-note { margin-top: 28px; padding: 24px; background: var(--fv-ok-bg); border-radius: var(--fv-r-lg); }
.section-note h3 { margin-bottom: .4rem; }
.section-note p { color: #33505a; margin-bottom: 1rem; }

/* ==========================================================================
   Contact band
   ========================================================================== */
.contact-band { background: linear-gradient(180deg, var(--fv-topbar-from), var(--fv-ink)); color: #EAF1F2; position: relative; overflow: hidden; }
.contact-band::before { content: ""; position: absolute; inset: 0; background-image: var(--hexmesh-dark); background-size: 48px 27.71px; opacity: .35; -webkit-mask-image: radial-gradient(90% 120% at 85% 0%, #000, transparent 70%); mask-image: radial-gradient(90% 120% at 85% 0%, #000, transparent 70%); }
.contact-band .container { position: relative; z-index: 1; padding-top: 66px; padding-bottom: 66px; }
.contact-band h2 { color: #FFFDF8; }
.contact-band .eyebrow { color: var(--fv-gold-bright); }
.contact-band .section-header p { color: #B9C6CC; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--fv-ink-black); color: #AEBAC6; }
.site-footer a { color: #C9D3DC; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; padding: 54px 0 34px; }
.footer-brand .brand-lockup__name { color: var(--fv-gold-bright); }
.footer-brand .brand-lockup__name b { color: var(--fv-gold-bright); }
.footer-brand .brand-lockup__name span { color: var(--fv-gold-bright); }
.footer-brand p { color: #8E9BA8; margin-top: 14px; max-width: 34ch; }
.footer-col h4 { color: #FFFDF8; font-family: var(--fv-ff-body); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-col p { margin: 0 0 8px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .84rem; color: #7C8794; }

/* ==========================================================================
   Cookie banner
   ========================================================================== */
.cookie-overlay { display: none; position: fixed; inset: auto 0 0 0; z-index: 150; justify-content: center; padding: 18px; }
.cookie-banner { background: var(--fv-surface); border: 1px solid var(--fv-line-strong); border-radius: var(--fv-r-lg); box-shadow: var(--fv-shadow-card); max-width: 640px; padding: 18px 20px; }
.cookie-banner p { margin: 0 0 12px; font-size: .92rem; color: #33404f; }
.cookie-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-buttons button { appearance: none; cursor: pointer; border-radius: var(--fv-r-md); padding: 9px 16px; font-family: var(--fv-ff-body); font-size: .9rem; border: 1px solid var(--fv-line-strong); background: var(--fv-surface); color: var(--fv-ink); }
#accept-cookies { background: var(--fv-btn-teal); color: #FFFDF8; border-color: transparent; }

/* ==========================================================================
   Sub nav (on-page) — scroll spy
   ========================================================================== */
.sub-nav { position: sticky; top: var(--fv-header-h); z-index: 90; background: rgba(245,242,237,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--fv-line); }
.sub-nav .container { display: flex; align-items: center; gap: 6px; overflow-x: auto; }
.sub-nav-links { list-style: none; display: flex; gap: 4px; margin: 0; padding: 8px 0; }
.sub-nav-links a { display: inline-block; white-space: nowrap; text-decoration: none; color: var(--fv-muted); font-size: .86rem; padding: 6px 12px; border-radius: 999px; }
.sub-nav-links a:hover { background: rgba(19,38,60,.05); color: var(--fv-ink); }
.sub-nav-links a.active { background: var(--fv-ink); color: #FFFDF8; }
.sub-nav-toggle, .sub-nav-close { display: none; }

/* ==========================================================================
   Reveal animation
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.fade-in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .persona-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .main-nav, .header-cta { display: none; }
  .main-nav.active {
    display: block; position: absolute; top: var(--fv-header-h); left: 0; right: 0;
    background: var(--fv-surface); border-bottom: 1px solid var(--fv-line); box-shadow: var(--fv-shadow-card); padding: 12px 24px 20px;
  }
  .main-nav.active ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav.active a { padding: 12px 10px; border-radius: var(--fv-r-md); }
  .main-nav.active a.active::after { content: none; }
  .main-nav.active .header-cta, .main-nav.active .btn { display: inline-flex; width: 100%; margin-top: 10px; }
  .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .header-inner { padding: 0 16px; gap: 12px; }
  .fv-lang button { padding: 5px 11px; }
  .section-header { grid-template-columns: 1fr; }
  .section-cta { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .grid--3 { grid-template-columns: 1fr; }
  .persona-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr; gap: 26px; }
  .hero__inner { padding: 60px 24px 54px; }
  .hero__bol { opacity: .10; right: -120px; }
  .section { padding: 58px 0; }
}
@media (max-width: 440px) {
  .persona-grid { grid-template-columns: 1fr; }
  .brand-lockup__name { font-size: 1.16rem; }
  .brand-lockup__mark { height: 34px; width: 34px; }
  body { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Inner pages — shared
   ========================================================================== */
/* Bilingual inline toggle (for prose pages; chrome uses data-i18n) */
html[data-lang="nl"] [data-en] { display: none !important; }
html[data-lang="en"] [data-nl] { display: none !important; }

/* Honeypot (spam trap) — hidden from users, filled by bots */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Compact page hero */
.page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--fv-line);
  background: radial-gradient(120% 130% at 90% -20%, rgba(23,83,95,.10), transparent 46%), var(--fv-canvas); }
.page-hero__mesh { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--hexmesh); background-size: 48px 27.71px; opacity: .4;
  -webkit-mask-image: radial-gradient(120% 90% at 80% 10%, #000 0%, transparent 75%);
          mask-image: radial-gradient(120% 90% at 80% 10%, #000 0%, transparent 75%); }
.page-hero__bol { position: absolute; right: -70px; top: 50%; transform: translateY(-50%);
  width: min(360px, 34vw); aspect-ratio: 1; opacity: .12; z-index: 0; pointer-events: none; }
.page-hero__inner { position: relative; z-index: 2; max-width: var(--fv-maxw); margin: 0 auto; padding: 64px 24px 56px; }
.page-hero__inner .lead-copy { max-width: 62ch; }
.page-hero h1 { max-width: 20ch; }
.page-hero h1 em { font-style: italic; color: var(--fv-teal); }

/* Prose column */
.prose { max-width: 74ch; }
.prose h3 { margin-top: 1.7rem; }
.prose p { color: #33404f; }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: .5rem; color: #33404f; }
.prose strong { color: var(--fv-ink); }

/* Two-column layout (content + aside) */
.layout-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
.aside-card { background: var(--fv-surface); border: 1px solid var(--fv-line); border-radius: var(--fv-r-lg);
  box-shadow: var(--fv-shadow-soft); padding: 24px; position: sticky; top: 100px; }
.aside-card::before { content: ""; display: block; height: 2px; margin: -24px -24px 18px;
  border-radius: var(--fv-r-lg) var(--fv-r-lg) 0 0;
  background: linear-gradient(90deg, var(--fv-gold), var(--fv-gold-pale) 40%, var(--fv-gold) 75%, transparent); }
.aside-card h3 { font-size: 1.05rem; }
.aside-card p { font-size: .92rem; color: var(--fv-muted); margin-bottom: .4rem; }
.aside-card a { color: var(--fv-gold-text); }

/* Numbered steps (approach) */
.steps { display: grid; gap: 16px; counter-reset: step; }
.step { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start;
  background: var(--fv-surface); border: 1px solid var(--fv-line); border-radius: var(--fv-r-lg); padding: 22px 22px; box-shadow: var(--fv-shadow-soft); }
.step__n { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fv-btn-teal); color: var(--fv-gold-pale); font-family: var(--fv-ff-num); font-size: 1.2rem; }
.step h3 { margin-bottom: .3rem; }
.step p { color: var(--fv-muted); margin: 0; }

/* Forms */
.fv-form { display: grid; gap: 16px; background: var(--fv-surface); border: 1px solid var(--fv-line);
  border-radius: var(--fv-r-lg); box-shadow: var(--fv-shadow-card); padding: 28px; position: relative; overflow: hidden; }
.fv-form::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--fv-gold), var(--fv-gold-pale) 38%, var(--fv-gold) 72%, transparent); }
.fv-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fv-teal); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--fv-line-strong);
  border-radius: var(--fv-r-md); background: #FFFEFB; color: var(--fv-ink); font-family: var(--fv-ff-body); font-size: 1rem; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--fv-teal); box-shadow: var(--fv-focus); }
.form-status { font-size: .95rem; color: var(--fv-teal); min-height: 1.2em; }
.req { color: var(--fv-gold-text); }

/* Info cards (contact details) */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.info-card { background: var(--fv-surface); border: 1px solid var(--fv-line); border-radius: var(--fv-r-lg); padding: 22px; box-shadow: var(--fv-shadow-soft); }
.info-card h3 { font-size: 1rem; margin-bottom: .5rem; }
.info-card p { color: var(--fv-muted); margin: 0 0 .3rem; font-size: .95rem; }

/* Downloads */
.downloads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.dl-card { background: var(--fv-surface); border: 1px solid var(--fv-line); border-radius: var(--fv-r-lg); padding: 22px 22px; box-shadow: var(--fv-shadow-soft);
  display: flex; flex-direction: column; gap: 8px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.dl-card:hover { transform: translateY(-3px); box-shadow: var(--fv-shadow-card); border-color: var(--fv-line-strong); }
.dl-card__tag { font-family: var(--fv-ff-num); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fv-gold-text); }
.dl-card h3 { font-size: 1.08rem; margin: 0; }
.dl-card p { color: var(--fv-muted); font-size: .92rem; margin: 0 0 6px; }
.dl-card .link { margin-top: auto; }

@media (max-width: 900px) {
  .layout-2 { grid-template-columns: 1fr; }
  .aside-card { position: static; }
  .info-grid { grid-template-columns: 1fr; }
  .downloads { grid-template-columns: 1fr; }
  .fv-form .row2 { grid-template-columns: 1fr; }
  .step { grid-template-columns: 44px 1fr; gap: 14px; }
}

/* ==========================================================================
   CWSITE90 — Deel A: globale verfijningen
   ========================================================================== */
/* Wordmark in de topbalk in één kleur (ink) */
.site-header .brand-lockup__name span { color: var(--fv-ink); font-weight: 600; }

/* Contactband: typisch Finovatec-teal i.p.v. donker navy */
.contact-band { background: linear-gradient(160deg, var(--fv-teal-top), var(--fv-teal) 55%, var(--fv-green-p)); }
.contact-band .section-header p { color: #D5E4E6; }

/* Bol als groter, subtieler watermerk in de hoek (zoals de portaal-logins) */
.hero__bol, .page-hero__bol { width: min(640px, 54vw); opacity: .085; right: -140px; top: -60px; bottom: auto; transform: none; }
@media (max-width: 760px){ .hero__bol, .page-hero__bol { opacity: .06; right: -180px; } }

/* Zachte pagina-overgang (geen harde "hik" tussen subpagina's) */
@keyframes fvIn { from { opacity: 0; } to { opacity: 1; } }
body { opacity: 1; animation: fvIn .40s ease both; }
body.fv-leaving { opacity: 0; transition: opacity .22s ease; }

/* Home: samenvatting-secties */
.home-divider { max-width: var(--fv-maxw); margin: 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--fv-line-strong) 18%, var(--fv-gold-bright) 50%, var(--fv-line-strong) 82%, transparent); opacity: .8; }
.svc-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.svc-chips a { text-decoration: none; display: inline-flex; align-items: center; gap: 9px; font-size: .96rem; color: var(--fv-ink);
  background: var(--fv-surface); border: 1px solid var(--fv-line); border-radius: 999px; padding: 10px 16px; box-shadow: var(--fv-shadow-soft); transition: transform .15s ease, border-color .15s ease; }
.svc-chips a:hover { transform: translateY(-2px); border-color: var(--fv-teal); }
.svc-chips a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fv-gold); flex: none; }
.ind-list { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.ind-list span { font-size: .96rem; color: var(--fv-ink); display: inline-flex; align-items: center; gap: 8px; }
.ind-list span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fv-teal); flex: none; }

/* Home persona (voor wie) — niet-interactieve kaart met link */
.vw-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.vw-card { text-decoration: none; color: var(--fv-ink); background: var(--fv-surface); border: 1px solid var(--fv-line); border-radius: var(--fv-r-lg);
  padding: 18px 16px; display: flex; flex-direction: column; gap: 9px; box-shadow: var(--fv-shadow-soft); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.vw-card:hover { transform: translateY(-3px); box-shadow: var(--fv-shadow-card); border-color: var(--fv-line-strong); }
.vw-card h3 { font-size: .98rem; margin: 0; } .vw-card p { font-size: .82rem; color: var(--fv-muted); margin: 0; }
@media (max-width: 1024px){ .vw-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){ .vw-grid { grid-template-columns: repeat(2, 1fr); } }

/* Portal-CTA blok (naar klantenportaal) */
.portal-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: space-between;
  background: rgba(255,253,248,.08); border: 1px solid rgba(247,226,157,.30); border-radius: var(--fv-r-lg); padding: 20px 22px; margin-top: 24px; }
.portal-cta .pt { color: #EAF1F2; } .portal-cta .pt b { color: #fff; font-family: var(--fv-ff-display); font-weight: 600; font-size: 1.15rem; display:block; margin-bottom:2px; }
.portal-cta .pt span { font-size: .9rem; color: #B9C6CC; }

@media (prefers-reduced-motion: reduce){ body { animation: none; } body.fv-leaving { transition: none; } }

/* ==========================================================================
   CWSITE90 — Deel B: losse pagina's
   ========================================================================== */
/* Diensten sub-nav: servicekaarten in één kolom zodat ankers exact landen */
.svc-list { display: grid; gap: 20px; max-width: 880px; margin-left: auto; margin-right: auto; }
#services-list article[id] { scroll-margin-top: 150px; }
.svc-list .card > ul { margin: .2rem 0 0; padding-left: 1.15rem; }
.svc-list .card li { margin-bottom: .4rem; color: #33404f; }
.svc-list .card .dl-card__tag { margin-bottom: 2px; }

/* Werkwijze: volledig teal (italic toegestaan) paginatitel */
.page-hero h1.h1--teal { color: var(--fv-teal); }
.page-hero h1.h1--teal em { color: var(--fv-teal); font-style: italic; }

/* Werkwijze: 3 pijlers, links-rechts afwisselend, met praktijkvoorbeeld */
.approach-pillars { display: grid; gap: 30px; }
.ap-row { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center;
  background: var(--fv-surface); border: 1px solid var(--fv-line); border-radius: var(--fv-r-lg);
  box-shadow: var(--fv-shadow-soft); padding: 32px 34px; position: relative; overflow: hidden; }
.ap-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--fv-teal); }
.ap-row:nth-child(even) .ap-text { order: 2; }
.ap-row:nth-child(even)::before { left: auto; right: 0; }
.ap-num { font-family: var(--fv-ff-num); font-size: .82rem; letter-spacing: .18em; color: var(--fv-gold-text); display: block; margin-bottom: 8px; }
.ap-text h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.ap-text p { color: #33404f; margin: 0; max-width: 46ch; }
.ap-example { background: var(--fv-ok-bg); border: 1px solid var(--fv-line); border-radius: var(--fv-r-md);
  padding: 22px 22px; }
.ap-example__label { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fv-teal); display: block; margin-bottom: 8px; }
.ap-example p { color: #33505a; margin: 0; font-size: .96rem; }
@media (max-width: 860px) {
  .ap-row { grid-template-columns: 1fr; gap: 22px; padding: 26px 24px; }
  .ap-row:nth-child(even) .ap-text { order: 0; }
  .ap-row:nth-child(even)::before { right: auto; left: 0; }
}

/* Forms: multiselect-chips + los "anders"-veld */
.field--full { grid-column: 1 / -1; }
.field-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fv-teal); display: block; margin-bottom: 6px; }
.chip-hint { font-size: .84rem; color: var(--fv-muted); margin: 0 0 12px; }
.chip-select { display: flex; flex-wrap: wrap; gap: 10px; }
.opt-chip { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1px solid var(--fv-line-strong); border-radius: 999px; padding: 9px 15px; font-size: .93rem; color: var(--fv-ink);
  background: #FFFEFB; user-select: none; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.opt-chip:hover { border-color: var(--fv-teal); }
.opt-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt-chip::before { content: ""; width: 15px; height: 15px; border-radius: 5px; border: 1.5px solid var(--fv-muted); background: #FFFEFB; flex: none; transition: background-color .15s ease, border-color .15s ease; }
.opt-chip.is-checked { border-color: var(--fv-teal); background: var(--fv-ok-bg); box-shadow: inset 0 0 0 1px var(--fv-teal); }
.opt-chip.is-checked::before { background-color: var(--fv-teal); border-color: var(--fv-teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11L3.5 8l1-1 2 2 5-5 1 1z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 15px 15px; }
.opt-chip:focus-within { box-shadow: var(--fv-focus); }
.chip-other-wrap { margin-top: 12px; }
.chip-other-wrap[hidden] { display: none; }
.chip-other-wrap textarea { width: 100%; min-height: 70px; padding: 12px 14px; border: 1px solid var(--fv-line-strong);
  border-radius: var(--fv-r-md); background: #FFFEFB; color: var(--fv-ink); font-family: var(--fv-ff-body); font-size: 1rem; resize: vertical; }
.chip-other-wrap textarea:focus { outline: none; border-color: var(--fv-teal); box-shadow: var(--fv-focus); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Contact: directe offerte-CTA in de zijkaart */
.quote-cta { background: var(--fv-ok-bg); border: 1px solid var(--fv-line); border-radius: var(--fv-r-md); padding: 16px 16px 18px; margin-bottom: 18px; }
.quote-cta__lead { font-size: .92rem; color: #33505a; margin: 0 0 12px; }

/* ==========================================================================
   CWSITE90 — Deel C: compliance-hub
   ========================================================================== */
.compliance-sections section[id] { scroll-margin-top: 140px; }
.compliance-sections .prose { max-width: 76ch; }
.compliance-sections .prose h2 { margin-bottom: .6rem; }
.compliance-sections .prose h3 { margin-top: 1.6rem; }
.compliance-sections .info-card p { margin: 0 0 .45rem; color: #33404f; font-size: .95rem; }
.compliance-sections .info-card p strong { color: var(--fv-ink); }
.compliance-sections .info-card a { color: var(--fv-gold-text); }
.compliance-sections .muted em { font-style: italic; }

/* ==========================================================================
   CWSITE90 — Deel D: kernwaarden vanuit de klant (portaal-consistent)
   ========================================================================== */
.value-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.value-card { background: var(--fv-surface); border: 1px solid var(--fv-line); border-top: 3px solid var(--fv-teal);
  border-radius: var(--fv-r-lg); padding: 26px 24px; box-shadow: var(--fv-shadow-soft);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.value-card:hover { transform: translateY(-3px); box-shadow: var(--fv-shadow-card); border-top-color: var(--fv-gold); }
.value-card .persona-ic { width: 46px; height: 46px; margin-bottom: 4px; }
.value-card h3 { margin: 0; font-size: 1.16rem; }
.value-card > p { color: var(--fv-muted); margin: 0; }
.value-card details { margin-top: auto; border-top: 1px solid var(--fv-line); padding-top: 10px; }
.value-card summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--fv-ff-body); font-size: .82rem; letter-spacing: .04em; color: var(--fv-gold-text); }
.value-card summary::-webkit-details-marker { display: none; }
.value-card summary::after { content: "+"; font-size: 1.2rem; line-height: 1; color: var(--fv-gold-text); transition: transform .18s ease; }
.value-card details[open] > summary::after { transform: rotate(45deg); }
.value-card details > p { margin: 10px 0 0; color: #33505a; font-size: .92rem; }
@media (max-width: 760px) { .value-cards { grid-template-columns: 1fr; } }

/* --- CWSITEAFRONDEN: rust-first cleanup ------------------------------- */
/* A3 — remove gold kicker labels above titles, site-wide */
.eyebrow { display: none !important; }
/* A2 — no italic words in any heading/title */
h1 em, h2 em, h3 em, h4 em, .h1--teal em, .section-header em { font-style: normal; }

/* A5 — cookie settings panel (per category) */
.cookie-settings-panel { margin-top: 14px; border-top: 1px solid var(--fv-line, #E2DCD0); padding-top: 12px; display: grid; gap: 10px; }
.cookie-settings-panel[hidden] { display: none; }
.cookie-cat { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cookie-cat strong { display: block; font-size: .95rem; color: var(--fv-ink, #13263C); }
.cookie-cat span { display: block; font-size: .82rem; color: var(--fv-muted, #6B6659); max-width: 46ch; }
.cookie-always { color: var(--fv-muted, #6B6659); font-size: .82rem; white-space: nowrap; padding-top: 2px; }
.cookie-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.cookie-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cookie-switch span { position: absolute; inset: 0; background: #CFC6B4; border-radius: 999px; transition: background .18s; }
.cookie-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .18s; }
.cookie-switch input:checked + span { background: var(--fv-teal, #17535F); }
.cookie-switch input:checked + span::after { transform: translateX(18px); }
.cookie-save { cursor: pointer; }

/* ==========================================================================
   CWSITECORRECTIE — DEEL 0.3 per-sectie doorklik-balk (home)
   ========================================================================== */
.section-grid { display: grid; grid-template-columns: minmax(0,1fr) 58px; gap: 30px; align-items: stretch; }
.fv-jump {
  position: relative; align-self: stretch; text-decoration: none; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 24px 0; border-radius: 12px;
  background: linear-gradient(180deg, #17293F, var(--fv-ink));
  transition: background .18s ease;
}
.fv-jump::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--fv-gold-bright), var(--fv-gold) 50%, var(--fv-gold-bright));
  transition: width .18s ease;
}
.fv-jump__label { writing-mode: vertical-rl; transform: rotate(180deg); color: #EAF1F2; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; font-size: .78rem; white-space: nowrap; }
.fv-jump__chip {
  width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--fv-gold);
  color: var(--fv-gold-bright); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.fv-jump:hover { background: linear-gradient(180deg, var(--fv-topbar-to), var(--fv-topbar-from)); }
.fv-jump:hover::before { width: 5px; }
.fv-jump:hover .fv-jump__chip { transform: translateY(-6px); background: var(--fv-gold); color: var(--fv-ink); border-color: var(--fv-gold); }

/* DEEL B2/D2/E4 — compactere topblokken en home-secties */
.home-page .page-hero__inner { padding-top: 30px; padding-bottom: 30px; }
.page-hero--compact .page-hero__inner { padding-top: 30px; padding-bottom: 30px; }
.home-page .section { padding-top: 42px; padding-bottom: 42px; }

/* DEEL B3/C1 — hero met beeld-slot (klaar voor definitief beeld) */
.page-hero--media .page-hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.page-hero__media {
  position: relative; align-self: stretch; min-height: 280px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 90% at 82% 8%, var(--fv-teal-top), var(--fv-teal) 46%, var(--fv-ink) 100%);
  border: 1px solid rgba(255,255,255,.10); box-shadow: 0 26px 60px -34px rgba(13,57,73,.8);
  background-size: cover; background-position: center; /* zodra Jort een beeld kiest: background-image erop */
}
.page-hero__media::before { content: ""; position: absolute; inset: 0; background-image: var(--hexmesh-dark); background-size: 46px 26.6px; opacity: .30; -webkit-mask-image: radial-gradient(80% 80% at 70% 20%,#000,transparent 75%); mask-image: radial-gradient(80% 80% at 70% 20%,#000,transparent 75%); }
.page-hero__media .hero-bol { position: absolute; right: -50px; bottom: -50px; width: 320px; height: 320px; opacity: .55; }
.page-hero__media .hero-tag { position: absolute; left: 22px; bottom: 20px; right: 22px; color: #EAF1F2; font-family: var(--fv-ff-display); font-size: 1.05rem; letter-spacing: .01em; }
.page-hero__media .hero-tag span { color: var(--fv-gold-bright); }

/* DEEL D3 — shortcut-balk (sub-nav) duidelijker afgrenzen */
.sub-nav { border: 1px solid var(--fv-line-strong); border-radius: 12px; background: var(--fv-surface); margin-top: 6px; }
.sub-nav .container { padding-top: 12px; padding-bottom: 12px; }

@media (max-width: 760px) {
  .section-grid { grid-template-columns: 1fr; gap: 14px; }
  .fv-jump { flex-direction: row; justify-content: space-between; padding: 12px 16px; }
  .fv-jump::before { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 2px; }
  .fv-jump__label { writing-mode: horizontal-tb; transform: none; }
  .fv-jump:hover::before { height: 5px; width: auto; }
  .fv-jump:hover .fv-jump__chip { transform: translateX(6px); }
  .page-hero--media .page-hero__inner { grid-template-columns: 1fr; gap: 22px; }
  .page-hero__media { min-height: 200px; }
}

/* Foto-hero (watermerk-stijl): beeld vervaagt van links naar rechts, crème leidend */
.page-hero--photo{position:relative;overflow:hidden;background:radial-gradient(90% 120% at 90% 10%,rgba(30,104,117,.12),transparent 55%),var(--fv-surface)}
.page-hero--photo .page-hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.26;z-index:1;-webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 52%);mask-image:linear-gradient(90deg,transparent 4%,#000 52%)}
.page-hero--photo .page-hero__mesh{z-index:0}
.page-hero--photo .page-hero__inner{position:relative;z-index:3}
.page-hero--photo h1{max-width:20ch}
/* accentwoord in hero-titels: teal, niet cursief */
.hl{color:var(--fv-teal);font-style:normal}

/* Handelsmerk-vermelding in footer (klein, ingetogen) */
.ft-trademark{font-size:.72rem;color:#6E7B88;max-width:80ch;margin-top:8px;line-height:1.4}

/* Telefoon-onthulknop (anti-scrape): erft kleur, werkt op licht én donker */
.reveal-phone{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.reveal-phone:hover{color:var(--fv-gold-bright)}

/* ==========================================================================
   FINOVATEC-IT-LIVE-001 — toevoegingen voor it.finovatec.com

   Alles hierboven is 1-op-1 de stylesheet van finovatec.com, zodat kleuren,
   typografie, knoppen, kaarten, header en footer identiek zijn. Hieronder
   staat alleen wat deze site extra nodig heeft: een hero waarin de foto ECHT
   te zien is (niet als watermerk), dienstkaarten met een eigen beeld, en het
   ingetogen teaser-blok voor cybersecurity.
   ========================================================================== */

/* -- Hero met zichtbaar beeld -------------------------------------------
   .page-hero--media bestond al als leeg beeld-slot ("zodra Jort een beeld
   kiest"). Wij vullen dat slot met een echte <img> in plaats van een
   background-image: dat scheelt een aparte CSS-regel per pagina, laat de
   browser het beeld gewoon inladen (loading/decoding) en houdt het beeld
   uit de weg van screenreaders via alt="". */
.page-hero__media img.hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.page-hero__media::before { z-index: 1; }          /* hexmesh over de foto */
.page-hero__media .hero-tag { z-index: 3; }
/* Leesbare band onder het bijschrift; zonder deze laag valt witte tekst weg
   in een lichte foto (bijv. de kantoorfoto op Contact). */
.page-hero__media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(180deg, transparent, rgba(8,20,44,.78));
  z-index: 2; pointer-events: none;
}
.page-hero--media .page-hero__media { min-height: 340px; }
@media (max-width: 760px) { .page-hero--media .page-hero__media { min-height: 210px; } }

/* -- Dienstkaart met eigen foto ------------------------------------------
   Bouwt voort op .card (zelfde rand, radius, schaduw en hover) en zet er een
   beeldband bovenop. */
.svc-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.svc-card__photo { position: relative; aspect-ratio: 16 / 9; background: var(--fv-surface-alt); }
.svc-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.svc-card__body h3 { margin-bottom: .45rem; }
.svc-card__body > ul { margin: .3rem 0 1rem; padding-left: 1.1rem; }
.svc-card__body li { margin-bottom: .4rem; color: #33404f; }
.svc-card__body .link { margin-top: auto; align-self: flex-start; }

/* Dienst-secties op Services: beeld en tekst naast elkaar, om en om */
.svc-row { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: center;
  background: var(--fv-surface); border: 1px solid var(--fv-line); border-radius: var(--fv-r-lg);
  box-shadow: var(--fv-shadow-soft); padding: 26px; }
.svc-row + .svc-row { margin-top: 26px; }
.svc-row:nth-child(even) .svc-row__media { order: 2; }
.svc-row__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--fv-r-md); overflow: hidden;
  border: 1px solid var(--fv-line); }
.svc-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-row__text h2 { font-size: 1.5rem; margin-bottom: .45rem; }
.svc-row__text p { color: #33404f; }
.svc-row__text ul { margin: .5rem 0 0; padding-left: 1.15rem; }
.svc-row__text li { margin-bottom: .45rem; color: #33404f; }
.svc-num { font-family: var(--fv-ff-num); font-size: .8rem; letter-spacing: .18em; color: var(--fv-gold-text);
  display: block; margin-bottom: 8px; }
@media (max-width: 860px) {
  .svc-row { grid-template-columns: 1fr; gap: 22px; padding: 20px; }
  .svc-row:nth-child(even) .svc-row__media { order: 0; }
}

/* -- Teaser-blok (cybersecurity) -----------------------------------------
   Bewust GEEN <a>: er is nog geen pagina en geen site om heen te linken, dus
   het blok is niet klikbaar. De gouden rand markeert het als "in ontwikkeling"
   zonder de bezoeker een dode klik aan te bieden. */
.teaser { display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px; align-items: center;
  background: var(--fv-surface); border: 1px solid var(--fv-line-strong); border-radius: var(--fv-r-lg);
  box-shadow: var(--fv-shadow-soft); padding: 26px; position: relative; overflow: hidden; }
.teaser::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--fv-gold-edge); }
.teaser__media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--fv-r-md); overflow: hidden;
  border: 1px solid var(--fv-line); }
.teaser__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.teaser__text h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.teaser__text p { color: #33404f; margin-bottom: .6rem; }
.badge-soon { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fv-ff-num);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fv-gold-text);
  background: rgba(247,226,157,.28); border: 1px solid rgba(183,138,56,.45);
  border-radius: 999px; padding: 6px 13px; margin-bottom: 12px; }
.badge-soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fv-gold); flex: none; }
@media (max-width: 760px) { .teaser { grid-template-columns: 1fr; padding: 20px; } }

/* -- Kleine dingen -------------------------------------------------------- */
/* De kicker is op finovatec.com sitebreed uitgezet (`.eyebrow{display:none}`);
   we voeren hem hier niet opnieuw in, om precies dezelfde rust te houden. */

/* Tarieven-notitie: het dienstenpakket is nog in opbouw, dus geen prijslijst. */
.note-strip { display: flex; gap: 14px; align-items: flex-start;
  background: var(--fv-ok-bg); border: 1px solid var(--fv-line); border-left: 3px solid var(--fv-teal);
  border-radius: var(--fv-r-md); padding: 18px 20px; }
.note-strip p { margin: 0; color: #33505a; font-size: .96rem; }
.note-strip strong { color: var(--fv-ink); }

/* Formulierstatus die ook een fout leesbaar maakt */
.form-status[data-state="fout"] { color: #8A2B2B; }
.form-status[data-state="goed"] { color: var(--fv-teal); }

/* Een knop in de zijkaart moet zijn eigen kleur houden. `.aside-card a` zet
   alle links in die kaart op goud en dat is specifieker dan `.btn--primary`
   (klasse + elementtype wint van een losse klasse). Zonder deze regel staat er
   goudbruine tekst op een teal knop -- slecht leesbaar. */
.aside-card a.btn--primary { color: #FFFDF8; }
.aside-card a.btn--gold    { color: #2A1E07; }
.aside-card a.btn--ghost   { color: var(--fv-ink); }