/* ==========================================================================
   INSITELY COMPONENTS
   Samengevoegd uit drie stylesheets. Bevat geen hex-waarden en geen
   :root-blok: alle kleur en typografie komt uit insitely-tokens.css.
   Laad altijd in deze volgorde:
       insitely-tokens.css
       insitely.css
   ========================================================================== */


/* ==========================================================================
   PRIMAIRE KNOP
   Eén vorm voor de hele huisstijl. Navy vlak, Verde Scandal rand en tekst.
   Op een navy sectie valt de vulling weg en blijft de omlijning over, dus
   dezelfde klasse werkt op licht en op donker zonder variant.
   ========================================================================== */

.in-btn {
  display: inline-block;
  background: var(--in-btn-bg);
  color: var(--in-btn-text);
  border: 1px solid var(--in-btn-border);
  border-radius: var(--in-radius-btn, 20px);
  padding: 13px 26px;
  font-family: var(--in-font-body);
  font-size: 14px;
  font-weight: var(--in-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.in-btn:hover,
.in-btn:focus-visible {
  background: var(--in-btn-bg-hover);
  color: var(--in-btn-text-hover);
  text-decoration: none;
}
.in-btn:focus-visible { outline: 2px solid var(--in-focus); outline-offset: 2px; }
.in-btn:active { transform: translateY(1px); }

/* Op een donkere drager verdwijnt de vulling in de achtergrond. */
.in-section-dark .in-btn,
.in-btn--on-dark { background: transparent; }
.in-section-dark .in-btn:hover,
.in-btn--on-dark:hover { background: var(--in-btn-bg-hover); }


/* ==========================================================================
   ACCENTMARKERING
   De manier waarop Verde Scandal op een lichte drager mag verschijnen: als
   streep naast of boven iets, nooit als letter. Dit is het element dat het
   accent op wit laat werken zonder de contrastregel te breken.
   ========================================================================== */

.in-mark {
  border-left: 4px solid var(--in-verde-scandal);
  border-radius: 0;
  padding-left: 12px;
}
.in-mark-top {
  border-top: 3px solid var(--in-verde-scandal);
  border-radius: 0;
}
.in-mark-bottom {
  border-bottom: 3px solid var(--in-verde-scandal);
  border-radius: 0;
}

/* ==========================================================================
   WEB APP  (was static/css/insitelystyle.css)
   ========================================================================== */

/* ─── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }

/* De webapp centreert zijn kaarten verticaal. Dat mag niet gelden voor de
   publieke site, waar secties over de volle breedte lopen. Daarom hangt dit
   aan body.in-app in plaats van aan body. Zet class="in-app" op de body van
   elke template in templates/, niet op de pagina's in www/. */
body.in-app {
  background: var(--slate-50);
  color: var(--slate-800);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(15,77,112,0.07) 0%, transparent 65%);
}

body {
  font-family: var(--in-font-body);
  line-height: 1.6;
}

/* ─── Page Layout ────────────────────────────────────────────────── */
body.in-app main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 2rem;
}

.card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(10,37,64,0.06);
  padding: 2.5rem;
  width: 100%;
  max-width: 520px;
  animation: fadeUp 0.35s ease both;
}

.card-wide { max-width: 700px; }

.card-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--slate-100);
}

/* ─── Logo ──────────────────────────────────────────────────────── */
.logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.logo-wrap img {
  height: 52px;
  width: auto;
  border-radius: var(--radius-sm);
}

/* ─── Typography ─────────────────────────────────────────────────── */
.clsh1style {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--blue-900);
  letter-spacing: -0.04em;
  line-height: 1.2;
  text-align: center;
}
.clsh2style {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--blue-900);
  letter-spacing: -0.025em;
  line-height: 1.3;
  text-align: center;
}
.clsh3style {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--slate-600);
  text-align: center;
  line-height: 1.65;
}
.clslabelstyle {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--slate-600);
  letter-spacing: 0.01em;
  display: block;
  margin-bottom: 0.375rem;
}
.clspstyle {
  font-size: 0.9375rem;
  color: var(--slate-600);
  text-align: center;
  line-height: 1.6;
}

/* ─── Form Elements ──────────────────────────────────────────────── */
.form-group { margin-bottom: 1.125rem; }

.clsTextField,
.clsTextFieldwide {
  font-family: var(--in-font-body);
  font-size: 0.9375rem;
  color: var(--slate-800);
  background: var(--white);
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-md);
  padding: 0.45rem 0.875rem;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  appearance: none;
}
.clsTextField:hover, .clsTextFieldwide:hover { border-color: var(--slate-400); }
.clsTextField:focus, .clsTextFieldwide:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(46,142,200,0.12);
}

select.clsTextField {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

/* ─── Checkbox Cards ─────────────────────────────────────────────── */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0 1.25rem;
}
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
  background: var(--white);
}
.checkbox-item:hover { border-color: var(--blue-400); background: var(--blue-50); }
.checkbox-item input[type="checkbox"] {
  width: 1.0625rem;
  height: 1.0625rem;
  accent-color: var(--in-navy);
  cursor: pointer;
  flex-shrink: 0;
}
.checkbox-label {
  font-size: 0.9rem;
  color: var(--slate-700);
  font-weight: 400;
}

/* ─── Buttons ────────────────────────────────────────────────────── */
/* knoppen: alles is .in-btn, zie bovenaan dit bestand */

/* ─── Status / Feedback Cards ────────────────────────────────────── */
.status-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.75rem;
}
.status-icon.success { background: var(--success-bg); }
.status-icon.error   { background: var(--error-bg); }
.status-icon.info    { background: var(--blue-100); }

.error-card  { border-top: 3px solid var(--error) !important; }
.success-card{ border-top: 3px solid var(--accent) !important; }

/* ─── Health Badge ────────────────────────────────────────────────── */
.health-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(22,163,74,0.25);
  border-radius: 999px;
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 1rem;
}
.health-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.5; transform:scale(0.8); }
}

