/* =============================================================================
   Jafix Design System — Colors & Type
   Source of truth: tailwind.config.js + base.css from the Jafix Drupal theme.
   ============================================================================= */

/* ---------- FONTS ---------- */
@font-face {
  font-family: 'Graphik';
  src: url('/assets/fonts/graphik/Graphik-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('/assets/fonts/graphik/Graphik-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('/assets/fonts/graphik/Graphik-RegularItalic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('/assets/fonts/graphik/Graphik-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('/assets/fonts/graphik/Graphik-Semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('/assets/fonts/graphik/Graphik-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('/assets/fonts/graphik/Graphik-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* ---------- BRAND PALETTE ---------- */
  /* Greens — primary brand */
  --jafix-dark-green:        #194E3A;
  --jafix-dark-green-darker: #16332f;
  --jafix-dark-green-lighter:#2a6659;
  --jafix-mid-green:         #1D7050;
  --jafix-mid-green-darker:  #195842;
  --jafix-mid-green-lighter: #358f70;
  --jafix-turquoise:         #61B0AA;
  --jafix-turquoise-lighter: #75C5BF;
  --jafix-turquoise-darker:  #2e6e69;
  --jafix-fresh-green:       #3EFFBB;
  --jafix-fresh-green-lighter:#99FFDD;
  --jafix-fresh-green-darker:#2FCC96;

  /* Accents — yellow + orange (CTA / warning) */
  --jafix-yellow:            #FFC620;
  --jafix-yellow-lighter:    #FFDC73;
  --jafix-yellow-lightest:   #FFE7A3;
  --jafix-yellow-darker:     #F7B500;
  --jafix-orange:            #F79400;
  --jafix-orange-lighter:    #FFA620;
  --jafix-orange-darker:     #A06000;

  /* Neutrals */
  --jafix-white:             #FFFFFF;
  --jafix-light-grey:        #F4F4F4;
  --jafix-mid-grey:          #D9D9D9;
  --jafix-grey:              #6E6E6E;
  --jafix-grey-darker:       #666666;
  --jafix-dark-grey:         #2B2B2B;
  --jafix-black:             #000000;

  /* Warm neutral — used as section background */
  --jafix-beige:             #F3EBE5;
  --jafix-beige-lighter:     #FAF4F1;
  --jafix-beige-darker:      #D9CEC3;

  /* ---------- SEMANTIC ROLES ---------- */
  --fg-1:        var(--jafix-dark-grey);     /* primary text */
  --fg-2:        var(--jafix-grey-darker);   /* secondary text */
  --fg-muted:    var(--jafix-grey);          /* tertiary / metadata */
  --fg-brand:    var(--jafix-dark-green);    /* brand headings, links */
  --fg-link:     var(--jafix-mid-green);
  --fg-link-hover: var(--jafix-dark-green);
  --fg-on-dark:  var(--jafix-white);

  --bg-page:     var(--jafix-white);
  --bg-section:  var(--jafix-beige);         /* warm section */
  --bg-soft:     var(--jafix-light-grey);    /* cool section / sidebar */
  --bg-brand:    var(--jafix-mid-green);     /* dark hero, meta box */
  --bg-brand-deep: var(--jafix-dark-green);

  --accent-cta:  var(--jafix-yellow);        /* primary CTA */
  --accent-cta-hover: var(--jafix-yellow-lighter);
  --accent-positive: var(--jafix-fresh-green);
  --accent-rule: var(--jafix-turquoise);

  --border-soft: var(--jafix-mid-grey);
  --border-rule: var(--jafix-turquoise);
  --focus-ring:  var(--jafix-fresh-green);

  /* ---------- TYPE ---------- */
  --font-sans: 'Graphik', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Graphik Super', 'Graphik', ui-sans-serif, system-ui, sans-serif;

  /* Type scale (Tailwind defaults the theme rides on) */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.25rem;   /* 20 */
  --fs-2xl:  1.5rem;    /* 24 */
  --fs-3xl:  1.875rem;  /* 30 */
  --fs-4xl:  2.25rem;   /* 36 */
  --fs-5xl:  3rem;      /* 48 */
  --fs-6xl:  3.75rem;   /* 60 */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  /* ---------- RADIUS / SHADOW / SPACING ---------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;   /* rounded-md — default for cards, buttons */
  --radius-lg: 0.5rem;     /* rounded-lg — buttons, panels */
  --radius-xl: 0.75rem;    /* logo frame, large cards */
  --radius-pill: 9999px;

  --shadow-button:  0 0 5px  rgba(0, 0, 0, 0.2);
  --shadow-teaser:  0 0 10px rgba(0, 0, 0, 0.2);
  --shadow-logo:    0 0 15px rgba(0, 0, 0, 0.1);
  --shadow-sm:      0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md:      0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-modal:   0 4px 20px rgba(0,0,0,0.15);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Container — matches max-w-7xl in the theme */
  --container-max: 80rem;

  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- BASE TYPE STYLES (matching jafix/base.css) ---------- */
body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
  background: var(--bg-page);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-medium);
  color: var(--fg-brand);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-8) 0;
  text-wrap: balance;
}
h2, .h2 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-4) 0;
  text-wrap: balance;
}
h3, .h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
}
h4, h5, h6 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
}

p { margin: 0 0 var(--space-6) 0; }
p:last-child { margin-bottom: 0; }
p > a { text-decoration: underline; color: var(--fg-link); }
p > a:hover { color: var(--fg-link-hover); }

.eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-brand);
}

.display {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lede {
  font-size: var(--fs-xl);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
}

/* =========================================================
   Jafix Assistent — Landing Page Styles
   ========================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Smooth scrolling for in-page anchor jumps (header nav). Disabled under
   prefers-reduced-motion below so reduced-motion users get instant jumps. */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
}
img { display: block; max-width: 100%; }
/* A class that sets `display` outranks the UA `[hidden]` rule; app.js toggles
   `hidden` on such elements, so the attribute has to win everywhere. */
[hidden] { display: none !important; }

/* containers */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.container-tight {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 32px;
}

/* utility */
.section { padding: 96px 0; }
.bg-beige { background: var(--jafix-beige); }
.bg-soft  { background: var(--jafix-light-grey); }
.bg-dark  { background: var(--jafix-dark-green); color: var(--jafix-white); }
.bg-white { background: var(--jafix-white); }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jafix-dark-green);
}
.eyebrow-light {
  color: var(--jafix-fresh-green);
}

/* type scale for big drama */
.display-xl {
  font-family: var(--font-sans);
  font-size: clamp(40px, 5.2vw, 74px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.display-lg {
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}
.display-md {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
.lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--jafix-grey-darker);
  max-width: 640px;
}
.lede-dark { color: rgba(255,255,255,0.78); }

/* accent emphasis — bold, coloured, NOT italic.
   class kept named `italic-flourish` for backwards-compat with markup. */
.italic-flourish {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  color: var(--jafix-fresh-green);
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border: 0;
  text-decoration: none;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
  white-space: nowrap;
}
.btn-cta {
  background: var(--jafix-yellow);
  color: var(--jafix-dark-grey);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 6px 18px rgba(0,0,0,0.08);
}
.btn-cta:hover { background: var(--jafix-yellow-lighter); }
.btn-ghost {
  background: transparent;
  color: var(--jafix-white);
  border: 1.5px solid rgba(255,255,255,0.32);
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); }
/* light-background counterpart to .btn-ghost: dark-green outline + text, so it
   keeps a clear (>3:1) boundary against beige/white sections. */
