/* GENERATED by fabricaide_cms.styles. Do not edit: the next render overwrites this file.
   Layers, later wins: base (theme/base.css 1.0.0), foundation (demo/css/foundation.css), blocks (25 folder(s)),
   overrides (theme/overrides/<id>.css). */
@layer base, foundation, blocks, overrides;

@layer base {
/* Base: what every site on the token list shares, before its own foundation (FCMS-071, Richard, 18-sep-2026).
   Measured: the declarations Blue's and Brein Balans's foundations both had, word for word, and nothing else.
   It reads only the library's tokens; each site gives them values in its foundation, which is joined after
   this sheet in its own cascade layer and so wins wherever it says something else. */
* {
  box-sizing: border-box;
}

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.15;
}

.Header1, .Header2, .Header3 {
  display: block;
  font-family: var(--font-head);
  line-height: 1.15;
}

.Header3 {
  font-size: var(--step-1);
}

img {
  display: block;
  max-width: 100%;
}

.nav {
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  list-style: none;
}

.nav-links a {
  border-bottom: 2px solid transparent;
}

.nav-burger {
  display: none;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
}

.section-kicker {
  text-transform: uppercase;
}

.footer-grid {
  display: grid;
}

.footer a {
  display: block;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
}

@layer foundation {
/* Blue Accountants | Adviseurs — careers demo
   Palette from live brand: #235BA8 (primary), #00A8EA (accent) */
:root {
  --line: #dde6f0;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(20, 44, 74, 0.08);
  --shadow-lg: 0 18px 50px rgba(20, 44, 74, 0.14);
  /* Library token contract (fabricode library/tokens.json, roadmap 87): every token a shared block may
     read, on Blue's values. Blue's own brand names (--blue, --navy, --sky ...) went on 18-sep-2026 (FCMS-072):
     --blue is --accent-strong, --navy --heading or --surface-deep, --sky --accent, --sky-soft --accent-tint,
     --bg --surface-alt, --text --ink, --muted --ink-soft, --white --surface, --on-deep or --on-accent. */
  --surface: #ffffff;
  --surface-alt: #f5f8fc;
  --surface-deep: #142c4a;
  --on-deep: #ffffff;
  --ink: #2a3a4f;
  --heading: #142c4a;
  --ink-soft: #64748b;
  --ink-faint: #64748b;
  --accent: #00a8ea;
  --accent-strong: #235ba8;
  --accent-tint: #e5f6fd;
  --on-accent: #ffffff;
  --focus: var(--accent);
  --font-head: "Manrope", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --step--1: 14.5px;
  --step-0: 16.5px;
  --step-1: clamp(18px, 2vw, 20px);
  --step-2: clamp(21px, 2.6vw, 26px);
  --step-3: clamp(28px, 3.6vw, 38px);
  --step-4: clamp(34px, 5vw, 54px);
  --measure: 620px;
  --gutter: 24px;
  --section-y: 44px;
  --container: 1120px;
  --stroke: 1px;
  /* Blue's two button colours, as built since the first commit (DESIGN.md, Richard 18-sep-2026): the primary
     button is sky with navy text, the nav CTA solid blue. */
  --btn-primary-bg: var(--accent);
  --btn-primary-ink: var(--heading);
  --btn-primary-hover: #33bdf0;
  --nav-cta-bg: var(--accent-strong);
  --nav-cta-hover: #17406e;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* A CMS field with nothing in it should not exist on the public site. */
[data-cms]:empty {
  display: none;
}

h1,
h2,
h3,
h4 {
  color: var(--heading);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* CMS text-toolbar heading styles - applied as an inline span inside
   editable body copy (not a real <h1-3>, see editor.js applyHeading). */
.Header1,
.Header2,
.Header3 {
  color: var(--heading);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.Header1 {
  font-size: clamp(26px, 3.4vw, 34px);
  margin: 0.5em 0 0.2em;
}

.Header2 {
  font-size: var(--step-2);
  margin: 0.4em 0 0.2em;
}

.Header3 {
  margin: 0.3em 0 0.2em;
}

a {
  color: var(--accent-strong);
  text-decoration: none;
}

/* Links inserted into editable prose need an underline - color alone isn't
   enough of a signal there, unlike nav/footer/button links which read as
   links from their position and styling (15-aug-2026, Richard). */
[data-cms] a:not(.btn) {
  text-decoration: underline;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Nav ---------- */
.nav {
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
}

.nav-inner {
  height: 72px;
}

.nav-logo {
  gap: 10px;
}

.nav-logo img {
  height: 70px;
  width: auto;
}

.nav-links {
  align-items: center;
  gap: 32px;
}
.nav-links a {
  color: var(--heading);
  font-weight: 600;
  font-size: 15.5px;
  padding: 6px 0;
}
.nav-links a:hover {
  color: var(--accent-strong);
}
.nav-links a.active {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
}

.nav-cta {
  background: var(--nav-cta-bg);
  color: var(--on-accent) !important;
  padding: 11px 22px !important;
  border-radius: 10px;
  border-bottom: none !important;
  transition: background 0.2s;
}
.nav-cta:hover {
  background: var(--nav-cta-hover);
  color: var(--on-accent) !important;
}

.nav-burger {
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: relative;
}

.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--surface-deep);
  margin: 5px auto;
  transition: 0.2s;
}

.hero-actions {
  gap: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  border: none;
  transition: 0.2s;
  font-family: inherit;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-ink);
}

.btn-primary:hover {
  background: var(--btn-primary-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--on-accent);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.btn-secondary:hover {
  border-color: var(--on-accent);
}

.btn-secondary--light {
  background: transparent;
  color: #333;
  border: 1.5px solid #666;
}

.btn-secondary--light:hover {
  border-color: #333;
}

/* ---------- Sections ---------- */
.section {
  padding: var(--section-y) 0;
}

.section.alt {
  background: var(--surface-alt);
}

.section-head {
  max-width: 620px;
  margin-bottom: 52px;
}

/* The standalone Tekst block has no sibling content in its .container - it's
   the only block type where .section-head is the whole section, so it's the
   only one this can target without widening Kaarten/Citaten/FAQ's intros too. */
.section-head:only-child {
  max-width: 100%;
}

.section-kicker {
  color: var(--accent-strong);
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 13px;
  margin-bottom: 12px;
}

.section-head h2 {
  font-size: var(--step-3);
  margin-bottom: 14px;
}

.section-head p {
  color: var(--ink-soft);
  font-size: 17.5px;
}

/* ---------- USP icon row (single row, no card chrome) ---------- */
.section-head:has(+ .usp-icon-grid) {
  max-width: 100%;
}

.usp-icon-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  margin-bottom: 24px;
}

.usp-icon {
  display: block;
  color: inherit;
  text-decoration: none;
}

.usp-icon-glyph {
  width: 140px;
  height: 140px;
  margin: 0 auto 20px;
}

.usp-icon-glyph img {
  display: block;
  width: 100%;
  height: 100%;
}

.usp-icon h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.usp-icon p {
  color: var(--ink-soft);
  font-size: 15.5px;
}

.checklist {
  list-style: none;
  margin: 20px 0 28px;
}

.checklist li {
  padding-left: 26px;
  position: relative;
  margin-bottom: 11px;
  font-size: 16px;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.aside-faq-link {
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--accent-strong);
}

.aside-faq-link:hover {
  color: var(--accent);
}

/* ---------- Form ---------- */
.form-wrap {
  max-width: 680px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-field.full {
  grid-column: 1/-1;
}

.form-field label {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--heading);
}

/* Required fields carry an asterisk (Richard, 9-sep-2026). Driven by the
   control's own required attribute, so the form markup stored per environment
   needs no change and a field made optional later loses the mark by itself. */
.form-field label:has(+ input[required], + textarea[required])::after,
.form-field .consent input[required] + span::after {
  content: " *";
  color: var(--accent);
  font-weight: 700;
}

.form-wrap form::after {
  content: "* verplichte velden";
  display: block;
  margin-top: 14px;
  font-size: 13.5px;
  /* one pseudo-element, two colours: the star takes the label asterisk blue, the words stay muted */
  background: linear-gradient(90deg, var(--accent) 0 0.6em, var(--ink-soft) 0.6em);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.form-field input,
.form-field textarea {
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  transition: border-color 0.15s;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form-field textarea {
  min-height: 130px;
  resize: vertical;
}

.upload {
  border: 2px dashed var(--line);
  border-radius: 10px;
  padding: 28px;
  text-align: center;
  color: var(--ink-soft);
  cursor: pointer;
  transition: 0.15s;
  font-size: 15px;
}

.upload:hover,
.upload.dragover {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.upload b {
  color: var(--accent-strong);
}

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.consent input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--accent-strong);
}

.form-wrap.attempted input:invalid,
.form-wrap.attempted textarea:invalid {
  border-color: #dc3545;
}

.form-wrap.attempted .consent input:invalid ~ span {
  color: #dc3545;
}

.form-error {
  display: none;
  color: #dc3545;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 16px;
  background: #fdf0f0;
  border: 1px solid #dc3545;
  border-radius: 8px;
  margin-bottom: 12px;
  grid-column: 1/-1;
}

.form-wrap.attempted .form-error {
  display: block;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-6px);
  }
  40%, 80% {
    transform: translateX(6px);
  }
}
.form-success {
  display: none;
  text-align: center;
  padding: 70px 30px;
  background: var(--accent-tint);
  border-radius: var(--radius);
}

.form-success .check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-deep);
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}