/* ─── Dropzone ────────────────────────────────────────────────────── */
.dropzone {
  border: 2px dashed var(--slate-200);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--slate-50);
  margin: 1.25rem 0;
}
.dropzone:hover, .dropzone.dragover {
  border-color: var(--blue-400);
  background: var(--blue-50);
}
.dropzone-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.dropzone .file-name {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--in-navy);
  background: var(--blue-50);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.75rem;
  display: inline-block;
}

/* ─── Search Group ────────────────────────────────────────────────── */
.search-group {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin: 1.25rem 0;
}
.search-group .clsTextField {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.06em;
}
.search-group .in-btn { width: auto; white-space: nowrap; }

/* ─── Divider ─────────────────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--slate-100); margin: 1.5rem 0; }

/* ─── Section labels ──────────────────────────────────────────────── */
.section-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate-400);
  margin-bottom: 0.625rem;
}

/* ─── Code / API key display ──────────────────────────────────────── */
.mono-field {
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}

/* ─── Animations ──────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .card { padding: 1.75rem 1.25rem; border-radius: var(--radius-lg); }
  .clsh1style { font-size: 1.4rem; }
  .clsh2style { font-size: 1.1rem; }
  .search-group { flex-direction: column; }
  .search-group .in-btn { width: 100%; }
}

/* ─── CustomerData Form ───────────────────────────────────────────── */
.portal-header {
  background: var(--in-navy);
  padding: 16px 32px 28px; text-align: center; color: var(--in-white);
}
.portal-header h1 { font-family: var(--in-font-body); font-size: 26px; font-weight: 800; margin-bottom: 6px; }
.portal-header p { color: rgba(255,255,255,.6); font-size: 14px; }

.form-wrapper { max-width: 620px; margin: -20px auto 0; padding: 0 16px 16px; position: relative; z-index: 1; }

.lang-row { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 6px; margin-top: -4px; }
.lang-row button {
  border: 1.5px solid var(--slate-200); padding: 5px 14px; border-radius: 16px;
  font-size: 12px; font-weight: 800; cursor: pointer;
  background: var(--white); color: var(--in-navy); transition: all .15s;
  font-family: var(--in-font-body);
}
.lang-row button.active { background: var(--in-verde-scandal); color: var(--in-ink); border-color: var(--in-verde-scandal); }

.form-card { background: var(--white); border-radius: 10px; box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 16px; }
.form-section { padding: 14px 26px; border-bottom: 1px solid var(--slate-200); }
.form-section:last-child { border-bottom: none; }
.form-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--slate-400); margin-bottom: 10px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.field-row.single { grid-template-columns: 1fr; }
.field-group { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.module-options { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.mod-card-form { border: 2px solid var(--slate-200); border-radius: 7px; padding: 14px; cursor: pointer; position: relative; transition: border-color .15s, background .15s; display: flex; flex-direction: column; min-width: 0; }
.mod-card-form:hover { border-color: var(--blue-500); background: var(--blue-50); }
.mod-card-form.sel { border-color: var(--in-verde-scandal); background: var(--blue-50); }
.mod-card-form h4 { font-size: 15px; font-weight: 800; color: var(--in-navy); margin-bottom: 3px; margin-top: 18px; word-break: break-word; }
.mod-card-form p { font-size: 13px; color: var(--slate-400); line-height: 1.4; word-break: break-word; }
.mod-badge-form { position: absolute; top: 8px; right: 8px; font-size: 9px; background: var(--in-navy); color: var(--in-white); padding: 2px 7px; border-radius: 8px; font-weight: 800; white-space: nowrap; }
.mod-card-form.sel .mod-badge-form { background: var(--in-verde-scandal); }

.connectors-wrap { display: none; margin-top: 14px; }
.connectors-wrap.visible { display: block; }
.connector-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--slate-200); font-size: 14px; color: var(--slate-700); cursor: pointer; }
.connector-item:last-child { border-bottom: none; }
.connector-item input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--in-navy); cursor: pointer; }
.connector-item label { font-size: 14px; font-weight: 400; color: var(--slate-700); text-transform: none; letter-spacing: 0; cursor: pointer; margin-bottom: 0; display: block; }

.conn-section-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--slate-400); margin-bottom: 4px; margin-top: 14px; }

.form-footer { padding: 18px 26px; background: var(--slate-50); border-top: 1px solid var(--slate-200); display: flex; align-items: center; justify-content: flex-end; }
.form-footer .in-btn { font-size: 13px; padding: 12px 28px; }

/* ─── CustomerData Form Responsive ────────────────────────────────── */
@media (max-width: 559px) {
  .portal-header { padding: 14px 20px 24px; }
  .portal-header h1 { font-size: 22px; }
  .form-wrapper { padding: 0 12px 16px; }
  .form-section { padding: 14px 18px; }
  .field-row { grid-template-columns: 1fr; gap: 8px; }
  .module-options { grid-template-columns: 1fr; gap: 10px; }
  .mod-card-form { padding: 12px 14px; }
  .mod-card-form h4 { margin-top: 4px; padding-right: 80px; }
  .mod-badge-form { top: 10px; right: 10px; }
  .form-footer { padding: 16px 18px; }
  .form-footer .in-btn { width: 100%; text-align: center; }
  .form-footer > div:first-child { display: none; }
}

.insitely-footer{background:var(--in-navy-deep);color:var(--in-light-blue);font-family: var(--in-font-body);padding:56px 24px 0;font-size:14px;line-height:1.5;}
.insitely-footer .if-grid{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:32px 40px;justify-content:space-between;}
.insitely-footer .if-col{flex:1 1 200px;min-width:180px;}
.insitely-footer h3{color:var(--in-white);font-size:13px;font-weight: 800;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 18px;padding-bottom:10px;position:relative;}
.insitely-footer h3::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:3px;background:var(--in-verde-scandal);border-radius:2px;}
.insitely-footer p{margin:0 0 10px;}
.insitely-footer a{color:var(--in-light-blue);text-decoration:none;transition:color .15s;}
.insitely-footer a:hover{color:var(--in-verde-scandal);}
.insitely-footer .if-bottom{max-width:1100px;margin:40px auto 0;padding:20px 0 28px;border-top:1px solid rgba(255,255,255,.12);font-size: 13px;color:var(--in-text-muted);}