.btn-outline {
  background: transparent;
  color: var(--jafix-dark-green);
  border: 1.5px solid var(--jafix-dark-green);
}
.btn-outline:hover { background: rgba(25, 78, 58, 0.06); }
.btn-mid {
  background: var(--jafix-mid-green);
  color: var(--jafix-white);
}
.btn-mid:hover { background: var(--jafix-mid-green-darker); }
.btn-sm { padding: 10px 16px; font-size: 14px; }
.btn-lg { padding: 18px 28px; font-size: 17px; }

/* header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(25, 78, 58, 0.92);
  backdrop-filter: blur(8px);
  color: var(--jafix-white);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-header .nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  font-size: 18px;
}
/* Logo bounce — a wooden-block "plock-plock" settle, triggered by app.js when the
   user scrolls back to the top: it tips onto its left corner (plock), rocks onto
   its right corner (plock), then drops flat. Two contacts, no springy overshoot.
   Each contact briefly dwells and the swing accelerates into the next plock
   (per-keyframe easing) so it reads as a hard object, not a spring. app.js jitters
   the two tilt angles + duration a little per bounce for a natural feel. Pivots at
   the base; guarded by prefers-reduced-motion below. */
@keyframes logo-bounce {
  /* Hop and rotation are one coupled arc: it launches up while already tilting
     toward the left, so by the time it falls back down the left corner is lowest
     and lands first (plock 1); the impact rocks it over to the right corner
     (plock 2); then it drops flat. translateY and rotate move together — never in
     separate phases. */
  0%   { transform: translateY(0) rotate(0deg);                                              animation-timing-function: ease-out; }  /* launch up, begin tilting left */
  26%  { transform: translateY(var(--bounce-hop, -6px)) rotate(calc(var(--bounce-left, -7deg) * 0.5)); animation-timing-function: ease-in; }  /* peak — airborne, half-tilted */
  52%  { transform: translateY(0) rotate(var(--bounce-left, -7deg));                          animation-timing-function: ease-out; }  /* left corner taps the floor — plock (no pause) */
  100% { transform: translateY(0) rotate(0deg); }                                                                                    /* right side drops away briskly, eases flat */
}
.site-header .brand.is-bouncing {
  transform-origin: 50% 100%;
  animation: logo-bounce var(--bounce-dur, 0.47s);
}
.site-header nav {
  display: flex;
  gap: 36px;
  flex: 1;
  margin-left: 20px;
  font-size: 15px;
}
.site-header nav a {
  color: inherit;
  text-decoration: none;
  opacity: 0.82;
}
.site-header nav a:hover { opacity: 1; }
/* scrollspy: the link for the section currently in view (set by app.js).
   Underline accent rather than a weight/border change so geometry stays stable. */
.site-header nav a.is-active {
  opacity: 1;
  text-decoration: underline;
  text-decoration-color: var(--jafix-fresh-green);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.site-header .nav-right {
  display: flex;
  gap: 12px;
  align-items: center;
}
.site-header .nav-right a:first-child {
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  opacity: 0.82;
}
/* nav-menu wraps the links + actions so they collapse together on mobile */
.site-header .nav-menu {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 32px;
}
/* Oplossingen menu in the header: a <details> disclosure, so it opens by click
   or keyboard without script; app.js closes it on an outside click. Desktop: a
   panel under the link; in the collapsed mobile menu: an inline list. */
.nav-dd { position: relative; }
.nav-dd > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  opacity: 0.82;
}
.nav-dd > summary::-webkit-details-marker { display: none; }
.nav-dd > summary:hover, .nav-dd[open] > summary { opacity: 1; }
.nav-dd > summary svg { transition: transform 200ms var(--ease-out); }
.nav-dd[open] > summary svg { transform: rotate(180deg); }
.nav-dd-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: -16px;
  z-index: 50;
  min-width: 300px;
  padding: 8px;
  background: var(--jafix-white);
  color: var(--jafix-dark-grey);
  border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.35);
}
.site-header nav .nav-dd-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  opacity: 1;
  color: var(--jafix-dark-grey);
}
.site-header nav .nav-dd-menu a:hover,
.site-header nav .nav-dd-menu a[aria-current="page"] { background: var(--jafix-beige-lighter); }
.nav-dd-menu b { display: block; font-size: 14px; font-weight: 600; color: var(--jafix-dark-green); }
.nav-dd-menu span { display: block; font-size: 13px; color: var(--jafix-grey-darker); }
@media (max-width: 880px) {
  .nav-dd > summary {
    display: flex;
    justify-content: space-between;
    padding: 13px 2px;
    opacity: 1;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav-dd-menu {
    position: static;
    min-width: 0;
    padding: 4px 0 8px;
    background: transparent;
    box-shadow: none;
  }
  .site-header nav .nav-dd-menu a { padding: 10px 2px 10px 14px; border-bottom: 0; color: var(--jafix-white); }
  .site-header nav .nav-dd-menu a:hover,
  .site-header nav .nav-dd-menu a[aria-current="page"] { background: rgba(255,255,255,0.06); }
  .nav-dd-menu b { color: var(--jafix-white); font-weight: 500; font-size: 15px; }
  .nav-dd-menu span { color: rgba(255,255,255,0.66); }
}

/* hamburger — hidden on desktop, shown below the breakpoint */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: inherit;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav-toggle { display: flex; }
  .site-header .nav-inner { gap: 16px; }
  .site-header .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 24px;
    background: var(--jafix-dark-green);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 16px 32px rgba(0,0,0,0.22);
    display: none;
  }
  .site-header .nav-menu.is-open { display: flex; }
  .site-header nav {
    flex: none;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    font-size: 16px;
  }
  .site-header nav a {
    padding: 13px 2px;
    opacity: 1;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .site-header .nav-right {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 16px;
  }
  .site-header .nav-right a:first-child { text-align: center; padding: 6px; }
  .site-header .nav-right .btn { justify-content: center; }
}