.form-success h2 {
  margin-bottom: 10px;
}

/* The contact page's form sits in the vacancy layout's column: size and top margin as the vacancy headings,
   which it borrowed from them until 19-sep-2026 (FCMS-078) */
.detail-content .form-success h2 {
  font-size: 24px;
  margin-top: 44px;
}

.form-success p {
  color: var(--ink-soft);
  max-width: 420px;
  margin: 0 auto;
}

/* ---------- FAQ ---------- */
.faq-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

.faq-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 100px;
  border: 1.5px solid var(--line);
  font-weight: 600;
  font-size: 15px;
  color: var(--heading);
  transition: 0.2s;
}

.faq-nav a:hover,
.faq-nav a.active {
  background: var(--accent-strong);
  color: var(--on-deep);
  border-color: var(--accent-strong);
}

.faq-nav-count {
  background: var(--accent-tint);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
}

.faq-nav a:hover .faq-nav-count,
.faq-nav a.active .faq-nav-count {
  background: rgba(255, 255, 255, 0.2);
  color: var(--on-deep);
}

.faq-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.faq-contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px;
  text-align: center;
  transition: 0.2s;
}

.faq-contact-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.faq-contact-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-strong);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-weight: 700;
}

.faq-contact-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.faq-contact-card p {
  color: var(--ink-soft);
  font-size: 15px;
  margin-bottom: 16px;
}