/* ==========================================================================
   PUBLIEKE SITE  (was www/styles.css)
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--in-font-body);
  color: var(--navy);
  font-size: 16px;
  line-height: 1.6;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--in-text-link); text-decoration: underline; }
a:hover { text-decoration: underline; }
.main-nav a, .insitely-footer a, .logo { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.15; margin: 0 0 .6em; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Buttons: alle knoppen zijn .in-btn ---- */

/* ---- Site header -------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: 0 8px 40px rgba(0,0,0,.10);   /* soft grey halo below header, like the original */
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.site-header .logo img { height: 48px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 0; }
.main-nav a {
  color: var(--teal);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .9px;
  text-transform: uppercase;
  padding: 0 20px;
  position: relative;
}
/* haarlijn-scheiders tussen menu-items */
.main-nav a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: var(--in-line);
}
.main-nav a.active { color: var(--in-navy); border-bottom: 3px solid var(--in-verde-scandal); border-radius: 0; padding-bottom: 4px; }
.main-nav a:hover { text-decoration: none; color: var(--navy); }

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--in-navy);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.contact-link:hover { text-decoration: none; color: var(--in-blue-mid); }
.contact-link svg { width: 18px; height: 18px; fill: var(--in-navy); }

/* ---- Generic section ---------------------------------------------------- */
section { padding: 80px 0; }
.eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 16px;
}
.prose p { margin: 0 0 18px; color: var(--navy); font-weight: 400; }
.prose strong { color: var(--navy); font-weight: 800; }

/* ---- Hero (two columns) ------------------------------------------------- */
.hero .container {
  display: grid;
  min-width: 0;
  grid-template-columns: 1.15fr 1fr;  /* tekst krijgt voorrang, beeld ondersteunt */
  gap: 24px;
  align-items: start;
}
.hero.hero-text-only .container { grid-template-columns: 1fr; }
.hero.hero-text-only .hero-text { max-width: 840px; }

.hero h1.eyebrow { font-size: 13px; }
.hero .headline {
  font-size: 30px;
  text-wrap: balance;
  font-weight: 800;
  line-height: 1.12;
  color: var(--navy);
  margin: 0 0 24px;
}
.hero-text, .hero-image { min-width: 0; }
.hero-image {
  border-radius: 5px;
  overflow: hidden;
}
.hero-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 5px;
}
.hero-image.hero-image-diagram {
  border-radius: 0;
  overflow: visible;
}
.hero-image.hero-image-diagram img {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  object-fit: contain;
}

/* ---- Navy CTA band ------------------------------------------------------ */
.cta-band { background: var(--navy); color: var(--white); padding: 44px 0; }
.cta-band .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.cta-band p {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--white);
  max-width: 760px;
}
.cta-band p strong { font-weight: 800; }
.cta-band .in-btn { flex-shrink: 0; background: transparent; }

/* ---- Two-column block (vision / mission) -------------------------------- */
.two-col .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.two-col h2 { font-size: 30px; font-weight: 800; color: var(--navy); margin-bottom: 20px; }

/* ---- Founder (navy band, circular portrait overlapping) ----------------- */
.founder {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding-top: 90px;
}
.founder .portrait {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 10px solid var(--white);
  object-fit: cover;
  margin: -165px auto 30px;   /* overlap the white section above */
}
.founder blockquote {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.45;
  max-width: 720px;
  margin: 0 auto 24px;
  color: var(--white);
}
.founder .name {
  display: block;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--white);
}
.founder .name strong { font-weight: 800; }
.founder .role { font-size: 14px; color: rgba(255,255,255,.85); }

/* ---- Final CTA + form (two columns) ------------------------------------- */
.contact-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.contact-section .pitch {
  font-size: 26px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--teal);
  max-width: 424px;            /* wraps to 4 lines exactly like the original */
}
.contact-section .pitch strong { font-weight: 800; color: var(--teal); }