/* HERO */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse at 70% 45%, rgba(4, 46, 40, 0.86) 0%, rgba(5, 54, 47, 0.46) 30%, transparent 60%),
    linear-gradient(180deg, #033c34 0%, #04372f 56%, #07372f 100%);
  color: var(--jafix-white);
  overflow: hidden;
  min-height: 760px;
  padding: 106px 0 156px;
}
.hero::before {
  /* organic noise glow */
  content: "";
  position: absolute;
  top: -240px; right: -240px;
  width: 720px; height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(3, 38, 33, 0.78), rgba(4, 48, 42, 0.36) 48%, rgba(4, 48, 42, 0) 72%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -160px; left: -120px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(97,176,170,0.18), rgba(97,176,170,0) 70%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero h1.display-xl {
  color: var(--jafix-white);
  max-width: 14ch;
}
.hero h1.display-xl em {
  font-style: normal;
  color: var(--jafix-fresh-green);
  font-weight: 600;
}
.hero .hero-subtitle {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.35;
  color: #fff;
  font-weight: 500;
  letter-spacing: -0.008em;
  max-width: 28ch;
  text-wrap: balance;
}
.hero .kernzin {
  margin-top: 24px;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
  max-width: 540px;
  font-weight: 400;
}
.hero-cta-row {
  margin-top: 40px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.hero-cta-note {
  margin: 14px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.74);
}

/* hero eyebrow — inline .eyebrow span sits above the H1, so give it block
   flow and breathing room (the H1 .display-xl has margin: 0) */
.hero .eyebrow {
  display: block;
  margin-bottom: 20px;
}

/* Homepage hero: the workshop photo fills the right of the hero and fades
   into the hero green to the left and at the bottom, so the copy stands on
   plain green. The photo box keeps the image's 3:2 ratio (height-driven), so a
   point in the photo is a fixed fraction of the box: the notification anchor
   relies on that. Below 880px a separate crop sits on top and fades downwards. */
.hero.hero-home {
  min-height: clamp(600px, 52vw, 780px);
  padding: 112px 0 128px;
}
.hero-foto {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  aspect-ratio: 3 / 2;
  margin: 0;
}
.hero-foto img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.35) 14%, #000 38%),
    linear-gradient(0deg, transparent 0, #000 20%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.35) 14%, #000 38%),
    linear-gradient(0deg, transparent 0, #000 20%);
  mask-composite: intersect;
}
.hero-grid { position: relative; z-index: 2; }
.hero-grid > div:first-child { max-width: 540px; }

/* The notification hangs from a point just above the tablet's screen in the
   photo (fractions of the 1536x1024 image; of the 900x777 crop below 880px).
   --staart is where the tail sits along the card, above that point. */
.hero-melding-anker {
  position: absolute;
  left: 36.6%;
  bottom: 44.5%;
  z-index: 3;
}
.hero-melding {
  --staart: 46px;
  position: absolute;
  left: calc(-1 * var(--staart));
  bottom: 14px;
  width: 332px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 13px 16px 14px 13px;
  border-radius: 14px;
  color: #1f2a27;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 18px 40px -12px rgba(2, 30, 25, 0.55), 0 2px 6px rgba(2, 30, 25, 0.18);
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transform-origin: var(--staart) 100%;
  filter: blur(4px);
  transition: opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 1.25, 0.3, 1), filter 0.5s;
}
.hero-melding::after {
  content: "";
  position: absolute;
  left: calc(var(--staart) - 7px);
  bottom: -6px;
  width: 14px;
  height: 14px;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 0 0 3px 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.hero-melding.is-in { opacity: 1; transform: none; filter: none; }
.hero-melding.is-uit {
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  filter: blur(3px);
  transition-duration: 0.4s;
}
.hero-melding-ico {
  grid-row: span 3;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--jafix-dark-green-darker);
  display: grid;
  place-items: center;
}
.hero-melding-ico img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.hero-melding-soort, .hero-melding-nu { font-size: 11.5px; color: #5d6b67; }
.hero-melding-titel {
  grid-column: 2 / -1;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}
.hero-melding-regel {
  grid-column: 2 / -1;
  font-size: 13px;
  line-height: 1.4;
  color: #44524e;
}
/* the dot on the tablet's screen breathes once just before a card shows */
.hero-melding-stip {
  position: absolute;
  left: -5px;
  top: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--jafix-fresh-green);
  opacity: 0;
}
.hero-melding-stip.is-aan { animation: hero-melding-stip 1.6s ease-out forwards; }
@keyframes hero-melding-stip {
  0% { opacity: 0; transform: scale(0.4); box-shadow: 0 0 0 0 rgba(62, 255, 187, 0.6); }
  20% { opacity: 1; transform: scale(1); }
  60% { box-shadow: 0 0 0 14px rgba(62, 255, 187, 0); }
  100% { opacity: 0; box-shadow: 0 0 0 14px rgba(62, 255, 187, 0); }
}