.faq-contact-link {
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-strong);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--surface-deep);
  color: rgba(255, 255, 255, 0.75);
  padding: 56px 0 34px;
  margin-top: 0;
}

.footer-grid {
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer h4 {
  color: var(--on-deep);
  font-size: 16px;
  margin-bottom: 14px;
}

.footer a {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 8px;
  font-size: 15px;
}

.footer a:hover {
  color: var(--accent);
}

.footer p {
  font-size: 15px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 22px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.45);
  gap: 10px;
}

.footer-wordmark {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 30px;
  color: var(--on-deep);
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.footer-wordmark span {
  color: var(--accent);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .usp-icon-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .section {
    padding: 30px 0;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--surface);
    flex-direction: column;
    gap: 0;
    padding: 12px 24px 20px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav-links.open {
    display: flex;
    align-items: flex-start;
  }
  .nav-links li {
    width: 100%;
  }
  .nav-links a {
    display: block;
    padding: 12px 0;
  }
  .nav-cta {
    margin-top: 8px;
    text-align: center;
  }
  .nav-burger {
    display: block;
  }
}
}

@layer blocks {

/* ---- block: beeld-tekst 3.0.1 (library) ---- */
/* beeld-tekst: image beside text. Speaks the library token contract (--radius, --shadow-lg, --ink-soft); a site maps its brand into those in its foundation. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.split-img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  margin-bottom: 16px;
}

.split p {
  color: var(--ink-soft);
  margin-bottom: 14px;
}

.carousel-slide-link .split-img {
  border-radius: 0;
  box-shadow: none;
  min-height: 380px;
}

@media (max-width: 900px) {
  .split, .detail-body, .quote-grid, .story-featured, .faq-contact, .carousel-slide-link {
    grid-template-columns: 1fr;
  }
}

/* ---- block: beeld-verhaal 2.0.2 (library) ---- */
/* extracted from Blue Accountants on 11-sep-2026 for the classes story-featured, story-featured-content, story-featured-img, story-quote-mark, story-role; review before it becomes the block's own */
.story-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.story-featured-img {
  overflow: hidden;
  background: var(--surface-alt);
  min-height: 380px;
}

.story-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-featured-flip .story-featured-img {
  order: 2;
}

.story-featured-content {
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-featured-content h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  margin-bottom: 14px;
}

.story-featured-content blockquote {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  border: none;
  padding: 0;
  margin: 0 0 18px;
}

.story-quote-mark {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 64px;
  font-weight: 800;
  color: var(--accent-strong);
  line-height: 32px;
  padding-top: 12px;
  user-select: none;
}

.story-role {
  font-size: 14px;
  color: var(--accent-strong);
  font-weight: 600;
  margin-bottom: 16px;
}

.section-head .story-quote-mark {
  margin-bottom: 10px;
}

.section-head .story-role {
  color: var(--accent-strong);
  font-size: 14px;
  margin-top: 20px;
}

@media (max-width: 900px) {
  .split, .detail-body, .quote-grid, .story-featured, .faq-contact, .carousel-slide-link {
    grid-template-columns: 1fr;
  }
  .story-featured-img {
    min-height: 260px;
  }
  .story-featured-img img {
    object-position: 50% 25%;
  }
  .story-featured-flip .story-featured-img {
    order: 0;
  }
  .story-featured-content {
    padding: 28px 24px;
  }
}

/* ---- block: cijfers 1.0.3 (library) ---- */
/* extracted from Blue Accountants on 11-sep-2026 for the classes stat, stats; review before it becomes the block's own */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  text-align: center;
}