.contact-form { display: grid; gap: 22px; }
.contact-form label { font-weight: 800; font-size: 15px; color: var(--navy); display: block; margin-bottom: 8px; }
.contact-form .req { color: var(--in-error); }
.contact-form .name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form .sub { font-size: 13px; color: var(--grey); margin-top: 4px; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--in-font-body);
  font-size: 16px;
  color: var(--navy);
  background: var(--mint);
  border: 1px solid var(--mint);
  border-radius: 3px;
}
.contact-form textarea { min-height: 150px; resize: vertical; }   /* mint fill, same as the other fields */
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.contact-form .in-btn { justify-self: start; }   /* compact submit, not full-width */

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: var(--footer); color: rgba(255,255,255,.85); padding: 70px 0 26px; font-size: 16px; }
.footer-cols {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.site-footer h5 {
  color: var(--white);
  font-size: 17px;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0 0 22px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.site-footer li svg { width: 18px; height: 18px; fill: var(--teal); flex-shrink: 0; }
.site-footer a { color: rgba(255,255,255,.85); }
.site-footer a:hover { color: var(--white); }
.site-footer address { font-style: normal; line-height: 2; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 54px;
  padding-top: 24px;
  text-align: center;
  font-size: 14px;
}
.footer-bottom a { color: rgba(255,255,255,.85); margin: 0 14px; }

/* ====================================================================== */
/*  HOME PAGE                                                              */
/* ====================================================================== */

/* Full-bleed hero: photo + navy radial overlay, white text on the left */
.home-hero {
  background-image:
    radial-gradient(at 100% 100%, rgba(255,255,255,.17) 0%, var(--navy) 75%),
    url('https://www.insitely.eu/wp-content/uploads/2024/04/homepage-background.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  color: var(--white);
  padding: 100px 0 110px;
}
.home-hero .hero-content { max-width: 520px; }
.home-hero h1 {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -.5px;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 22px;
}
.home-hero p { color: var(--white); margin: 0 0 18px; font-size: 18px; }
.home-hero p strong { font-weight: 800; }
.home-hero .in-btn { margin-top: 14px; background: transparent; }

/* How it works, two columns (text + integrations) */
.how .container { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.how h2 { font-size: 30px; font-weight: 800; color: var(--navy); }
.how ul { margin: 0 0 18px; padding-left: 20px; }
.how li { margin-bottom: 8px; }
.integrations h2 { font-size: 24px; margin-bottom: 8px; }
.integrations .muted { color: var(--grey); margin: 0 0 26px; }
.integrations-logos { display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
.integrations-logos img { max-height: 56px; width: auto; }

/* Navy quote band (centred bold statement) */
.quote-band { background: var(--navy); color: var(--white); text-align: center; padding: 64px 0; }
.quote-band p { font-size: 24px; font-weight: 800; line-height: 1.4; max-width: 760px; margin: 0 auto; color: var(--white); }

/* ====================================================================== */
/*  FINANCIAL REPORTING PAGE                                               */
/* ====================================================================== */

/* Checklist in the hero */
.check-list { list-style: none; padding: 0; margin: 0 0 14px; }
.check-list li { position: relative; padding-left: 26px; margin-bottom: 2px; line-height: 1.5; }
.check-list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--teal); font-weight: 800;
}

/* Navy services band with three cards */
/* Links op een donkere drager. Navy op navy is contrast 1,0 en dus onleesbaar.
   De canon schrijft Light Blue voor, contrast 9,8 op navy. */
.services a:not(.in-btn),
.quote-band a:not(.in-btn),
.cta-band a:not(.in-btn) { color: var(--in-text-link-dark); }

.services { background: var(--navy); color: var(--white); text-align: center; }
.services > .container > h2 { color: var(--white); font-size: 30px; font-weight: 800; margin-bottom: 50px; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; text-align: left; }
.service-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.service-icon {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--white); color: var(--navy); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.service-icon svg { width: 38px; height: 38px; }
.services-grid h3 { color: var(--white); font-size: 21px; font-weight: 800; line-height: 1.25; margin: 0; }
.services-grid p { color: rgba(255,255,255,.82); margin: 0; }
.services-grid p strong { color: var(--white); font-weight: 800; }

/* ====================================================================== */
/*  LEGAL PAGES (privacy / cookie)                                         */
/* ====================================================================== */
.legal { padding: 56px 0 80px; }
.legal .container { max-width: 860px; }
.legal h1 { font-size: 38px; font-weight: 800; color: var(--navy); margin: 0 0 6px; }
.legal .updated { color: var(--grey); font-size: 15px; margin: 0 0 32px; }
.legal h2 { font-size: 24px; font-weight: 800; color: var(--navy); margin: 40px 0 14px; }
.legal h3 { font-size: 18px; font-weight: 800; color: var(--navy); margin: 26px 0 8px; }
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal address { font-style: normal; line-height: 1.7; }
.legal a { word-break: break-word; }
.legal table { border-collapse: collapse; width: 100%; margin: 0 0 16px; }
.legal th, .legal td { border: 1px solid var(--in-line); padding: 10px 12px; text-align: left; font-size: 15px; vertical-align: top; }
.legal th { background: var(--mint); font-weight: 800; }

/* Translation note banner */
.legal-note {
  background: var(--mint);
  border-left: 4px solid var(--teal);
  border-radius: 0;
  padding: 16px 20px;
  margin: 0 0 36px;
  font-size: 15px;
  color: var(--navy);
}
.legal-note strong { font-weight: 800; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 920px) {
  .hero .container,
  .two-col .container,
  .how .container,
  .services-grid,
  .contact-section .container { grid-template-columns: 1fr; gap: 40px; }
  .hero-image img { min-height: 300px; }
  .cta-band .container { flex-direction: column; align-items: flex-start; }
  .home-hero h1 { font-size: 36px; }
  .main-nav { gap: 0; }
}
@media (max-width: 768px) {
  .site-header .container { flex-wrap: wrap; }
  .main-nav a { padding: 0 12px; }
  .site-header .logo img { height: 40px; }
}
@media (max-width: 600px) {
  section { padding: 56px 0; }
  .hero .headline { font-size: 26px; }
  .home-hero h1 { font-size: 30px; }
  .logo-strip { gap: 32px; }
  .integrations-logos { gap: 32px; }
}

/* ==========================================================================
   GEDEELDE FOOTER  (was templates/insitely-footer.css)
   ========================================================================== */

.insitely-footer{background:var(--in-navy-deep);color:var(--in-light-blue);font-family: var(--in-font-body);padding:56px 24px 0;font-size:14px;line-height:1.5;}
.insitely-footer .if-grid{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:32px 40px;justify-content:space-between;}
.insitely-footer .if-col{flex:1 1 200px;min-width:180px;}
.insitely-footer h3{color:var(--in-white);font-size:13px;font-weight: 800;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 18px;padding-bottom:10px;position:relative;}
.insitely-footer h3::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:3px;background:var(--in-verde-scandal);border-radius:2px;}
.insitely-footer p{margin:0 0 10px;}
.insitely-footer a{color:var(--in-light-blue);text-decoration:none;transition:color .15s;}
.insitely-footer a:hover{color:var(--in-verde-scandal);}
.insitely-footer .if-bottom{max-width:1100px;margin:40px auto 0;padding:20px 0 28px;border-top:1px solid rgba(255,255,255,.12);font-size: 13px;color:var(--in-text-muted);}

/* ==========================================================================
   GROWTH MODEL  (was templates/growthmodel_addgrowth.html)
   ========================================================================== */

body.page-gm { background: var(--in-wash); color: var(--in-ink); padding: 40px 24px; display: block; background-image: none; }
.page-gm .container { max-width: 880px; margin: 0 auto; padding: 0; }
.page-gm .header-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
.page-gm h1 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 4px; }
.page-gm .subtitle { color: var(--in-text-muted); font-size: 0.9rem; }
.page-gm .lang-toggle { display: flex; gap: 4px; background: var(--in-line); padding: 4px; border-radius: 20px; }
.page-gm .lang-btn { padding: 6px 16px; border-radius: 16px; font-size: 12px; font-weight: 800; cursor: pointer; text-decoration: none; color: var(--in-text-muted); transition: all .2s; }
.page-gm .lang-btn.active { background: var(--in-verde-scandal); color: var(--in-text-on-verde-scandal); }
.page-gm .panel { background: var(--in-white); border: 1px solid var(--in-line); border-radius: 8px; padding: 20px 24px; margin-bottom: 20px; }
.page-gm .panel-title { font-size: 0.78rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--in-text-muted); margin-bottom: 14px; }
.page-gm label { font-size: 0.85rem; color: var(--in-text-muted); display: block; margin-bottom: 6px; }
.page-gm select, .page-gm input[type="text"], .page-gm input[type="number"] { font: inherit; padding: 8px 10px; border: 1px solid var(--in-line); border-radius: 6px; background: var(--in-white); color: var(--in-ink); width: 100%; }
.page-gm select:focus, .page-gm input:focus { outline: 2px solid var(--in-blue-mid); outline-offset: 1px; border-color: var(--in-blue-mid); }
.page-gm input::placeholder { color: var(--in-text-muted); font-style: italic; font-size: 0.85em; }
.page-gm .entity-row { display: flex; gap: 16px; align-items: flex-end; }
.page-gm .entity-row .field { flex: 1; max-width: 320px; }
.page-gm table { width: 100%; border-collapse: collapse; }
.page-gm th { text-align: left; font-size: 0.78rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--in-text-muted); padding: 0 8px 10px 8px; border-bottom: 1px solid var(--in-line); }
.page-gm td { padding: 8px; border-bottom: 1px solid var(--in-line); vertical-align: middle; }
.page-gm td input { min-width: 0; }
.page-gm .col-type { width: 40%; }
.page-gm .col-pct { width: 18%; }
.page-gm .col-year { width: 18%; }
.page-gm .col-actions { width: 24%; white-space: nowrap; text-align: right; }
.page-gm button { font: inherit; font-size: 0.85rem; padding: 8px 14px; border: 1px solid var(--in-line); border-radius: 6px; background: var(--in-white); color: var(--in-ink); cursor: pointer; }
.page-gm button:hover { border-color: var(--in-border-strong); }
.page-gm button.danger { color: var(--in-error); }
.page-gm button.danger:hover { border-color: var(--in-error); }
.page-gm button.icon { padding: 6px 10px; }
.page-gm .in-btn { font-size: 0.85rem; padding: 8px 18px; border-radius: 6px; }
.page-gm .row-actions form { display: inline; }
.page-gm .add-row td { background: var(--in-blue-50); border-bottom: none; border-radius: 6px; }
.page-gm .refresh-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.page-gm .refresh-note { font-size: 0.85rem; color: var(--in-text-muted); }
.page-gm .flash { background: var(--in-success-bg); border: 1px solid var(--in-success); color: var(--in-success); border-radius: 6px; padding: 10px 14px; font-size: 0.9rem; margin-bottom: 20px; }
.page-gm .refresh-message { margin-top: 14px; background: var(--in-error-bg); border: 1px solid var(--in-error); color: var(--in-error); border-radius: 6px; padding: 10px 14px; font-size: 0.9rem; font-weight: 500; }
.page-gm .empty { color: var(--in-text-muted); font-size: 0.9rem; padding: 16px 8px; }