@media (max-width: 1180px) {
  /* Height-driven, the photo would grow wider than the hero and slide under
     the copy; here it is width-driven instead and also fades out at the top. */
  .hero.hero-home { min-height: 0; padding: 96px 0 88px; }
  .hero-grid > div:first-child { max-width: 410px; }
  .hero-foto { top: auto; width: 64%; }
  .hero-foto img {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.35) 14%, #000 38%),
      linear-gradient(0deg, transparent 0, #000 20%, #000 80%, transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.35) 14%, #000 38%),
      linear-gradient(0deg, transparent 0, #000 20%, #000 80%, transparent 100%);
  }
}
@media (max-width: 880px) {
  .hero.hero-home { min-height: 0; padding: 0 0 64px; }
  .hero-foto { position: relative; width: 100%; aspect-ratio: 900 / 777; }
  .hero-foto img {
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .hero.hero-home .container { margin-top: -28px; }
  .hero-grid > div:first-child { max-width: none; }
  .hero-melding-anker { left: 12.2%; bottom: 47%; }
  .hero-melding {
    --staart: 30px;
    width: 252px;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 1px 10px;
    padding: 10px 12px 11px 10px;
    border-radius: 12px;
  }
  .hero-melding-ico { width: 28px; height: 28px; border-radius: 7px; }
  .hero-melding-ico img { width: 20px; height: 20px; }
  .hero-melding-titel { font-size: 13px; }
  .hero-melding-regel { font-size: 12px; }
  .hero-melding-soort, .hero-melding-nu { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-melding, .hero-melding.is-uit { transform: none; filter: none; transition: opacity 0.3s; }
  .hero-melding-stip.is-aan { animation: none; }
}

/* ----------------------------------------------------------------
   HERO FLOW — inbound channels → AI-assistant orb → outcome cards
   Connector arrows are drawn by app.js (initHeroFlow), snapping to each
   node's live layout box via an offsetParent walk (transform-proof) and
   redrawn on resize / font load. The corona is animated SVG (feTurbulence
   displacement) + CSS; honored down to a still frame under reduced motion.
   ---------------------------------------------------------------- */
.hero-flow {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(150px, 1fr) clamp(264px, 23vw, 300px);
  align-items: center;
  column-gap: 12px;
  min-height: 400px;
}

/* arrow overlay — paths injected by JS, sits behind the nodes */
.hf-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.hf-wire { fill: none; }
.hf-wire-in  { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.5; }
.hf-wire-out { stroke: #3EFFBB; stroke-opacity: 0.82; stroke-width: 2; marker-end: url(#hf-arrowhead); }
.hf-wire-flow {
  stroke: var(--jafix-fresh-green-lighter);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.5 17;
  opacity: 0.9;
  animation: hf-bead 1.7s linear infinite;
}
@keyframes hf-bead { to { stroke-dashoffset: -17.5; } }

.hf-side, .hf-core { position: relative; z-index: 1; }
.hf-side-in { width: max-content; }
.hf-side-out { justify-self: end; }

.hf-axis-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.3;
  max-width: 15ch;
  margin-bottom: 20px;
}
.hf-side-out .hf-axis-label { margin-left: auto; text-align: right; max-width: none; white-space: nowrap; }

/* left — channel icons */
.hf-channels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.hf-node-ic {
  width: 60px; height: 60px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.hf-node-ic svg { width: 24px; height: 24px; }

/* center — badge, orb, caption */
.hf-core { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hf-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: rgba(20, 46, 38, 0.7);
  border: 1px solid rgba(62, 255, 187, 0.25);
  border-radius: var(--radius-pill);
  color: var(--jafix-fresh-green);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.hf-badge svg { width: 14px; height: 14px; fill: currentColor; }

.hf-orb {
  position: relative;
  width: 210px; height: 210px;
  display: flex; align-items: center; justify-content: center;
}
.hf-corona, .hf-dashring { position: absolute; inset: -28%; pointer-events: none; }
.hf-corona { z-index: 0; inset: -33%; transition: transform 520ms var(--ease-out), filter 520ms var(--ease-out); }
/* static dashed ring hugging the orb (no rotation — matches the design) */
.hf-dashring { z-index: 1; inset: -19%; }
.hf-corona .hf-flames { transform-box: fill-box; transform-origin: center; animation: hf-spin-rev 24s linear infinite; }
.hf-corona .hf-bloom  { transform-box: fill-box; transform-origin: center; animation: hf-breathe 5.5s ease-in-out infinite; }

/* hover — the green corona swells and brightens; no colour shift. */
.hf-orb:hover .hf-corona { transform: scale(1.12); filter: brightness(1.3) saturate(1.06); }
.hf-orb:hover .hf-orb-face {
  box-shadow:
    inset 0 2px 28px rgba(62, 255, 187, 0.42),
    inset 0 -10px 30px rgba(0, 0, 0, 0.45),
    0 0 0 1.5px rgba(62, 255, 187, 0.72),
    0 0 76px rgba(62, 255, 187, 0.52);
}

.hf-orb-face {
  position: relative;
  z-index: 2;
  width: 178px; height: 178px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #20785a 0%, #173a30 68%, #14302a 100%);
  box-shadow:
    inset 0 2px 26px rgba(62, 255, 187, 0.30),
    inset 0 -10px 30px rgba(0, 0, 0, 0.45),
    0 0 0 1.5px rgba(62, 255, 187, 0.45),
    0 0 48px rgba(62, 255, 187, 0.30);
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow 520ms var(--ease-out);
}
.hf-mark {
  width: 88px; height: 88px;
  color: var(--jafix-fresh-green);
  filter: drop-shadow(0 0 9px rgba(62, 255, 187, 0.55));
}
.hf-mark path { fill: currentColor; }

.hf-core-caption { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.hf-core-line { font-size: 15px; font-weight: 500; color: #fff; }
.hf-core-line.is-accent { color: var(--jafix-fresh-green); }

/* right — outcome cards (light, like the design) */
.hf-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hf-result {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 13px; align-items: center;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
}
.hf-result-ic {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: #d6f5e8;
  color: var(--jafix-mid-green);
}
.hf-result-ic svg { width: 19px; height: 19px; }
/* per-card icon tints — green / gold / lavender / blue, as in the design */
.hf-result:nth-child(1) .hf-result-ic { background: #d6f5e8; color: var(--jafix-mid-green); }
.hf-result:nth-child(2) .hf-result-ic { background: #fdeecb; color: #a06a00; }
.hf-result:nth-child(3) .hf-result-ic { background: #e7e3f6; color: #6c5ec0; }
.hf-result:nth-child(4) .hf-result-ic { background: #dceaf7; color: #3a6ea8; }
.hf-result-body { min-width: 0; display: flex; flex-direction: column; }
.hf-result-title { font-size: 15px; font-weight: 600; color: var(--jafix-dark-green); line-height: 1.25; letter-spacing: -0.005em; }
.hf-result-sub { font-size: 12.5px; color: var(--jafix-grey-darker); margin-top: 2px; }
.hf-result-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--jafix-fresh-green-darker); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.hf-result-check svg { width: 12px; height: 12px; }

/* reveal stagger — only when JS opts in (.hf-js); no-JS renders fully */
.hf-js .hf-channel, .hf-js .hf-result { opacity: 0; transform: translateY(10px) scale(0.97); }
.hf-js .hf-orb { opacity: 0; transform: scale(0.9); }
.hf-js .hf-wires { opacity: 0; }
.hf-js.is-revealed .hf-channel,
.hf-js.is-revealed .hf-result {
  opacity: 1; transform: none;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i) * 90ms);
}
.hf-js.is-revealed .hf-orb {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.hf-js.is-revealed .hf-wires { opacity: 1; transition: opacity 0.6s ease 0.55s; }

@keyframes hf-spin-rev { to { transform: rotate(-360deg); } }
@keyframes hf-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* responsive */
@media (max-width: 1180px) {
  .hf-orb { width: 184px; height: 184px; }
  .hf-orb-face { width: 154px; height: 154px; }
  .hf-mark { width: 76px; height: 76px; }
}
@media (max-width: 600px) {
  /* mobile: ditch the wires and stack the diagram into centered rows —
     label · icons-in-a-row · assistant orb · stacked cards. */
  .hf-wires { display: none; }
  .hero-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    min-height: 0;
    max-width: 420px;
  }
  .hf-side-in, .hf-side-out {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hf-axis-label,
  .hf-side-out .hf-axis-label {
    font-size: 11px;
    max-width: none;
    text-align: center;
    white-space: normal;
    margin: 0 0 16px;
  }
  .hf-channels { flex-direction: row; gap: 18px; justify-content: center; }
  .hf-node-ic { width: 52px; height: 52px; }
  .hf-node-ic svg { width: 21px; height: 21px; }
  .hf-orb { width: 168px; height: 168px; }
  .hf-orb-face { width: 142px; height: 142px; }
  .hf-mark { width: 70px; height: 70px; }
  .hf-results { width: 100%; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header .brand.is-bouncing { animation: none !important; }
  .hf-corona .hf-flames, .hf-corona .hf-bloom, .hf-wire-flow { animation: none !important; }
  .hf-js .hf-channel, .hf-js .hf-result, .hf-js .hf-orb, .hf-js .hf-wires { opacity: 1 !important; transform: none !important; }
}

/* ----------------------------------------------------------------
   VIDEO PLAYER — click-to-load (app.js, initVideo). .video-player is the 16:9
   box; the poster and the <video> that app.js lays over it both fill that box
   absolutely, so starting the video moves nothing on the page.
   ---------------------------------------------------------------- */
/* A hero whose visual is a video player instead of the figure, so it drops the
   height and bottom room the figure needs. Heading, player and body copy are
   three grid items in that source order: beside each other the copy fills the
   left column around the player's middle, and stacked the player comes right
   after the heading, ahead of the copy and the buttons. */
.hero.hero-video {
  min-height: 0;
  padding: 132px 0 112px;
}
.hero-video-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  grid-template-areas:
    "head player"
    "body player";
  column-gap: 64px;
}
.hero-video-band > h1 { grid-area: head; align-self: end; }
.hero-video-band > :is(.video-player, .scene) { grid-area: player; align-self: center; }
.hero-video-body { grid-area: body; }
.hero-video h1.display-xl {
  font-size: clamp(36px, 4vw, 56px);
  max-width: 13ch;
}
.hero-video .video-player { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36); }
@media (max-width: 920px) {
  .hero.hero-video { padding: 104px 0 72px; }
  .hero-video-band {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "player"
      "body";
    row-gap: 24px;
  }
  .hero-video h1.display-xl { max-width: none; }
  .hero-video .kernzin { margin-top: 0; }
}

.video-player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #033c34;
  box-shadow: 0 24px 48px rgba(3, 60, 52, 0.22);
}
.video-player-poster,
.video-player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The box clips its children, so the ring is drawn inside the video's edge. */
.video-player video:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}
/* The button covers the whole poster, so a click anywhere on it starts the
   video; the yellow disc is only its visible mark. */
.video-player-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.video-player-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--jafix-yellow);
  color: var(--jafix-dark-grey);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
/* optical centring: a play triangle's visual weight sits left of its box */
.video-player-disc svg { margin-left: 4px; }
.video-player-play:hover .video-player-disc {
  background: var(--jafix-yellow-lighter);
  transform: scale(1.06);
}
.video-player-play:focus-visible { outline: none; }
/* white ring with a dark edge: visible on the poster's dark and light halves */
.video-player-play:focus-visible .video-player-disc {
  outline: 3px solid var(--jafix-white);
  outline-offset: 3px;
  box-shadow: 0 0 0 9px var(--jafix-dark-green-darker), 0 8px 24px rgba(0, 0, 0, 0.3);
}
.video-player-duration {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--jafix-white);
  font-size: 13px;
  font-weight: 500;
  font-feature-settings: "tnum" 1;
  pointer-events: none;
}

/* end panel — covers the finished video, native controls included; replaying
   is its own button. Opaque, so the covered controls do not show through. */
.video-player-end {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: inherit;
}
.video-player-end-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.video-player-replay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.video-player-replay:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--jafix-white);
}
.video-player-end :focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
@media (max-width: 480px) {
  /* the box is under 200px tall here: smaller mark, and end-panel buttons
     that still fit side by side above the replay button */
  .video-player-disc { width: 64px; height: 64px; }
  .video-player-disc svg { width: 24px; height: 24px; }
  .video-player-duration { right: 10px; bottom: 10px; }
  .video-player-end { gap: 6px; padding: 10px; }
  .video-player-end-actions { gap: 8px; }
  .video-player-end .btn { min-height: 44px; padding: 10px 14px; font-size: 14px; }
}
@media (max-width: 380px) {
  /* the box clips: a wrapped second row of buttons would push the first row
     and the replay button out of it */
  .video-player-end-actions { flex-wrap: nowrap; gap: 6px; }
  .video-player-end .btn { padding: 10px 8px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-player-disc { transition: none; }
  .video-player-play:hover .video-player-disc { transform: none; }
}

/* ----------------------------------------------------------------
   BOOKING DIALOG — a native <dialog> around the booking page's iframe
   (app.js, initBooking). The iframe fills .booking-body absolutely, over the
   loading line, so its arrival moves nothing.
   ---------------------------------------------------------------- */
/* a browser without <dialog> would show it as a block at the foot of the page */
.booking:not([open]) { display: none; }
/* sized in % of the viewport, which leaves out the scrollbar gutter that
   100vw would run under */
.booking {
  flex-direction: column;
  width: min(1060px, calc(100% - 48px));
  height: min(780px, calc(100% - 48px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--jafix-white);
  color: var(--fg-1);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.32);
}
.booking[open] { display: flex; }
.booking::backdrop { background: rgba(22, 51, 47, 0.72); }
/* the page behind the open dialog does not scroll; the stable gutter keeps the
   page as wide as it was with its scrollbar */
html:has(.booking[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}
.booking-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 6px 20px;
  border-bottom: 1px solid var(--border-soft);
}
.booking-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--fg-brand);
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.booking-tab,
.booking-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--radius-lg);
  color: var(--fg-brand);
}
.booking-tab {
  gap: 6px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.booking-close {
  width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.booking-tab:hover,
.booking-close:hover { background: rgba(25, 78, 58, 0.06); }
/* the page's mint focus ring does not show on white */
.booking :focus-visible {
  outline: 3px solid var(--jafix-dark-green);
  outline-offset: 2px;
}
.booking-head :focus-visible { outline-offset: -3px; }
.booking-body {
  position: relative;
  flex: 1;
  min-height: 0;
}
.booking-body iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.booking-loading,
.booking-blocked {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding: 24px;
  color: var(--fg-2);
  text-align: center;
}
.booking-blocked p {
  max-width: 36ch;
  margin: 0;
  color: var(--fg-1);
  font-size: 17px;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .booking {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}
@media (max-width: 420px) {
  /* title, link and close button do not fit on one line; the title still
     names the dialog through aria-labelledby */
  .booking-title { display: none; }
  .booking-tab { margin-right: auto; }
}

/* generic section header */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 56px;
}
.section-head h2 { margin: 0; color: var(--jafix-dark-green); }
.section-head .lede { margin-top: 4px; }

/* Card grid: a solution page's steps (Stappen) and its other solutions (AndereOplossingen) */
.task-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .task-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .task-grid { grid-template-columns: minmax(0, 1fr); } }
/* A solution page's steps: one row of as many columns as steps on wide screens; below that the .task-grid breakpoints above apply. */
@media (min-width: 1101px) { .task-grid.steps-grid { grid-template-columns: repeat(var(--steps), minmax(0, 1fr)); } }
.task-card {
  background: var(--jafix-white);
  border: 1px solid var(--jafix-mid-grey);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 220px;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.task-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-teaser);
}
.task-card .icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--jafix-dark-green);
  color: var(--jafix-fresh-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--jafix-dark-green);
}
/* small status pill after a card or list-item title (e.g. "binnenkort") */
.task-beta {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--jafix-light-grey);
  color: var(--jafix-grey-darker);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.task-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--jafix-grey-darker);
}