.stat {
  padding: 30px 10px;
}

.stat b {
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: 44px;
  font-weight: 800;
  color: var(--accent-strong);
  letter-spacing: -0.02em;
}

.stat span {
  color: var(--ink-soft);
  font-size: 15.5px;
}

@media (max-width: 900px) {
  .usp-grid,
  .stats {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .usp-grid,
  .stats,
  .form-grid,
  .footer-grid,
  .usp-icon-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- block: citaten 1.0.4 (library) ---- */
/* extracted from Blue Accountants on 11-sep-2026 for the classes quote, quote-grid; review before it becomes the block's own */
.quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.quote {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--accent);
}

.quote p {
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 18px;
}

.quote-grid .quote p::before {
  content: "“";
  color: var(--accent-strong);
  font-size: 34px;
  font-weight: 800;
  line-height: 0;
  margin-right: 4px;
}

.quote cite {
  font-style: normal;
  font-weight: 700;
  color: var(--heading);
  font-size: 15px;
}

.quote cite span {
  display: block;
  font-weight: 500;
  color: var(--ink-soft);
  font-size: 14px;
}

@media (max-width: 900px) {
  .split, .detail-body, .quote-grid, .story-featured, .faq-contact, .carousel-slide-link {
    grid-template-columns: 1fr;
  }
}

/* ---- block: cta 1.0.4 (library) ---- */
/* cta: the band, its type and its buttons. Neutral: no site's colours. A site sets the --cta-* variables in its
   theme/overrides/cta.css; without them the band looks as Blue's did (the fallbacks), so Blue needs no bridge.
   --cta-from and --cta-to are the gradient's first two stops, for a site that keeps the gradient in its own colours. */
.cta-band {
  background: var(--cta-bg, linear-gradient(100deg, var(--cta-from, #17406e), var(--cta-to, var(--accent-strong)) 55%, #1c7fc4));
  border-radius: var(--cta-radius, 20px);
  padding: var(--cta-pad, 64px 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cta-gap, 30px);
  flex-wrap: wrap;
}
.cta-band h2 {
  color: var(--cta-ink, var(--on-accent));
  font-size: var(--cta-heading-size, clamp(24px, 3vw, 32px));
  max-width: none;
}
.cta-band p {
  color: var(--cta-muted, rgba(255, 255, 255, 0.8));
  margin-top: var(--cta-body-gap, 8px);
}
@media (max-width: 640px) {
  .cta-band {
    padding: var(--cta-pad-small, 44px 28px);
  }
}

/* ---- block: faq 1.0.4 (library) ---- */
/* extracted from Blue Accountants on 11-sep-2026 for the classes faq-answer, faq-item, faq-list; review before it becomes the block's own */
.aside-faq .faq-list {
  max-width: none;
}

.aside-faq .faq-item {
  margin-bottom: 8px;
}

.aside-faq .faq-item summary {
  font-size: 15px;
  padding: 14px 34px 14px 16px;
}

.aside-faq .faq-item summary::after {
  right: 14px;
  font-size: 18px;
}

.aside-faq .faq-answer {
  padding: 0 16px 16px;
  font-size: 14.5px;
}

.faq-list {
  max-width: 760px;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  background: var(--surface);
  transition: 0.2s;
}

.faq-item[open] {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.faq-item summary {
  font-weight: 700;
  font-size: 17px;
  color: var(--heading);
  padding: 20px 48px 20px 24px;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 600;
  color: var(--accent-strong);
  transition: 0.2s;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-answer {
  padding: 0 24px 22px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.7;
}

/* ---- block: formulier 1.0.1 (library) ---- */
/* no block-specific classes in the template */

/* ---- block: foto-carrousel 1.1.1 (library) ---- */
/* foto-carrousel: a filmstrip of photos, one per slide, inside a vacancy's body (Blue, 7-sep-2026).
   The block's own styling since 19-sep-2026 (FCMS-078): until then Blue's foundation held the arrows and the
   photo sizing and the testimonial-carousel package the track, so the block arrived unstyled anywhere else.
   Everything sits under .carousel-photo, so it never styles another carousel on the same page.

   The track owns the card treatment (radius, shadow) and a fixed 3:2 footprint, so the column never jumps
   while the site's script measures the active slide; 4:3 on phones, where a 3:2 photo gets too short to read.
   The arrows sit inside the track so they centre on the photo, not on the photo plus dots. A single photo
   hides the arrows and dots. */
.carousel-photo {
  margin-top: 28px;
}
.carousel-photo .carousel-track {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/2;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background: var(--surface-alt);
}
.carousel-photo .carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  transform: translateX(-100%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.carousel-photo .carousel-slide.is-active {
  z-index: 2;
  transform: translateX(0);
  pointer-events: auto;
}
.carousel-photo .photo-slide {
  aspect-ratio: 3/2;
}
.carousel-photo .photo-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.carousel-photo .carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(20, 44, 74, 0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.carousel-photo .carousel-arrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--heading);
  border-bottom: 2px solid var(--heading);
}
.carousel-photo .carousel-arrow:hover {
  background: var(--surface);
  transform: translateY(-50%) scale(1.06);
}
.carousel-photo .carousel-arrow:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.carousel-photo .carousel-prev {
  left: 14px;
}
.carousel-photo .carousel-prev::before {
  transform: rotate(135deg);
  margin-left: 4px;
}
.carousel-photo .carousel-next {
  right: 14px;
}
.carousel-photo .carousel-next::before {
  transform: rotate(-45deg);
  margin-right: 4px;
}
.carousel-photo .carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.carousel-photo .carousel-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.carousel-photo .carousel-dot:hover {
  background: var(--ink-soft);
}
.carousel-photo .carousel-dot.is-active {
  background: var(--accent);
  transform: scale(1.3);
}
.carousel-photo .carousel-dot:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.carousel-photo:has(.carousel-slide:only-child) :is(.carousel-arrow, .carousel-dots) {
  display: none;
}

/* Breathing room above the photos when the item's heading is empty (the heading's own top margin does that job
   when there is one). */
.vitem > h2:not(:empty) + .carousel-photo {
  margin-top: 0;
}

@media (max-width: 640px) {
  .carousel-photo .carousel-track,
  .carousel-photo .photo-slide {
    aspect-ratio: 4/3;
  }
  .carousel-photo .carousel-arrow {
    width: 36px;
    height: 36px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-photo .carousel-slide {
    transition: none;
  }
}

/* ---- block: harmonica 1.0.3 (library) ---- */
/* extracted from Blue Accountants on 11-sep-2026 for the classes harmonica, harmonica-body, harmonica-head, harmonica-icon-wrap, harmonica-item, harmonica-list, harmonica-sub, is-active; review before it becomes the block's own */
.harmonica {
  position: relative;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 60px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 48px;
}

.harmonica-list {
  grid-column: 2;
}

.harmonica-item {
  position: relative;
  border-top: 1px solid var(--line);
  padding: 28px 0;
}

.harmonica-item:first-child {
  border-top: none;
  padding-top: 0;
}

.harmonica-icon-wrap {
  position: absolute;
  left: -200px;
  top: 28px;
  width: 140px;
  height: 140px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.harmonica-item:first-child .harmonica-icon-wrap {
  top: 0;
}

.harmonica-icon-wrap img {
  display: block;
  width: 100%;
  height: 100%;
}

.harmonica-item.is-active .harmonica-icon-wrap {
  opacity: 1;
}

.harmonica-head {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.harmonica-head:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: 4px;
}

.harmonica-head h3 {
  font-size: 24px;
  margin-bottom: 6px;
}

.harmonica-sub {
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 17px;
}

.harmonica-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease;
}

.harmonica-item.is-active .harmonica-body {
  opacity: 1;
  margin-top: 16px;
}

.harmonica-body p {
  color: var(--ink-soft);
  font-size: 16.5px;
  line-height: 1.65;
  margin-bottom: 14px;
}

.harmonica-body p:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .harmonica-icon-wrap, .harmonica-body, .carousel-slide {
    transition: none;
  }
}
body.cms-active .harmonica-body {
  max-height: none !important;
  opacity: 1 !important;
  margin-top: 16px !important;
  overflow: visible !important;
}

.carousel-slide.is-active {
  z-index: 2;
  transform: translateX(0);
  pointer-events: auto;
}

.carousel-dot.is-active {
  background: var(--accent);
  transform: scale(1.3);
}

@media (max-width: 900px) {
  .harmonica {
    grid-template-columns: 1fr;
    padding: 32px 24px;
  }
  .harmonica-list {
    grid-column: 1;
  }
  .harmonica-icon-wrap {
    position: static;
    width: 100px;
    height: 100px;
    margin-bottom: 16px;
    opacity: 1;
    display: none;
  }
  .harmonica-item.is-active .harmonica-icon-wrap {
    display: block;
  }
}

/* ---- block: hero 2.0.1 (library) ---- */
/* extracted from Blue Accountants on 11-sep-2026 for the classes hero, hero-grad, hero-img, hero-inner, hero-kicker; review before it becomes the block's own */
.hero {
  position: relative;
  background: var(--surface-deep);
  overflow: hidden;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

.hero-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20, 44, 74, 0.92) 20%, rgba(35, 91, 168, 0.55) 45%, rgba(0, 168, 234, 0.15));
}

.hero-inner {
  position: relative;
  padding: 110px 0 120px;
  max-width: 640px;
}

.hero-kicker {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  margin-bottom: 18px;
}

.hero h1 {
  color: var(--on-deep);
  font-size: clamp(34px, 5vw, 54px);
  margin-bottom: 20px;
}

.hero p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 19px;
  margin-bottom: 34px;
}

.hero-image-only .hero-img {
  opacity: 1;
}

.detail-hero .hero-inner {
  padding: 80px 0 88px;
}

@media (max-width: 640px) {
  .hero-inner {
    padding: 70px 0 80px;
  }
}

/* ---- block: hero-image 2.0.1 (library) ---- */
/* extracted from Blue Accountants on 11-sep-2026 for the classes hero, hero-image-only, hero-img; review before it becomes the block's own */
.hero {
  position: relative;
  background: var(--surface-deep);
  overflow: hidden;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

.hero h1 {
  color: var(--on-deep);
  font-size: clamp(34px, 5vw, 54px);
  margin-bottom: 20px;
}

.hero p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 19px;
  margin-bottom: 34px;
}

.hero-image-only {
  min-height: 500px;
}

.hero-image-only .hero-img {
  opacity: 1;
}

@media (max-width: 900px) {
  .hero-image-only {
    min-height: 420px;
  }
}
@media (max-width: 640px) {
  .hero-image-only {
    min-height: 320px;
  }
}

/* ---- block: kaarten 1.1.0 (library) ---- */
/* kaarten: structure only. Each site styles its card grids in its own CSS (roadmap 91, 17-sep-2026) */

/* ---- block: quote-band 1.0.2 (library) ---- */
/* extracted from Blue Accountants on 11-sep-2026 for the classes quote-band, quote-band-mark; review before it becomes the block's own */
.quote-band {
  background: var(--surface-deep);
  padding: 80px 0;
  text-align: center;
}

.quote-band blockquote {
  max-width: 700px;
  margin: 0 auto;
  border: none;
  padding: 0;
}

.quote-band-mark {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 72px;
  font-weight: 800;
  color: var(--accent);
  line-height: 0.5;
  margin-bottom: 24px;
  user-select: none;
}

.quote-band blockquote p {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.92);
  font-size: 22px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}

.quote-band cite {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  font-size: 15px;
}

.quote-band cite span {
  display: block;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  margin-top: 4px;
}

/* ---- block: stappenplan 1.1.1 (library) ---- */
/* stappenplan: the application steps inside a vacancy's body (Blue, 7-sep-2026). The block's own styling since
   19-sep-2026 (FCMS-078); until then Blue's foundation held it, so the block arrived unstyled anywhere else.
   Rules sit under .process-steps, so the column's paragraph margin (vacancy-facts) never reaches a step. */
.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
  margin: 20px 0 12px;
}
.process-steps .process-step img {
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
}
.process-steps .process-step h4 {
  font-size: 15.5px;
  color: var(--heading);
  margin-bottom: 4px;
}
.process-steps .process-step p {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}

/* Numbering is a counter inside the stappenplan item, so steps added or removed in the editor renumber themselves.
   Scoped to the item: a column saved before the slice still carries its numbers in the title text. */
.vitem[data-vitem=stappenplan] .process-steps {
  counter-reset: step;
}

.vitem[data-vitem=stappenplan] .process-step h4::before {
  counter-increment: step;
  content: counter(step) ". ";
}

@media (max-width: 640px) {
  .process-steps {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- block: story-quote 1.0.2 (library) ---- */
/* extracted from Blue Accountants on 11-sep-2026 for the classes story-quote-mark, story-role; review before it becomes the block's own */
.story-quote-mark {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 64px;
  font-weight: 800;
  color: var(--accent-strong);
  line-height: 32px;
  padding-top: 12px;
  user-select: none;
}

.story-role {
  font-size: 14px;
  color: var(--accent-strong);
  font-weight: 600;
  margin-bottom: 16px;
}

.section-head .story-quote-mark {
  margin-bottom: 10px;
}

.section-head .story-role {
  color: var(--accent-strong);
  font-size: 14px;
  margin-top: 20px;
}

/* ---- block: tekst 1.0.2 (library) ---- */
/* no block-specific classes in the template */

/* ---- block: tekst-beeld 2.0.1 (library) ---- */
/* extracted from Blue Accountants on 11-sep-2026 for the classes split, split-img; review before it becomes the block's own */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.split-img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  margin-bottom: 16px;
}

.split p {
  color: var(--ink-soft);
  margin-bottom: 14px;
}

.carousel-slide-link .split-img {
  border-radius: 0;
  box-shadow: none;
  min-height: 380px;
}

@media (max-width: 900px) {
  .split, .detail-body, .quote-grid, .story-featured, .faq-contact, .carousel-slide-link {
    grid-template-columns: 1fr;
  }
}

/* ---- block: testimonial-carousel 2.0.3 (library) ---- */
/* extracted from Blue Accountants on 11-sep-2026 for the classes carousel, carousel-dot, carousel-dots, carousel-meta, carousel-slide, carousel-slide-link, carousel-track, is-active, split-img, story-quote-mark; review before it becomes the block's own */
.harmonica-item.is-active .harmonica-icon-wrap {
  opacity: 1;
}

.harmonica-item.is-active .harmonica-body {
  opacity: 1;
  margin-top: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .harmonica-icon-wrap,
  .harmonica-body,
  .carousel-slide {
    transition: none;
  }
}
.split-img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-quote-mark {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 64px;
  font-weight: 800;
  color: var(--accent-strong);
  line-height: 32px;
  padding-top: 12px;
  user-select: none;
}

.section-head .story-quote-mark {
  margin-bottom: 10px;
}

.carousel-track {
  position: relative;
  overflow: hidden;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  transform: translateX(-100%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.carousel-slide.is-active {
  z-index: 2;
  transform: translateX(0);
  pointer-events: auto;
}

.carousel-slide-link {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.carousel-slide-link .split-img {
  border-radius: 0;
  box-shadow: none;
  min-height: 380px;
}

.carousel-slide-link > div:last-child {
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.carousel-meta {
  font-size: 14px;
  color: var(--accent-strong);
  font-weight: 600;
  margin-bottom: 16px;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}

.carousel-dot:hover {
  background: var(--ink-soft);
}

.carousel-dot.is-active {
  background: var(--accent);
  transform: scale(1.3);
}

.carousel-dot:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .split,
  .detail-body,
  .quote-grid,
  .story-featured,
  .faq-contact,
  .carousel-slide-link {
    grid-template-columns: 1fr;
  }
  .harmonica-item.is-active .harmonica-icon-wrap {
    display: block;
  }
}

/* ---- block: vacancy-facts 2.0.1 (library) ---- */
/* vacancy-facts: a vacancy's body, the column of items (vrije-tekst, werkdag, foto-carrousel, stappenplan) beside
   the facts card (Blue). The block's own styling since 19-sep-2026 (FCMS-078); until then Blue's foundation held
   it. The column owns the items' headings and paragraph spacing; each item styles its own parts. Blue's contact
   form reuses the two-column layout and the aside card. */
.detail-body {
  display: grid;
  grid-template-columns: 2fr 0.8fr;
  gap: 56px;
  align-items: start;
}

/* The items' own headings and paragraphs only: the contact form reuses .detail-content with text of its own. */
.detail-content > .vitem > h2 {
  font-size: 24px;
  margin: 44px 0 14px;
}

/* Only the column's very first heading drops its top margin; an empty optional heading is hidden by the
   foundation's [data-cms]:empty rule. */
.detail-content > .vitem:first-child > h2:first-child {
  margin-top: 0;
}

.detail-content > .vitem > p {
  margin-bottom: 14px;
}

.detail-aside {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.aside-card {
  background: var(--surface-alt);
  border-radius: var(--radius);
  padding: 30px;
}
.aside-card h3 {
  font-size: 17px;
  margin-bottom: 14px;
}
.aside-card dl {
  font-size: 15px;
}
.aside-card dt {
  color: var(--ink-soft);
  margin-top: 12px;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.aside-card dd {
  color: var(--heading);
  font-weight: 600;
}
.aside-card .btn {
  width: 100%;
  justify-content: center;
  margin-top: 18px;
}

.aside-contact {
  font-size: 15px;
  color: var(--ink-soft);
}
.aside-contact b {
  color: var(--heading);
}

@media (max-width: 900px) {
  .detail-aside {
    position: static;
  }
}

/* ---- block: vacancy-featured 1.0.2 (library) ---- */
.vac-more {
  margin-top: 44px;
}

/* ---- block: vacancy-grid 1.0.3 (library) ---- */
/* vacancy-grid: the vacancy overview, a category filter over a grid of cards (Blue). The block's own styling since
   19-sep-2026 (FCMS-078); until then Blue's foundation held it. vacancy-featured reuses the card classes. */
.filter-bar {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.filter-bar button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 10px 2px 14px;
  border-bottom: 2.5px solid transparent;
}
.filter-bar button:hover {
  color: var(--accent-strong);
}
.filter-bar button.active {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
}

.vac-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 900px) {
  .vac-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .vac-grid {
    grid-template-columns: 1fr;
  }
}

.vac-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: 0.2s;
  color: var(--ink);
}
.vac-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--accent);
}
.vac-card h3 {
  font-size: 20px;
}
.vac-card:hover .vac-link {
  color: var(--accent);
}

.vac-cat {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.vac-meta {
  color: var(--ink-soft);
  font-size: 14.5px;
}
.vac-meta b {
  color: var(--heading);
  font-weight: 600;
}

.vac-link {
  margin-top: auto;
  font-weight: 700;
  color: var(--accent-strong);
  font-size: 15px;
}

/* ---- block: vacancy-hero 2.0.1 (library) ---- */
/* vacancy-hero: the top of a vacancy page (Blue). The block's own styling since 19-sep-2026 (FCMS-078): the meta
   line under the title. The hero itself (image, gradient, kicker, title, the smaller detail-hero padding) comes
   from the hero package, whose classes this block reuses. */
.detail-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15.5px;
  margin-bottom: 30px;
}
.detail-meta .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---- block: verhaal-beeld 2.0.2 (library) ---- */
/* extracted from Blue Accountants on 11-sep-2026 for the classes story-featured, story-featured-content, story-featured-flip, story-featured-img, story-quote-mark, story-role; review before it becomes the block's own */
.story-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.story-featured-img {
  overflow: hidden;
  background: var(--surface-alt);
  min-height: 380px;
}

.story-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-featured-flip .story-featured-img {
  order: 2;
}

.story-featured-content {
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-featured-content h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  margin-bottom: 14px;
}

.story-featured-content blockquote {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  border: none;
  padding: 0;
  margin: 0 0 18px;
}

.story-quote-mark {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 64px;
  font-weight: 800;
  color: var(--accent-strong);
  line-height: 32px;
  padding-top: 12px;
  user-select: none;
}

.story-role {
  font-size: 14px;
  color: var(--accent-strong);
  font-weight: 600;
  margin-bottom: 16px;
}

.section-head .story-quote-mark {
  margin-bottom: 10px;
}

.section-head .story-role {
  color: var(--accent-strong);
  font-size: 14px;
  margin-top: 20px;
}

@media (max-width: 900px) {
  .split, .detail-body, .quote-grid, .story-featured, .faq-contact, .carousel-slide-link {
    grid-template-columns: 1fr;
  }
  .story-featured-img {
    min-height: 260px;
  }
  .story-featured-img img {
    object-position: 50% 25%;
  }
  .story-featured-flip .story-featured-img {
    order: 0;
  }
  .story-featured-content {
    padding: 28px 24px;
  }
}

/* ---- block: vrije-tekst 1.1.1 (library) ---- */
/* vrije-tekst: free text inside a vacancy's body (Blue, 16-sep-2026). The block's own styling since 19-sep-2026
   (FCMS-078): lists get accent dots. Headings and paragraph spacing belong to the column it sits in
   (vacancy-facts), so every item in the column shares them. */
.vitem[data-vitem=vrije-tekst] ul {
  margin: 12px 0 12px 2px;
  list-style: none;
}
.vitem[data-vitem=vrije-tekst] li {
  padding-left: 26px;
  position: relative;
  margin-bottom: 10px;
}
.vitem[data-vitem=vrije-tekst] li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---- block: werkdag 1.1.1 (library) ---- */
/* werkdag: a day in the life, a plain timeline inside a vacancy's body (Blue, 7-sep-2026; not an accordion).
   The block's own styling since 19-sep-2026 (FCMS-078); until then Blue's foundation held it. Rules sit under
   .day-timeline, so the column's paragraph margin (vacancy-facts) never reaches a row. */
.day-timeline {
  margin: 4px 0 20px;
}
.day-timeline .day-timeline-item {
  display: flex;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.day-timeline .day-timeline-item:first-child {
  border-top: none;
  padding-top: 0;
}
.day-timeline .day-timeline-time {
  flex: 0 0 92px;
  font-weight: 700;
  color: var(--accent-strong);
  font-size: 15px;
}
.day-timeline {
  /* :not(:empty): an empty CMS field stays hidden, as the foundation's [data-cms]:empty rule wants */
}
.day-timeline .day-timeline-body b:not(:empty) {
  display: block;
  color: var(--heading);
  margin-bottom: 4px;
}
.day-timeline .day-timeline-body p {
  margin: 0;
}
}

@layer overrides {

/* ---- override: this site's adjustments to kaarten ---- */
/* Blue's card grid and small-screen grid columns, moved here verbatim from the library kaarten block.css on 17-sep-2026:
   the library block keeps structure only (roadmap 91). */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.usp {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: 0.2s;
}

.usp:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.usp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  margin-bottom: 16px;
}

.usp h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.usp p {
  color: var(--ink-soft);
  font-size: 15.5px;
}

/* The card grid on smaller screens: two columns, then one. The cijfers block repeats this rule, but it loads
   before this file, so the grid above would win over it (roadmap 87, 17-sep-2026). */
@media (max-width: 900px) {
  .usp-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .usp-grid {
    grid-template-columns: 1fr;
  }
}
}