/* ==========================================================================
   BTB REFRESH  (was templates/btb_refresh.htm)
   ========================================================================== */

body.page-btb { margin: 0; background: var(--in-wash); color: var(--in-ink); display: block; background-image: none; }
.page-btb .topbar { background: var(--in-navy); padding: 18px 24px; }
.page-btb .topbar img { height: 30px; }
.page-btb .wrap { max-width: 460px; margin: 48px auto; padding: 0 16px; }
.page-btb .card { background: var(--in-white); border: 1px solid var(--in-line); border-radius: 10px; padding: 28px; max-width: none; box-shadow: none; animation: none; }
.page-btb h1 { font-size: 20px; margin: 0 0 6px; }
.page-btb .sub { font-size: 14px; color: var(--in-text-muted); margin: 0 0 22px; line-height: 1.5; }
.page-btb label { display: block; font-size: 13px; font-weight: 500; margin: 16px 0 6px; }
.page-btb input { width: 100%; padding: 11px 12px; border: 1.5px solid var(--in-line); border-radius: 6px; font-size: 14px; }
.page-btb input:focus { outline: none; border-color: var(--in-navy); }
.page-btb .in-btn { margin-top: 22px; width: 100%; text-align: center; }
.page-btb .status { margin-bottom: 20px; padding: 12px 14px; border-radius: 6px; font-size: 14px; line-height: 1.45; }
.page-btb .status-success { background: var(--in-success-bg); color: var(--in-success); border: 1px solid var(--in-success); }
.page-btb .status-error { background: var(--in-error-bg); color: var(--in-error); border: 1px solid var(--in-error); }
.page-btb .foot { font-size: 12px; color: var(--in-text-muted); margin-top: 18px; text-align: center; }

/* ==========================================================================
   UPLOAD  (was het style-blok van templates/upload.htm)
   ========================================================================== */