/* Manifesto pull-quote =================================================== */
.manifesto {
  background: var(--jafix-dark-green);
  color: #fff;
  padding: 96px 0 100px;
  position: relative;
  overflow: hidden;
}
.manifesto::before {
  content: "";
  position: absolute;
  top: -120px; left: -120px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(62,255,187,0.18), transparent 70%);
  pointer-events: none;
}
.manifesto::after {
  content: "";
  position: absolute;
  bottom: -180px; right: -120px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(97,176,170,0.18), transparent 70%);
  pointer-events: none;
}
.manifesto .container { position: relative; z-index: 1; }
.manifesto-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 56px;
  align-items: center;
}
.manifesto .hero-flow {
  width: 100%;
  min-height: 380px;
}
@media (max-width: 980px) {
  .manifesto-grid { grid-template-columns: 1fr; gap: 44px; }
  .manifesto .hero-flow { max-width: 580px; margin: 0 auto; }
}

.manifesto .pull {
  color: #fff;
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.014em;
  text-wrap: balance;
  margin: 0;
  max-width: 22ch;
}
.manifesto .pull strong {
  color: var(--jafix-fresh-green);
  font-weight: 600;
}

/* Homepage feature cards =================================================
   Four cards in a 2x2 grid, each a short text beside a small schema drawn in
   one visual language: white nodes with a dark-green line, the main element
   filled dark green. A card with a "meer" link is clickable as a whole
   through the link's ::after. */