.page-upload .lang-toggle { display: flex; gap: 0; border: 1.5px solid var(--in-blue-100); border-radius: 8px; overflow: hidden; width: fit-content; margin-left: auto; margin-bottom: 1.25rem; }
.page-upload .lang-toggle button { padding: 5px 14px; font-size: 13px; font-weight: 500; border: none; background: transparent; color: var(--in-blue-mid); cursor: pointer; transition: background 0.15s, color 0.15s; letter-spacing: 0.03em; }
.page-upload .lang-toggle button.active { background: var(--in-navy); color: var(--in-white); }
.page-upload .error-banner { background: var(--in-error-bg); border: 1.5px solid var(--in-error); border-radius: 8px; color: var(--in-error); font-size: 14px; font-weight: 500; padding: 10px 14px; margin-bottom: 1rem; }
.page-upload .success-banner { background: var(--in-success-bg); border: 1.5px solid var(--in-success); border-radius: 8px; color: var(--in-success); font-size: 14px; font-weight: 500; padding: 10px 14px; margin-bottom: 1rem; }
.page-upload .dropzone { border: 2px dashed var(--in-blue-100); border-radius: 10px; padding: 2rem 1.5rem; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; background: var(--in-blue-50); margin: 0 0 0.25rem 0; }
.page-upload .dropzone:hover, .page-upload .dropzone.dragover { border-color: var(--in-blue-mid); background: var(--in-blue-100); }
.page-upload .dropzone-icon { font-size: 2.2rem; margin-bottom: 0.5rem; line-height: 1; }
.page-upload .dropzone .clspstyle { margin: 0 0 0.25rem 0; color: var(--in-navy); font-size: 14px; }
.page-upload .dropzone .file-hint { font-size: 12px; color: var(--in-blue-mid); margin: 0; }
.page-upload .file-name { display: inline-block; margin-top: 0.6rem; background: var(--in-navy); color: var(--in-white); border-radius: 6px; padding: 3px 12px; font-size: 13px; font-weight: 500; word-break: break-all; }
.page-upload .progress-wrap { display: none; margin-top: 0.75rem; }
.page-upload .progress-bar-track { background: var(--in-blue-100); border-radius: 99px; height: 7px; overflow: hidden; }
.page-upload .progress-bar-fill { height: 100%; width: 0%; background: var(--in-navy); border-radius: 99px; transition: width 0.3s ease; }
.page-upload .progress-label { font-size: 12px; color: var(--in-blue-mid); margin-top: 4px; text-align: right; }
.page-upload .accepted-types { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
.page-upload .type-badge { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 4px; background: var(--in-blue-100); color: var(--in-navy); border: 1px solid var(--in-blue-100); }
.page-upload .hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ==========================================================================
   PROSPECTS FORM  (was het style-blok van Prospects/templates/form.htm)
   ========================================================================== */

body.page-prospects { margin: 0; background: var(--in-wash); color: var(--in-ink); min-height: 100vh; display: flex; flex-direction: column; background-image: none; }
.page-prospects .page-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.page-prospects .card { background: var(--in-white); border: 1px solid var(--in-line); border-radius: 12px; padding: 48px; width: 100%; max-width: 540px; box-shadow: 0 1px 3px rgba(10, 37, 64, 0.04), 0 4px 24px rgba(10, 37, 64, 0.06); animation: none; }
.page-prospects h1 { margin: 0 0 8px 0; font-size: 26px; font-weight: 800; color: var(--in-navy); letter-spacing: -0.01em; }
.page-prospects .subtitle { margin: 0 0 32px 0; color: var(--in-text-muted); font-size: 14px; }
.page-prospects .field { margin-bottom: 20px; }
.page-prospects label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--in-navy); }
.page-prospects input[type="text"], .page-prospects input[type="number"], .page-prospects select { width: 100%; padding: 12px 14px; font-size: 15px; font-family: inherit; border: 1px solid var(--in-line); border-radius: 8px; background: var(--in-white); color: var(--in-ink); transition: border-color 0.15s, box-shadow 0.15s; }
.page-prospects input[type="text"]:focus, .page-prospects input[type="number"]:focus, .page-prospects select:focus { outline: none; border-color: var(--in-navy); box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.08); }
.page-prospects .hint { margin-top: 6px; font-size: 12px; color: var(--in-text-muted); }
.page-prospects .in-btn { width: 100%; margin-top: 8px; text-align: center; }
.page-prospects .in-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.page-prospects .alert { padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; display: none; }
.page-prospects .alert-error { background: var(--in-error-bg); border: 1px solid var(--in-error); color: var(--in-error); }
.page-prospects .alert-success { background: var(--in-success-bg); border: 1px solid var(--in-success); color: var(--in-success); }
.page-prospects .row { display: flex; gap: 16px; }
.page-prospects .row > .field { flex: 1; }
.page-prospects .footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--in-line); font-size: 11px; color: var(--in-text-muted); text-align: center; }
.page-prospects .overlay { position: fixed; inset: 0; background: rgba(0, 40, 68, 0.85); display: none; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(2px); }
.page-prospects .overlay.visible { display: flex; }
.page-prospects .overlay-content { background: var(--in-white); padding: 32px 40px; border-radius: 12px; text-align: center; max-width: 380px; }
.page-prospects .overlay-content h2 { margin: 0 0 8px 0; color: var(--in-navy); font-size: 18px; }
.page-prospects .overlay-content p { margin: 0 0 20px 0; color: var(--in-text-muted); font-size: 13px; }
.page-prospects .spinner { width: 40px; height: 40px; margin: 0 auto 16px auto; border: 3px solid var(--in-line); border-top-color: var(--in-verde-scandal); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   SEO-OVERZICHT  (was het style-blok van www/seo-meta-tags.html)
   ========================================================================== */

body.page-seo { color: var(--in-navy); max-width: 900px; margin: 0 auto; padding: 40px 24px 80px; line-height: 1.6; background: var(--in-white); display: block; background-image: none; }
.page-seo h1 { font-size: 32px; margin: 0 0 6px; font-weight: 500; }
.page-seo .sub { color: var(--in-text-muted); margin: 0 0 28px; }
.page-seo h2 { font-size: 20px; margin: 34px 0 4px; color: var(--in-navy); font-weight: 500; }
.page-seo .src { color: var(--in-blue-mid); font-size: 14px; margin: 0 0 10px; word-break: break-all; }
.page-seo pre { background: var(--in-wash); border: 1px solid var(--in-line); border-left: 4px solid var(--in-blue-mid); border-radius: 4px; padding: 14px 16px; overflow: auto; font-size: 13px; line-height: 1.55; font-family: var(--in-font-mono); color: var(--in-ink); }
.page-seo .note { background: var(--in-wash); border-left: 4px solid var(--in-blue-mid); padding: 16px 20px; border-radius: 4px; margin: 0 0 28px; font-size: 15px; }
.page-seo .summary { background: var(--in-wash); border: 1px solid var(--in-line); border-left: 4px solid var(--in-verde-scandal); border-radius: 0; padding: 18px 22px; margin-top: 40px; }
.page-seo code { font-family: var(--in-font-mono); }
.page-seo hr { border: none; border-top: 1px solid var(--in-line); margin: 28px 0; }

/* ==========================================================================
   HEADER, GECENTREERD MENU EN HAMBURGER
   Toegevoegd 13-08-2026. Het menu staat gecentreerd tussen logo en contact,
   elk item blijft op een regel, en onder 960px klapt alles in een hamburger.
   De knop wordt door insitely-nav.js in de header gezet, er staat dus geen
   extra markup in de dertig paginas.
   ========================================================================== */

.site-header .container { position: relative; }
.site-header .logo { flex: 0 0 auto; }
.site-header .logo img { max-width: none; }
.site-header .contact-link { flex: 0 0 auto; }
.main-nav { flex: 1 1 auto; justify-content: center; min-width: 0; }
.main-nav a { white-space: nowrap; }

@media (max-width: 1180px) {
  .main-nav a { padding: 0 13px; letter-spacing: .4px; }
  .contact-link { font-size: 14px; }
}

@media (max-width: 1040px) {
  .main-nav a { padding: 0 10px; font-size: 12px; }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--in-line);
  border-radius: var(--in-radius-sm);
  background: var(--in-white);
  cursor: pointer;
  flex: 0 0 auto;
}
.nav-toggle:focus-visible { outline: 2px solid var(--in-focus); outline-offset: 2px; }
.nav-toggle span {
  display: block;
  position: relative;
  width: 20px;
  height: 2px;
  background: var(--in-navy);
  transition: background .15s ease;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--in-navy);
  transition: transform .18s ease, top .18s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

.site-header.nav-open .nav-toggle span { background: transparent; }
.site-header.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.site-header.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 960px) {
  .site-header .container { flex-wrap: nowrap; gap: 12px; }
  .nav-toggle { display: inline-flex; order: 3; }
  .contact-link { order: 2; margin-left: auto; }
  .site-header .logo { order: 1; }

  .main-nav {
    order: 4;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--in-white);
    border-top: 1px solid var(--in-line);
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
    padding: 8px 0 12px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  .site-header.nav-open .main-nav { display: flex; }
  .main-nav a {
    padding: 14px 24px;
    font-size: 14px;
    letter-spacing: .6px;
    border-bottom: 1px solid var(--in-line);
  }
  .main-nav a:last-child { border-bottom: none; }
  .main-nav a + a::before { display: none; }
  .main-nav a.active {
    border-bottom: 1px solid var(--in-line);
    border-left: 4px solid var(--in-verde-scandal);
    padding-left: 20px;
    padding-bottom: 14px;
  }
}

@media (max-width: 600px) {
  .site-header .logo img { height: 36px; }
  .contact-link { font-size: 13px; }
}

/* ---- Brede figuur met bijschrift ---------------------------------------- */
.section-figure { padding: 44px 0 40px; }
.figure-wide { margin: 0; }
.figure-wide a { display: block; }
.figure-wide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--in-radius-sm);
  box-shadow: var(--in-shadow-card);
}
.figure-wide figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--in-text-muted);
  max-width: 860px;
}

/* ---- Proefperiode-CTA, nog verborgen -------------------------------------
   De knoppen staan klaar op home en financial-reporting, in beide talen.
   Haal de regel hieronder weg zodra de volledige flow werkt: algemene
   voorwaarden, telefoonnummer op het formulier, fair use en provisioning.
   Dat is de enige schakelaar, er staat verder niets verborgen in de HTML. */
.cta-trial { /* display: none; */ }   /* TEST: zet de display-regel terug om ze te verbergen */


/* ==========================================================================
   LINK NAAR DE PROFIELPAGINA ONDER DE FOUNDER-QUOTE
   ========================================================================== */

.founder .founder-link { margin-top: 30px; font-size: 15px; }
.founder .founder-link a.in-btn { display: inline-flex; align-items: center; }


/* ==========================================================================
   KLANTENREVIEWS
   Navy band met het citaat gecentreerd, in dezelfde vorm als de founder-band.
   Boven het citaat staat een witte cirkel met het logo van de klant. Zolang
   dat logo er niet is toont de cirkel de bedrijfsnaam.
   Eén citaat vult de band over de volle breedte, meerdere citaten komen naast
   elkaar in een raster met een kleinere cirkel.
   ========================================================================== */

.testimonials {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 62px 0 46px;
}
.testimonials > .container > h2 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--in-verde-scandal);
  margin: 0 0 34px;
}
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px 32px;
  align-items: start;
}
.testimonial { margin: 0; text-align: center; }
.testimonial-logo {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: var(--white);
  border: 8px solid var(--white);
  margin: 0 auto 18px;
  box-shadow: 0 0 0 1px var(--in-line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.testimonial-logo img {
  max-width: 78%;
  max-height: 62%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.testimonial-logo-photo img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonial-logo span {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--navy);
  padding: 0 8px;
  text-wrap: balance;
}
.testimonial blockquote {
  margin: 0 auto 16px;
  padding: 0;
  border: 0;
  max-width: 640px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--white);
}
.testimonial blockquote p { margin: 0 0 14px; }
.testimonial blockquote p:last-child { margin-bottom: 0; }
.testimonial figcaption { display: block; }
.testimonial-name {
  display: block;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--white);
}
.testimonial-role {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--in-mist);
}

.testimonials-single { padding: 62px 0 46px; }
.testimonials-single .testimonial-grid { grid-template-columns: 1fr; }
.testimonials-single > .container > .testimonial-logo {
  width: 132px;
  height: 132px;
  border-width: 9px;
  margin: -76px auto 20px;
}
.testimonials-single .testimonial blockquote {
  max-width: 760px;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.4;
}
.testimonials-single .testimonial-logo span { font-size: 15px; }