.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: center;
  padding: 28px;
  background: var(--jafix-white);
  border-radius: 20px;
  transition: box-shadow .3s;
}
.feature:has(a.feature-more):hover { box-shadow: 0 24px 48px -32px rgba(25, 78, 58, .55); }
.feature-text { display: flex; flex-direction: column; gap: 10px; }
.feature-text p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--jafix-grey-darker); }
.feature-text .eyebrow { color: var(--jafix-mid-green); }
.feature-text h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--jafix-dark-green);
  text-wrap: balance;
}
.feature-more {
  align-self: flex-start;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--jafix-mid-green);
  text-decoration: none;
  border-bottom: 1px solid #C9DCD2;
  padding-bottom: 2px;
  transition: border-color .2s, gap .2s;
}
.feature-more svg { flex: none; }
a.feature-more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 20px;
}
a.feature-more:focus-visible { outline: none; }
a.feature-more:focus-visible::after { outline: 3px solid var(--jafix-mid-green); outline-offset: 4px; }
.feature:has(a.feature-more):hover .feature-more { border-color: currentColor; gap: 12px; color: var(--jafix-dark-green); }
.feature-schema {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0 6px 20px;
  border-left: 1px solid var(--jafix-beige);
}
.feature-schema svg { width: 100%; max-width: 260px; height: auto; }
.feature-schema .n rect,
.feature-schema .n path { fill: var(--jafix-white); stroke: var(--jafix-dark-green); stroke-width: 1.6; }
.feature-schema text { font-family: var(--font-sans); font-size: 11px; font-weight: 600; fill: var(--jafix-dark-green); }
.feature-schema .z { fill: var(--jafix-grey-darker); font-weight: 500; }
.feature-schema .z-donker { font-weight: 500; }
.feature-schema .klein { font-size: 10px; }
.feature-schema .nieuw { font-size: 9px; fill: var(--jafix-mid-green); }
.feature-schema .wit { fill: var(--jafix-white); }
.feature-schema .acc-tekst { font-size: 10px; font-weight: 500; fill: var(--jafix-fresh-green); }
.feature-schema .vol,
.feature-schema .stip { fill: var(--jafix-dark-green); }
.feature-schema .streep { stroke: var(--jafix-dark-green); stroke-width: 1.6; }
.feature-schema .bank { fill: none; stroke: var(--jafix-dark-green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.feature-schema .bank.acc { stroke: var(--jafix-fresh-green); }
.feature-schema .vink { fill: none; stroke: var(--jafix-fresh-green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.feature-schema .balk { fill: var(--jafix-beige-darker); }
.feature-schema .balk-licht { fill: var(--jafix-beige); }
.feature-schema .balk-op-vol { fill: var(--jafix-mid-green-lighter); }
.feature-schema .tegel { fill: none; stroke: var(--jafix-beige-darker); stroke-width: 1.4; }
.feature-schema .lijn { stroke: var(--jafix-mid-green); stroke-width: 1.6; fill: none; stroke-dasharray: 3 4; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .feature:hover .lijn { animation: feature-lijn 1.2s linear infinite; }
}
@keyframes feature-lijn { to { stroke-dashoffset: -14; } }
/* Below 1200px two columns would shrink the schema text under ~9px. */
@media (max-width: 1200px) {
  .features { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .feature { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .feature-schema { padding: 20px 0 0; border-left: none; border-top: 1px solid var(--jafix-beige); }
}

/* Scenes ===================================================================
   A frame (photo or mail) with at most two cards on opposite corners.
   Sizes inside are in em on a font size that follows the scene's width, so a
   scene scales like a picture. On a phone the cards drop under the frame and
   the secondary card is left out. */
.scene {
  container-type: inline-size;
  position: relative;
  margin: 0;
  padding: 24px;
  font-family: var(--font-sans);
  color: #1d2a24;
}
.scene p { margin: 0; }
.scene-frame,
.scene-card { font-size: clamp(11px, 2.2cqi, 14.5px); }
.scene-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #fff;
  box-shadow: 0 1px 2px rgba(25, 40, 34, .06), 0 28px 56px -32px rgba(25, 40, 34, .45);
}
.scene-frame-foto img { width: 100%; height: 100%; object-fit: cover; }
.scene-card {
  position: absolute;
  z-index: 2;
  width: clamp(14em, 40%, 19.5em);
  padding: 1em 1.1em .6em;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(25, 40, 34, .08), 0 22px 44px -22px rgba(25, 40, 34, .45);
}
.scene-card-tl { left: 0; top: 0; }
.scene-card-br { right: 0; bottom: 0; }
.scene-card-bl { left: 0; bottom: 0; padding-bottom: 1em; }
.scene .scene-label {
  margin-bottom: .7em;
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #56625d;
}
.scene-knop {
  display: inline-block;
  font-size: .86em;
  font-weight: 500;
  line-height: 1.3;
  padding: .3em .65em;
  border: 1px solid #D5DBD8;
  border-radius: 7px;
  background: #fff;
  white-space: nowrap;
}
.scene-knoppen { display: flex; flex-wrap: wrap; gap: .5em; }
.scene-knoppen .scene-knop { font-weight: 600; padding: .5em .85em; }
.scene-knop-primair { background: var(--jafix-dark-green); border-color: var(--jafix-dark-green); color: #fff; }
.scene-zacht { color: #5C6661; }

/* aanvragen: list + timeline */
.scene-lijst { list-style: none; margin: 0 -.45em; padding: 0; }
.scene-lijst-rij {
  display: flex;
  align-items: center;
  gap: .7em;
  padding: .5em .45em;
  margin-bottom: .2em;
  border-radius: 8px;
}
.scene-lijst-rij.is-actief { background: #E6F2EC; }
.scene-avatar {
  flex: none;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .8em;
  font-weight: 700;
  background: #EEF1F0;
  color: #3d4945;
}
.is-actief .scene-avatar { background: var(--jafix-dark-green); color: #fff; }
.scene-lijst-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.scene-lijst-tekst b { font-weight: 600; }
.scene-lijst-tekst span { font-size: .9em; color: #56625d; }
.scene-tijdlijn { list-style: none; margin: 0; padding: 0; }
.scene-tijdlijn li {
  position: relative;
  padding: 0 0 .85em 1.6em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35em;
  line-height: 1.35;
}
.scene-tijdlijn li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: .8em;
  height: .8em;
  border-radius: 50%;
  border: 2px solid var(--jafix-mid-green);
  background: #fff;
  box-sizing: border-box;
}
.scene-tijdlijn li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(.4em - 1px);
  top: 1em;
  bottom: -.2em;
  width: 2px;
  background: var(--jafix-mid-green);
}
.scene-tijdlijn li:last-child::before { background: var(--jafix-mid-green); }
.scene-tijdlijn time { font-size: .82em; color: #56625d; }

/* offerte: the customer mail, styled like the mail Jafix Assist sends */
.scene-frame-mail {
  aspect-ratio: auto;
  padding: 1.8em 2.2em 4.4em;
  display: flex;
  flex-direction: column;
  gap: 1em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  color: #1F2A26;
}
.scene-mail-kop {
  display: flex;
  flex-direction: column;
  gap: .2em;
  padding-bottom: .8em;
  border-bottom: 1px solid #EEF1F0;
  font-size: .92em;
  color: #5C6661;
}
.scene-mail-kop b { color: #1F2A26; margin-right: .3em; }
.scene-prijs {
  background: #EBF7F1;
  border: 1px solid #CDE7DA;
  border-radius: 12px;
  padding: 1em 1.4em .6em;
}
.scene .scene-prijs-label {
  margin-bottom: .3em;
  font-size: .78em;
  font-weight: bold;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #126B47;
}
.scene-prijs table { width: 100%; border-collapse: collapse; }
.scene-prijs td { padding: .6em 0; vertical-align: top; color: #16302A; }
.scene-prijs td + td { text-align: right; white-space: nowrap; padding-left: 1em; font-variant-numeric: tabular-nums; }
.scene-prijs tr + tr td { border-top: 1px solid #CDE7DA; }
.scene-prijs .scene-prijs-sub td { padding: .35em 0; font-size: .9em; color: #3F6656; }
.scene-prijs td span { display: block; font-size: .86em; color: #3F6656; }
.scene-prijs .scene-prijs-totaal td { border-top: 3px solid #0E5A3E; font-size: 1.25em; font-weight: bold; color: #0E5A3E; }

@media (max-width: 600px) {
  .scene { padding: 0; }
  .scene-card {
    position: relative;
    inset: auto;
    width: auto;
    max-width: 22em;
    margin: -2.5em 1em 0 auto;
  }
  .scene-card-bl { margin: -2.5em auto 0 1em; }
  .scene-card-bijzaak { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .feature,
  .feature-more { transition: none; }
}

/* Trust section — Veilig, privé, van jou ================================ */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 1024px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .trust-grid { grid-template-columns: 1fr; } }
/* A solution page's voordelen (3 to 6): full rows at every width, no orphan card. */
.trust-grid[data-count="3"], .trust-grid[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 1025px) {
  .trust-grid[data-count="5"] { grid-template-columns: repeat(6, 1fr); }
  .trust-grid[data-count="5"] > * { grid-column: span 2; }
  .trust-grid[data-count="5"] > :nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 1024px) {
  .trust-grid[data-count] { grid-template-columns: repeat(2, 1fr); }
  .trust-grid[data-count="3"] > :last-child,
  .trust-grid[data-count="5"] > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .trust-grid[data-count] { grid-template-columns: 1fr; } }
.trust-card {
  background: #fff;
  border: 1px solid var(--jafix-mid-grey);
  border-radius: var(--radius-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.trust-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-teaser);
}
.trust-card .ic {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--jafix-beige);
  color: var(--jafix-dark-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--jafix-dark-green);
}
.trust-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--jafix-grey-darker);
}
.trust-card .meta {
  margin-top: auto;
  padding-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--jafix-mid-green);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.trust-card.is-control { border-color: var(--jafix-fresh-green); }
.trust-card.is-control .ic { background: var(--jafix-fresh-green); }

/* compact "lampje" hint — replaces the old big green "Geen website?" panel */
.website-hint {
  margin: 28px auto 0;
  max-width: 760px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--jafix-grey-darker);
}
/* a link inside running text; the buttons and the header and footer links
   carry their own styling */
.text-link {
  color: var(--jafix-dark-green);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-link:hover { color: var(--jafix-mid-green); }
.website-hint-ic {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--jafix-mid-green);
}

/* "Anders dan" comparison */
.compare-card {
  background: #fff;
  border: 1px solid var(--jafix-mid-grey);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.compare-card.is-us {
  background: var(--jafix-dark-green);
  color: var(--jafix-white);
  border-color: transparent;
}
.compare-card h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  color: inherit;
}
.compare-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  line-height: 1.4;
}
.compare-card li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.compare-card li .icon { flex-shrink: 0; margin-top: 2px; }
.compare-card.is-us .icon { color: var(--jafix-fresh-green); }

/* Network — R-ladder */
.ladder {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 24px;
}
@media (max-width: 900px) { .ladder { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ladder { grid-template-columns: repeat(2, 1fr); } }
.ladder-step {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 140px;
}
.ladder-step.is-you {
  background: var(--jafix-fresh-green);
  color: var(--jafix-dark-green);
  border-color: transparent;
}
.ladder-step .num {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.ladder-step.is-you .num { opacity: 0.9; }
.ladder-step .name {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
}
.ladder-step .desc {
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.78;
  margin-top: auto;
}
.ladder-step.is-you .desc { opacity: 1; color: var(--jafix-dark-green); font-weight: 500; }

/* Pricing */
.price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
@media (max-width: 780px) { .price-grid { grid-template-columns: minmax(0, 1fr); } }
.price-card {
  background: #fff;
  border: 1px solid var(--jafix-mid-grey);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.price-card.is-featured {
  background: var(--jafix-dark-green);
  color: #fff;
  border-color: transparent;
  position: relative;
}
.price-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  opacity: 0.85;
}
.price-card .amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.price-card .amount .num {
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.price-card .price-meta { font-size: 13px; opacity: 0.7; }
.price-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.4;
}
.price-card li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.price-card li .check { flex-shrink: 0; margin-top: 2px; color: var(--jafix-mid-green); }
.price-card.is-featured li .check { color: var(--jafix-fresh-green); }

.price-card .amount .per { font-size: 14px; opacity: 0.7; }
.price-card li .limit { flex-shrink: 0; margin-top: 2px; color: var(--jafix-grey); }
.price-card .li-note { display: block; margin-top: 2px; font-size: 12.5px; opacity: 0.75; }
.price-card > .btn { justify-content: center; margin-top: auto; white-space: normal; text-align: center; }
.price-card.is-featured .task-beta { background: rgba(255,255,255,0.14); color: var(--jafix-white); }

/* Testimonials */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow-teaser);
}
.testimonial q {
  font-size: 17px;
  line-height: 1.45;
  color: var(--jafix-dark-grey);
  quotes: "“" "”";
}
.testimonial q::before { content: open-quote; }
.testimonial q::after { content: close-quote; }
.testimonial .who {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: auto;
}
.testimonial .av {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--jafix-beige);
  display: flex; align-items: center; justify-content: center;
  color: var(--jafix-dark-green);
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}
.testimonial .name { font-size: 14px; font-weight: 500; color: var(--jafix-dark-green); }
.testimonial .role { font-size: 13px; color: var(--jafix-grey-darker); }
/* two testimonials side by side — a balanced 2-up row, centered */
.testimonial-row {
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 980px) { .testimonial-row { grid-template-columns: 1fr; max-width: 560px; } }

/* FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--jafix-mid-grey);
}
.faq-item {
  border-bottom: 1px solid var(--jafix-mid-grey);
}
.faq-item button,
.faq-item summary {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 22px 0;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  color: var(--jafix-dark-green);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}
/* suppress the native <details> disclosure marker */
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item .plus {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--jafix-beige);
  color: var(--jafix-dark-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  transition: transform 200ms;
}
.faq-item.is-open .plus,
.faq-item[open] .plus { transform: rotate(45deg); background: var(--jafix-dark-green); color: #fff; }
.faq-item .answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms var(--ease-out);
}
.faq-item.is-open .answer,
.faq-item[open] .answer { grid-template-rows: 1fr; }
.faq-item .answer-inner {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.55;
  color: var(--jafix-grey-darker);
  max-width: 720px;
}
.faq-item.is-open .answer-inner,
.faq-item[open] .answer-inner { padding-bottom: 22px; }

/* Footer: the brand block (tagline, ChatGPT link, socials) beside a grid of
   link columns that takes any number of them; under it the legal line with
   the language link. */
.site-footer {
  background: var(--jafix-dark-green);
  color: rgba(255,255,255,0.7);
  padding: 64px 0 28px;
  font-size: 14px;
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--jafix-fresh-green); }
.site-footer a:focus-visible { outline: 2px solid var(--jafix-fresh-green); outline-offset: 3px; border-radius: 4px; }
.footer-top {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2fr;
  gap: 48px;
  padding-bottom: 40px;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.footer-logo { height: 34px; width: auto; display: block; }
.footer-tagline {
  margin: 0;
  max-width: 34ch;
  line-height: 1.55;
  color: rgba(255,255,255,0.62);
}
.site-footer .footer-ask {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 6px 6px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  color: var(--jafix-white);
  font-size: 13.5px;
  line-height: 1.25;
  transition: border-color .15s ease, background-color .15s ease;
}
.site-footer .footer-ask:hover {
  color: var(--jafix-white);
  border-color: var(--jafix-fresh-green);
  background: rgba(62,255,187,0.06);
}
/* Trimmed to cap height and baseline, so the label's visible text centres on the icon whatever the font's ascender and descender metrics. */
.footer-ask-label { text-box: trim-both cap alphabetic; }
.footer-ask-ic {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--jafix-white);
  color: #0d0d0d;
}
.footer-socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
}
.footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  transition: border-color .15s ease;
}
.footer-socials a:hover { border-color: var(--jafix-fresh-green); }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px;
  align-content: start;
}
.site-footer .col h3 {
  color: var(--jafix-white);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px;
  line-height: var(--lh-snug);
}
.site-footer .col a {
  display: block;
  padding: 4px 0;
  line-height: 1.4;
}
.site-footer .legal {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  font-size: 13px;
}
.legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 24px;
}
.site-footer .legal .brand {
  color: var(--jafix-white);
  font-weight: 500;
}
.site-footer .footer-lang {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,0.35);
}
@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .site-footer { padding-top: 48px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-cols .col-wide { grid-column: 1 / -1; }
}


/* ----------------------------------------------------------------
   HERO LINES — the homepage hero states the H1 small and one large line
   that app.js swaps every few seconds (initHeroRoller). The box keeps the
   height of two lines so a longer line never pushes the page down.
   ---------------------------------------------------------------- */
.hero .hero-kicker {
  margin: 0 0 18px;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--jafix-fresh-green);
}
.hero .hero-roller {
  color: var(--jafix-white);
  max-width: 14ch;
  min-height: 2.08em;
}
.hero-roller-regel {
  display: block;
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
}
.hero-roller-regel.is-weg { opacity: 0; transform: translateY(-14px); }
.hero-roller-regel.is-komt { opacity: 0; transform: translateY(14px); transition: none; }
.hero-roller-stippen { display: flex; gap: 6px; margin-top: 18px; }
.hero-roller-stippen span {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.22);
  transition: background-color 300ms var(--ease-out);
}
.hero-roller-stippen span.is-nu { background: var(--jafix-fresh-green); }
.hero .kernzin b { color: var(--jafix-white); font-weight: 500; }
@media (max-width: 600px) {
  .hero .hero-roller { min-height: 3.12em; }
}

/* ----------------------------------------------------------------
   TRUST — who makes Jafix Assist, right under the homepage hero, and the
   same parts on /over-ons/: team, jafix.com in numbers, partner logos.
   ---------------------------------------------------------------- */
.vertrouwen { background: var(--jafix-beige-lighter); }
.vertrouwen-top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: start;
}
.vertrouwen-intro .display-md { margin-top: 12px; color: var(--jafix-dark-green); }
.vertrouwen-intro p {
  margin: 18px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--jafix-grey-darker);
  max-width: 34em;
}
.meer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--jafix-mid-green);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap 200ms var(--ease-out);
}
.meer-link:hover { gap: 12px; color: var(--jafix-dark-green); }