.testimonials-light { background: var(--white); }
.testimonials-light > .container > h2 { color: var(--in-blue-mid); }
.testimonials-light .testimonial-logo {
  background: var(--in-wash);
  border-color: var(--in-wash);
  box-shadow: 0 0 0 1px var(--in-line);
}
.testimonials-light .testimonial blockquote { color: var(--navy); }
.testimonials-light .testimonial-name { color: var(--navy); }
.testimonials-light .testimonial-role { color: var(--in-text-muted); }
.testimonials-light.testimonials-single > .container > .testimonial-logo { margin-top: 0; }
.testimonials-light.testimonials-single { padding: 56px 0 56px; }

@media (max-width: 920px) {
  .testimonials { padding: 64px 0 48px; }
  .testimonials > .container > h2 { margin-bottom: 34px; }
  .testimonial-grid { gap: 44px 24px; }
  .testimonials-single { padding: 48px 0 40px; }
  .testimonials-single > .container > .testimonial-logo {
    width: 108px;
    height: 108px;
    border-width: 8px;
    margin: -62px auto 18px;
  }
  .testimonials-single .testimonial blockquote { font-size: 19px; }
}


/* ==========================================================================
   BIJSCHRIFT ONDER DE BREDE FIGUUR
   Geen breedtebeperking, zodat het bijschrift op één regel staat.
   ========================================================================== */

.figure-wide figcaption { max-width: none; }


/* ==========================================================================
   FOOTER
   Dezelfde navy als de banners. De donkerdere navy-deep viel op als een
   aparte kleur onderaan de pagina.
   ========================================================================== */

.insitely-footer { background: var(--navy); }
.site-footer { background: var(--navy); }


/* ==========================================================================
   LICHTE VARIANT VAN DE SERVICES-BAND
   Zelfde opbouw, witte achtergrond. Het icoonrondje keert om, want een wit
   rondje op wit is onzichtbaar.
   ========================================================================== */

.services-light { background: var(--white); color: var(--navy); }
.services-light > .container > h2 { color: var(--navy); }
.services-light .service-icon { background: var(--navy); color: var(--white); }
.services-light .services-grid h3 { color: var(--navy); }
.services-light .services-grid p { color: var(--in-text-muted); }
.services-light .services-grid p strong { color: var(--navy); }


/* ==========================================================================
   REVIEWSPAGINA
   Eén review per rij, geschrankt: logo links met tekst rechts, dan omgekeerd.
   De rijen wisselen navy en wit af, zodat het patroon van de rest van de
   site doorloopt.
   ========================================================================== */

.review-row { padding: 54px 0; }
.review-row .container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  align-items: center;
}
.review-row.review-row-mirrored .container { grid-template-columns: 1fr 200px; }
.review-row.review-row-mirrored .review-logo { order: 2; }
.review-row.review-row-mirrored .review-body { order: 1; }
.review-logo {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--in-line);
}
.review-logo img { max-width: 74%; max-height: 58%; object-fit: contain; }
.review-logo-photo img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; }
.review-logo span {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--navy);
  text-align: center;
  padding: 0 12px;
  text-wrap: balance;
}
.review-body blockquote {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 400;
}
.review-body blockquote p { margin: 0 0 14px; }
.review-body blockquote p:last-child { margin-bottom: 0; }
.review-name {
  display: block;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 800;
}
.review-role { display: block; margin-top: 4px; font-size: 14px; }

.review-row-dark { background: var(--navy); }
.review-row-dark .review-body blockquote { color: var(--white); }
.review-row-dark .review-name { color: var(--white); }
.review-row-dark .review-role { color: var(--in-mist); }

.review-row-light { background: var(--white); }
.review-row-light .review-logo { background: var(--in-wash); }
.review-row-light .review-body blockquote { color: var(--navy); }
.review-row-light .review-name { color: var(--navy); }
.review-row-light .review-role { color: var(--in-text-muted); }

.reviews-intro { padding: 56px 0 8px; }
.reviews-intro h1 { font-size: 38px; font-weight: 800; color: var(--navy); margin: 0 0 12px; }
.reviews-intro p { color: var(--in-text-muted); margin: 0; font-size: 17px; }

@media (max-width: 920px) {
  .review-row { padding: 40px 0; }
  .review-row .container,
  .review-row.review-row-mirrored .container { grid-template-columns: 1fr; gap: 24px; }
  .review-row.review-row-mirrored .review-logo { order: 0; }
  .review-row.review-row-mirrored .review-body { order: 0; }
  .review-logo { width: 132px; height: 132px; }
  .review-body blockquote { font-size: 17px; }
  .reviews-intro h1 { font-size: 30px; }
}


/* ==========================================================================
   SCHEMA IN DE HERO
   Het navy paneel rekte mee met de tekstkolom, waardoor het schema uitgerekt
   oogde. Vaste 16 op 9 en bovenaan uitgelijnd, dus het paneel stopt ruim
   boven de knop.
   ========================================================================== */

.hero-image.hero-image-diagram { align-self: start; min-height: 0; }
.hero-image.hero-image-diagram img { aspect-ratio: 3 / 2; min-height: 0; height: auto; object-fit: contain; }
.hero:has(.hero-image-diagram) .container { grid-template-columns: 1fr 1.12fr; }


/* ==========================================================================
   TEKST ONDER HET SCHEMA IN DE HERO
   ========================================================================== */

.hero-image-note { margin-top: 22px; }
.hero-image-note p { margin: 0; }


/* ==========================================================================
   PORTRET IN PLAATS VAN LOGO
   Een logo staat vrij in de cirkel met wat lucht eromheen. Een portret vult
   de cirkel volledig, net als de founder-foto.
   ========================================================================== */

.testimonial-logo.is-portrait img,
.review-logo.is-portrait img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
}
.testimonial-logo.is-portrait,
.review-logo.is-portrait { background: var(--white); }