.team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.person { display: flex; flex-direction: column; gap: 12px; }
.person img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; }
.person h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--jafix-dark-green); }
.person-over { margin: 0; font-size: 15px; line-height: 1.5; color: var(--jafix-grey-darker); }

.platform {
  margin-top: 64px;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 24px 40px;
  align-items: center;
  background: var(--jafix-white);
  border-radius: 20px;
}
.platform h3 { margin: 6px 0 0; font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--jafix-dark-green); }
.platform-eerlijk { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--jafix-grey-darker); }
.platform-cijfers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
}
.platform-cijfer {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 6px;
  padding-left: 16px;
  border-left: 1px solid var(--jafix-beige-darker);
}
.platform-cijfer dd {
  margin: 0;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--jafix-dark-green);
  font-variant-numeric: tabular-nums;
}
.platform-cijfer dt { font-size: 14px; line-height: 1.4; color: var(--jafix-grey-darker); hyphens: auto; overflow-wrap: break-word; }

.partners { margin-top: 56px; }
.partners-label { margin: 0 0 22px; text-align: center; font-size: 14px; color: var(--jafix-grey-darker); }
.partners-strook {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partners-rij {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: partners-scroll 48s linear infinite;
}
.partners-strook:hover .partners-rij { animation-play-state: paused; }
.partners-rij img {
  height: 38px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 300ms var(--ease-out), opacity 300ms var(--ease-out);
}
.partners-rij img:hover { filter: none; opacity: 1; }
@keyframes partners-scroll { to { transform: translateX(calc(-50% - 28px)); } }
@media (prefers-reduced-motion: reduce) {
  .partners-strook { -webkit-mask-image: none; mask-image: none; }
  .partners-rij { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 24px; }
  .partners-kopie { display: none; }
}

/* /over-ons/: a short dark hero, then the story beside the team */
.hero.hero-pagina { min-height: 0; padding: 120px 0 88px; }
.hero-pagina .display-lg { margin-top: 16px; max-width: 20ch; color: var(--jafix-white); }
.hero-pagina .kernzin { max-width: 640px; }
.over-ons-verhaal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: start;
}
.over-ons-verhaal .display-md { color: var(--jafix-dark-green); }
.over-ons-verhaal > div > p { margin: 18px 0 0; font-size: 18px; line-height: 1.6; color: var(--jafix-grey-darker); }
.over-ons-verhaal .team { margin-top: 32px; }

@media (max-width: 1000px) {
  .vertrouwen-top, .platform, .over-ons-verhaal { grid-template-columns: minmax(0, 1fr); }
  .platform-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .team { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .person {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 4px;
    align-items: start;
  }
  .person img { width: 80px; height: 80px; grid-row: span 2; }
  .platform { padding: 24px 20px; }
  .partners-rij { gap: 40px; }
  .partners-rij img { height: 30px; }
  @keyframes partners-scroll { to { transform: translateX(calc(-50% - 20px)); } }
}