/* ============================================================
   ROI 2026 — compiled stylesheet
   Implements docs/design-standards.md v1 (2026-07-19).
   Mobile-first · 1280px content max · 760px prose · no jQuery.
   ============================================================ */

/* ---- Self-hosted fonts (no external requests) ---- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-sans-3-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-sans-3-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/spline-sans-mono-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/spline-sans-mono-italic.woff2') format('woff2');
}

/* ---- Tokens ---- */
:root {
  --roi-blue-900: #141F34;
  --roi-blue-800: #1B2C4B;
  --roi-blue-700: #29467A;
  --roi-blue-500: #3A66B6;
  --roi-blue-300: #8EA9D9; /* logo blue — surfaces only, never text on white */
  --roi-blue-100: #D7E2F4;
  --roi-blue-50:  #EFF3FB;
  --roi-amber-500: #E8952F; /* conversion only */
  --roi-amber-600: #9C4D0E; /* WCAG: >=4.5:1 op wit én getinte chipachtergronden */
  --roi-ink: #1A2230;
  --roi-slate: #5A6678;
  --roi-mist: #F4F6F9;
  --roi-paper: #FFFFFF;
  /* Alert: required-field markers and destructive controls only. Never a
     brand or conversion colour. 5.9:1 on white. See design-standards.md. */
  --roi-alert: #A3231B;

  --font-head: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono', 'SF Mono', monospace;

  --content-max: 1280px;
  --prose-max: 760px;
  --radius-s: 6px;
  --radius-m: 12px;
  --space: clamp(1rem, 2.5vw, 1.5rem);
  --section-pad: clamp(3rem, 7vw, 5.5rem);
  --header-h: 76px;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--roi-ink);
  background: var(--roi-paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--roi-blue-700); text-underline-offset: 2px; }
a:hover { color: var(--roi-blue-500); }
:focus-visible {
  outline: 2px solid var(--roi-amber-600);
  outline-offset: 2px;
  border-radius: 2px;
}
::selection { background: var(--roi-blue-100); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  color: var(--roi-blue-900);
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
table { border-collapse: collapse; font-variant-numeric: tabular-nums; }

/* ---- Layout primitives ---- */
.wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space); }
.prose { max-width: var(--prose-max); }
.section { padding-block: var(--section-pad); }
.section--tint { background: var(--roi-blue-50); }
.section--mist { background: var(--roi-mist); }
.section--navy { background: var(--roi-blue-800); color: var(--roi-blue-100); }
.section--navy h2, .section--navy h3 { color: #fff; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--roi-blue-900);
  color: #fff;
  padding: .8rem 1.2rem;
  border-radius: 0 0 var(--radius-s) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---- Signal dots & eyebrows ---- */
.dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: .55rem;
  vertical-align: 1px;
}
.dot--amber { background: var(--roi-amber-500); box-shadow: 0 0 0 3px rgba(232,149,47,.22); }
.dot--blue  { background: var(--roi-blue-300); box-shadow: 0 0 0 3px rgba(142,169,217,.25); }
.eyebrow {
  font-family: var(--font-head);
  font-stretch: 118%;
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--roi-blue-700);
  margin: 0 0 .9rem;
}
.section--navy .eyebrow, .hero .eyebrow, .page-hero .eyebrow { color: var(--roi-blue-300); }

/* ---- Route-line motif ---- */
.route-line {
  position: relative;
  height: 2px;
  background: var(--roi-blue-100);
  border: 0;
  border-radius: 2px;
  margin: 0 0 2.2rem;
  max-width: 220px;
}
.route-line::before, .route-line::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
}
.route-line::before { left: 0; background: var(--roi-blue-300); }
.route-line::after { right: 0; background: var(--roi-amber-500); }
.route-line--center { margin-inline: auto; }
.section--navy .route-line { background: rgba(142,169,217,.35); }

/* ---- Chips (mono course codes / durations) ---- */
.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .8rem;
  line-height: 1;
  padding: .42rem .6rem;
  border: 1px solid var(--roi-blue-100);
  border-radius: var(--radius-s);
  background: var(--roi-blue-50);
  color: var(--roi-blue-800);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chip--code { background: var(--roi-paper); }
@media (max-width: 520px) {
  /* Long duration chips ("27 lesdagen volgens opleidingsrooster") may wrap
     on narrow cards instead of forcing horizontal overflow. */
  .chip { white-space: normal; line-height: 1.35; }
}
.chip--amber { border-color: var(--roi-amber-500); background: rgba(232,149,47,.12); color: var(--roi-amber-600); }
.section--navy .chip, .hero .chip {
  background: rgba(142,169,217,.14);
  border-color: rgba(142,169,217,.4);
  color: var(--roi-blue-100);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .7rem 1.5rem;
  border-radius: var(--radius-s);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary {
  background: var(--roi-amber-500);
  color: var(--roi-blue-900);
}
.btn--primary:hover { background: #f0a54a; color: var(--roi-blue-900); }
.btn--secondary {
  background: transparent;
  color: var(--roi-blue-700);
  border-color: var(--roi-blue-700);
}
.btn--secondary:hover { background: var(--roi-blue-50); color: var(--roi-blue-700); }
.btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.55);
}
.btn--ghost-light:hover { background: rgba(255,255,255,.1); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--roi-paper);
  border-bottom: 1px solid var(--roi-blue-100);
  transition: box-shadow .2s ease;
}
.site-header.is-stuck { box-shadow: 0 2px 14px rgba(20,31,52,.08); }
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
  transition: min-height .2s ease;
}
.site-header.is-stuck .header-bar { min-height: 62px; }
.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--roi-blue-900);
}
.brand img { width: 44px; height: 44px; aspect-ratio: 1; }
.brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.brand-name small {
  display: block;
  font-family: var(--font-head);
  font-stretch: 115%;
  font-weight: 600;
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--roi-slate);
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px; height: 48px;
  padding: 12px;
  background: none;
  border: 1px solid var(--roi-blue-100);
  border-radius: var(--radius-s);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--roi-blue-900);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav { display: none; }
.site-nav.is-open {
  display: block;
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--roi-paper);
  border-bottom: 1px solid var(--roi-blue-100);
  box-shadow: 0 14px 24px rgba(20,31,52,.12);
  padding: .6rem var(--space) 1.2rem;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block;
  padding: .75rem .4rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--roi-blue-900);
  text-decoration: none;
  border-radius: var(--radius-s);
}
.site-nav a:hover { color: var(--roi-blue-700); background: var(--roi-blue-50); }
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a { color: var(--roi-blue-700); }
.site-nav .menu-cta { margin-top: .6rem; }
.site-nav .menu-cta a {
  background: var(--roi-amber-500);
  color: var(--roi-blue-900);
  text-align: center;
}
.site-nav .menu-cta a:hover { background: #f0a54a; color: var(--roi-blue-900); }

@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; position: static; }
  .site-nav ul { display: flex; align-items: center; gap: .15rem; }
  .site-nav a { padding: .55rem .75rem; font-size: .95rem; }
  .site-nav .menu-cta { margin: 0 0 0 .6rem; }
  .site-nav .menu-cta a { padding: .6rem 1.2rem; }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(58,102,182,.35), transparent 60%),
    linear-gradient(160deg, var(--roi-blue-900), var(--roi-blue-800) 70%);
  color: var(--roi-blue-100);
  overflow: hidden;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-inner { padding-block: clamp(3.2rem, 8vw, 6.5rem); max-width: 820px; }
.hero h1 { color: #fff; margin-bottom: .5em; }
.hero .lead { font-size: clamp(1.05rem, 2vw, 1.25rem); max-width: 640px; margin-bottom: 1.6em; color: var(--roi-blue-100); }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid rgba(142,169,217,.45);
  background: rgba(142,169,217,.12);
  color: #fff;
  border-radius: var(--radius-s);
  padding: .5rem .85rem;
  font-family: var(--font-head);
  font-stretch: 112%;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.hero-badge .dot { margin-right: 0; }
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 2rem;
}
/* Schematic route-line running under the hero */
.hero-route {
  position: absolute;
  inset-inline: 0;
  bottom: 34px;
  height: 2px;
  background: rgba(142,169,217,.3);
  pointer-events: none;
}
.hero-route i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--roi-blue-300);
}
.hero-route i:nth-child(1) { left: 12%; }
.hero-route i:nth-child(2) { left: 38%; }
.hero-route i:nth-child(3) { left: 64%; background: var(--roi-amber-500); }
.hero-route i:nth-child(4) { left: 88%; }

/* Page hero (inner pages / singles) */
.page-hero {
  background: linear-gradient(160deg, var(--roi-blue-900), var(--roi-blue-800) 75%);
  color: var(--roi-blue-100);
  padding-block: clamp(2.4rem, 5.5vw, 4rem);
}
.page-hero h1 { color: #fff; margin-bottom: .25em; }
.page-hero .lead { max-width: 680px; margin: 0; color: var(--roi-blue-100); font-size: 1.08rem; }
.page-hero .hero-facts { margin-top: 1.2rem; }
.breadcrumbs {
  font-size: .85rem;
  margin: 0 0 1.1rem;
  color: var(--roi-blue-300);
}
.breadcrumbs a { color: var(--roi-blue-300); text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.breadcrumbs .sep { margin-inline: .45rem; opacity: .6; }

/* ---- Cards ---- */
.card-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 800px) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: var(--roi-paper);
  border: 1px solid var(--roi-blue-100);
  border-radius: var(--radius-m);
  padding: 1.4rem 1.4rem 1.3rem;
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--roi-blue-300); }
/*
 * `.card-heading` is a card title that has to be an <h2> for document outline
 * reasons (axe heading-order) while still LOOKING like the <h3> card titles
 * around it. Keep the two selector groups below in sync.
 */
.card h3,
.card .card-heading { margin: 0; }
.card .card-heading { font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 600; letter-spacing: normal; }
.card h3 a,
.card .card-heading a { color: var(--roi-blue-900); text-decoration: none; }
.card h3 a::after,
.card .card-heading a::after { content: ""; position: absolute; inset: 0; }
.card h3 a:hover,
.card .card-heading a:hover { color: var(--roi-blue-700); }
.card p { margin: 0; color: var(--roi-slate); font-size: .95rem; }
.card-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: auto; padding-top: .6rem; }
.card .card-eyebrow {
  font-family: var(--font-head);
  font-stretch: 115%;
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--roi-blue-700);
}
.card--tint { background: var(--roi-blue-50); }
.card--link-list ul { list-style: none; padding: 0; margin: .2rem 0 0; }
.card--link-list li { border-top: 1px solid var(--roi-blue-100); }
.card--link-list li a {
  position: static;
  display: block;
  padding: .55rem .1rem;
  text-decoration: none;
  font-weight: 600;
}

/* Audience router cards */
.router-card {
  border-top: 3px solid var(--roi-blue-300);
}
.router-card .btn { align-self: flex-start; position: relative; z-index: 1; }

/* ---- Spec-sheet table ---- */
.spec-table {
  width: 100%;
  border: 1px solid var(--roi-blue-100);
  border-radius: var(--radius-m);
  border-spacing: 0;
  overflow: hidden;
  font-size: .97rem;
}
.spec-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-head);
  font-stretch: 115%;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--roi-blue-700);
  padding: 0 0 .7rem;
}
.spec-table th, .spec-table td {
  text-align: left;
  padding: .7rem .95rem;
  border-bottom: 1px solid var(--roi-blue-100);
  vertical-align: top;
}
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table th {
  width: 38%;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .88rem;
  color: var(--roi-blue-800);
  background: var(--roi-blue-50);
}
/* SO-4: was the off-token literal #FAFBFE (1.03:1 on white). Same zebra tint
   as .roi-steprow in lms.css, so both now read from the neutral surface token. */
.spec-table tr:nth-child(even) td { background: var(--roi-mist); }

/* ---- Route/traject diagram (metro grammar) ---- */
.traject {
  list-style: none;
  counter-reset: step;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.traject li {
  position: relative;
  padding: 0 0 1.9rem 2.4rem;
}
.traject li::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 20px;
  bottom: -4px;
  width: 2px;
  background: var(--roi-blue-100);
}
.traject li:last-child::before { display: none; }
.traject li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--roi-paper);
  border: 3px solid var(--roi-blue-300);
}
.traject li:last-child::after { border-color: var(--roi-amber-500); }
.traject h3 { margin-bottom: .25rem; font-size: 1.08rem; }
.traject p { margin: 0; color: var(--roi-slate); font-size: .95rem; max-width: 560px; }
@media (min-width: 900px) {
  .traject {
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
  }
  .traject li { padding: 2rem .9rem 0 0; }
  .traject li::before {
    left: 20px; right: -8px; top: 7px;
    bottom: auto;
    width: auto; height: 2px;
  }
  .traject li::after { top: 0; }
}

/* ---- Authority band ---- */
.authority-band { border-top: 3px solid var(--roi-amber-500); }
.authority-grid {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .authority-grid { grid-template-columns: repeat(3, 1fr); } }
.authority-item { border-left: 2px solid rgba(142,169,217,.45); padding-left: 1.1rem; }
.authority-item h3 { color: #fff; font-size: 1.02rem; margin-bottom: .3rem; }
.authority-item p { margin: 0; font-size: .93rem; color: var(--roi-blue-100); }
.authority-item a { color: var(--roi-amber-500); font-weight: 600; }
.authority-item a:hover { color: #f0a54a; }

/* ---- FAQ ---- */
.roi-faq {
  border: 1px solid var(--roi-blue-100);
  border-radius: var(--radius-m);
  background: var(--roi-paper);
  margin: 0 0 .8rem;
  overflow: hidden;
}
.roi-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 3rem 1rem 1.2rem;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--roi-blue-900);
  position: relative;
}
.roi-faq summary::-webkit-details-marker { display: none; }
.roi-faq summary::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--roi-blue-700);
  border-bottom: 2px solid var(--roi-blue-700);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.roi-faq[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.roi-faq[open] summary { border-bottom: 1px solid var(--roi-blue-100); background: var(--roi-blue-50); }
.roi-faq .faq-body, .roi-faq > :not(summary) { padding: 1rem 1.2rem; }
.roi-faq p:last-child { margin-bottom: 0; }

/* ---- Prose content ---- */
.entry-content { max-width: var(--prose-max); }
.entry-content h2 { margin-top: 1.8em; }
.entry-content h3 { margin-top: 1.4em; }
.entry-content table { width: 100%; border: 1px solid var(--roi-blue-100); font-size: .95rem; }
.entry-content table th, .entry-content table td { padding: .6rem .8rem; border-bottom: 1px solid var(--roi-blue-100); text-align: left; }
.entry-content table th { background: var(--roi-blue-50); font-family: var(--font-head); font-size: .88rem; }
.entry-content .table-scroll { overflow-x: auto; }
.entry-content blockquote {
  margin: 1.4em 0;
  padding: .8em 1.2em;
  border-left: 3px solid var(--roi-blue-300);
  background: var(--roi-blue-50);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.entry-content li { margin-bottom: .35em; }

/* ---- CTA band ---- */
.cta-band {
  background: linear-gradient(140deg, var(--roi-blue-800), var(--roi-blue-700));
  border-radius: var(--radius-m);
  color: var(--roi-blue-100);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: center;
  justify-content: space-between;
}
.cta-band h2 { color: #fff; margin: 0 0 .3rem; font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.cta-band p { margin: 0; max-width: 520px; }

/* ---- Forms ---- */
.roi-form { max-width: 640px; display: grid; gap: 1.05rem; }
.roi-form label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: .3rem;
  color: var(--roi-blue-900);
}
.roi-form .required { color: var(--roi-amber-600); }
.roi-form input[type="text"],
.roi-form input[type="email"],
.roi-form input[type="tel"],
.roi-form input[type="number"],
.roi-form select,
.roi-form textarea {
  width: 100%;
  font: inherit;
  color: var(--roi-ink);
  padding: .68rem .8rem;
  border: 1px solid var(--roi-blue-100);
  border-radius: var(--radius-s);
  background: var(--roi-paper);
  min-height: 48px;
}
.roi-form textarea { min-height: 130px; resize: vertical; }
.roi-form input:focus, .roi-form select:focus, .roi-form textarea:focus {
  outline: 2px solid var(--roi-amber-600);
  outline-offset: 1px;
  border-color: var(--roi-blue-300);
}
.roi-form .hp-field { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.form-note { font-size: .88rem; color: var(--roi-slate); margin: 0; }
.form-notice {
  max-width: 640px;
  border-radius: var(--radius-s);
  padding: .9rem 1.1rem;
  margin: 0 0 1.4rem;
  font-size: .97rem;
}
.form-notice--ok { background: var(--roi-blue-50); border: 1px solid var(--roi-blue-300); }
.form-notice--error { background: #FBEFE3; border: 1px solid var(--roi-amber-600); }

/* Contact info block.
   minmax(0,…) + min-width:0 on the items: grid items default to
   min-width:auto, so an intrinsically wide child (a Forminator row) inflated
   the track to 396px inside a 358px grid and pushed scrollWidth to 412 at
   390px (visual-audit P0-1). Tracks must never be sized by their content here. */
.contact-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
.contact-grid > * { min-width: 0; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.contact-details {
  border: 1px solid var(--roi-blue-100);
  border-radius: var(--radius-m);
  background: var(--roi-blue-50);
  padding: 1.5rem;
  align-self: start;
}
.contact-details h2 { font-size: 1.15rem; }
.contact-details dl { margin: 0; }
.contact-details dt {
  font-family: var(--font-head);
  font-stretch: 112%;
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--roi-blue-700);
  margin-top: 1rem;
}
.contact-details dd { margin: .15rem 0 0; }

/* ---- Footer ---- */
.site-footer {
  background: var(--roi-blue-900);
  color: var(--roi-blue-100);
  margin-top: var(--section-pad);
}
.footer-route {
  position: relative;
  height: 2px;
  background: rgba(142,169,217,.35);
}
.footer-route i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--roi-blue-300);
}
.footer-route i:nth-child(1) { left: 18%; }
.footer-route i:nth-child(2) { left: 50%; background: var(--roi-amber-500); }
.footer-route i:nth-child(3) { left: 82%; }
.footer-grid {
  display: grid;
  gap: 2rem;
  padding-block: 3rem 2.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h2 {
  color: #fff;
  font-size: .85rem;
  font-stretch: 115%;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer a { color: var(--roi-blue-100); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-brand img { width: 52px; height: 52px; margin-bottom: .8rem; }
.footer-brand p { font-size: .93rem; max-width: 300px; color: var(--roi-blue-100); }
.footer-legal {
  border-top: 1px solid rgba(142,169,217,.25);
  padding-block: 1.2rem;
  font-size: .85rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  justify-content: space-between;
  color: var(--roi-blue-300);
}
.footer-legal span { font-variant-numeric: tabular-nums; }

/* ---- Consent banner ---- */
.consent-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 300;
  background: var(--roi-blue-900);
  color: var(--roi-blue-100);
  border-top: 3px solid var(--roi-amber-500);
  padding: 1.1rem var(--space) 1.3rem;
  display: none;
}
.consent-banner.is-visible { display: block; }
.consent-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.consent-inner p { margin: 0; font-size: .92rem; max-width: 640px; }
.consent-inner a { color: var(--roi-blue-300); }
.consent-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
/* Refuse gets identical prominence to accept (AVG) */
.consent-actions .btn { min-height: 44px; padding: .5rem 1.2rem; font-size: .95rem; }

/* ---- 404 ---- */
.error-404 .chip { font-size: 1rem; }

/* ---- Utility ---- */
.mt-2 { margin-top: 2rem; }
.center { text-align: center; }
.section-head { max-width: 720px; margin-bottom: 2.2rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .route-line { margin-inline: auto; }
.section-head p { color: var(--roi-slate); margin: 0; }
.section--navy .section-head p { color: var(--roi-blue-100); }
.screen-reader-text {
  clip-path: inset(50%);
  height: 1px; width: 1px;
  overflow: hidden;
  position: absolute;
  margin: -1px;
}

/* === Hero media (factory image slots, navy duotone per design-standards) === */
.hero, .page-hero { position: relative; overflow: hidden; }
.hero > .wrap, .page-hero > .wrap { position: relative; z-index: 2; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.9);
}
/* navy multiply + logo-blue lift = duotone; darkens toward text for contrast */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 31, 52, 0.94) 0%, rgba(27, 44, 75, 0.82) 45%, rgba(27, 44, 75, 0.55) 100%),
    linear-gradient(0deg, rgba(142, 169, 217, 0.18), rgba(142, 169, 217, 0.18));
  mix-blend-mode: normal;
}
.hero--media .hero-inner, .page-hero--media .wrap { text-shadow: 0 1px 2px rgba(20, 31, 52, 0.4); }
@media (max-width: 720px) {
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(20, 31, 52, 0.92) 0%, rgba(27, 44, 75, 0.85) 100%),
      linear-gradient(0deg, rgba(142, 169, 217, 0.15), rgba(142, 169, 217, 0.15));
  }
}

/* === Card media + CTA band media (imagery pass 2) === */
.router-card--media { padding-top: 0; overflow: hidden; }
/* Full-bleed card image: cancel the card's horizontal padding and top radius clip */
.card-media { margin: 0 -1.4rem 1rem; height: 150px; overflow: hidden; border-bottom: 2px solid var(--roi-blue-300, #8EA9D9); position: relative; border-radius: var(--radius-m) var(--radius-m) 0 0; }
.card-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(27,44,75,.45), rgba(27,44,75,.45)), linear-gradient(0deg, rgba(142,169,217,.2), rgba(142,169,217,.2)); }
.cta-band { position: relative; overflow: hidden; }
.cta-band--media > div { position: relative; z-index: 2; }
.cta-band--media .hero-media { position: absolute; inset: 0; z-index: 0; }
.cta-band--media .hero-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.75); }
.cta-band--media .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,31,52,.95), rgba(27,44,75,.85)); }

/* === WooCommerce shop grid (exam products) === */
.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
  list-style: none; margin: 1.5rem 0 0; padding: 0;
}
@media (max-width: 900px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .woocommerce ul.products { grid-template-columns: 1fr; } }
.woocommerce ul.products li.product {
  position: relative; display: flex; flex-direction: column; gap: .55rem;
  background: var(--roi-paper); border: 1px solid var(--roi-blue-100);
  border-radius: var(--radius-m); padding: 0 1.2rem 1.2rem; overflow: hidden;
  transition: border-color .15s ease;
}
.woocommerce ul.products li.product:hover { border-color: var(--roi-blue-300); }
.woocommerce ul.products li.product img {
  width: calc(100% + 2.4rem); max-width: calc(100% + 2.4rem); margin: 0 -1.2rem .4rem; height: auto; display: block;
  border-bottom: 2px solid var(--roi-blue-300);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.05rem; line-height: 1.35; margin: 0; color: var(--roi-blue-900);
}
.woocommerce ul.products li.product a { text-decoration: none; }
.woocommerce ul.products li.product .price {
  font-weight: 600; color: var(--roi-blue-700); font-size: 1.05rem;
}
.woocommerce ul.products li.product .price .woocommerce-price-suffix { font-weight: 400; color: var(--roi-slate); font-size: .85rem; }
.chip--usp { border-color: var(--roi-amber-600); color: var(--roi-amber-600); align-self: flex-start; }
.woocommerce ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button {
  display: inline-block; margin-top: auto; background: var(--roi-blue-700); color: #fff;
  border: 0; border-radius: 6px; padding: .65rem 1.1rem; font-weight: 600; font-size: .95rem;
  text-align: center; cursor: pointer; transition: background .15s ease; text-decoration: none;
}
.woocommerce ul.products li.product .button:hover, .woocommerce a.button:hover { background: var(--roi-blue-500); color: #fff; }
.woocommerce ul.products li.product .added_to_cart { font-size: .9rem; color: var(--roi-blue-700); }
/* single product buy box */
.single-product .summary .price { font-size: 1.5rem; color: var(--roi-blue-700); font-weight: 700; }
.single-product .summary .woocommerce-price-suffix { font-size: .95rem; font-weight: 400; color: var(--roi-slate); }
.roi-usp-list { list-style: none; padding: 1rem 1.2rem; margin: 1rem 0; background: var(--roi-blue-50); border-radius: var(--radius-m); }
.roi-usp-list li { padding-left: 1.4rem; position: relative; margin: .35rem 0; }
/* NEW-4: these four bullets were amber-500. A USP list is a feature list, which
   the refined amber rule names explicitly as a non-amber case, and on the
   product page they sat directly above the legitimate amber "Bestel
   examenpoging" button, competing with the one control that takes the money.
   They are signal dots on information, so they take the blue info aspect.
   (A `::before` fill is invisible to a computed-style audit of elements, which
   is why the inventory in the report missed them.) */
.roi-usp-list li::before { content: ""; position: absolute; left: 0; top: .48em; width: 10px; height: 10px; border-radius: 50%; background: var(--roi-blue-300); }
.single-product .summary .cart .button { background: var(--roi-amber-500); color: var(--roi-blue-900); font-size: 1.05rem; padding: .8rem 1.5rem; }
.single-product .summary .cart .button:hover { background: var(--roi-amber-600); color: #fff; }

/* === Woo views: boxed layouts (woocommerce.php) === */
.page-hero--slim .breadcrumbs { margin: 0; }
.page-hero--slim { padding-block: 1rem; }
.page-hero--slim .wrap > *:not(.breadcrumbs) { display: none; }

/* Full-width-but-boxed product grid inside prose content (/examens/).
   Scoped to the examens page: unscoped, this also matched the account page's
   login box inside its 560px wrap, forcing it to 1232px and overflowing the
   viewport (it overrode the 420px cap in lms.css). */
.page-examens .entry-content > .woocommerce,
.page-template-page-examens .entry-content > .woocommerce {
  width: calc(min(var(--content-max), 100vw) - 2 * var(--space));
  max-width: none;
}

/* --- Single product: two-column boxed layout --- */
.single-product div.product { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem; align-items: start; }
.single-product div.product .woocommerce-product-gallery { grid-column: 1; }
.single-product div.product .summary { grid-column: 2; display: flex; flex-direction: column; gap: .9rem; margin: 0; }
.single-product div.product .woocommerce-tabs,
.single-product div.product .related.products,
.single-product div.product > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
@media (max-width: 860px) { .single-product div.product { grid-template-columns: 1fr; } .single-product div.product .summary, .single-product div.product .woocommerce-product-gallery { grid-column: 1; } }
.single-product .woocommerce-product-gallery img { border-radius: var(--radius-m); border: 1px solid var(--roi-blue-100); width: 100%; height: auto; }
.single-product .summary .product_title { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; margin: 0; }
.single-product .summary .product_meta { color: var(--roi-slate); font-size: .9rem; }
.single-product .summary .woocommerce-product-details__short-description p { margin: 0; color: var(--roi-slate); }

/* quantity + buy row */
.single-product form.cart { display: flex; flex-wrap: wrap; gap: .8rem; align-items: stretch; margin: .4rem 0 0; }
.woocommerce .quantity { display: inline-flex; }
.woocommerce .quantity .qty {
  width: 5.2rem; padding: .7rem .4rem .7rem .9rem; font: inherit; font-weight: 600; text-align: center;
  border: 1px solid var(--roi-blue-100); border-radius: 6px; background: var(--roi-paper); color: var(--roi-blue-900);
}
.woocommerce .quantity .qty:focus { outline: 2px solid var(--roi-amber-600); outline-offset: 2px; border-color: var(--roi-blue-300); }

/* tabs */
.woocommerce-tabs { margin-top: 2.5rem; }
.woocommerce-tabs ul.tabs { display: flex; gap: .4rem; list-style: none; margin: 0 0 -1px; padding: 0; }
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
  display: inline-block; padding: .65rem 1.2rem; font-weight: 600; font-size: .95rem; color: var(--roi-slate);
  background: var(--roi-mist); border: 1px solid var(--roi-blue-100); border-bottom: 0; border-radius: 6px 6px 0 0; text-decoration: none;
}
.woocommerce-tabs ul.tabs li.active a { background: var(--roi-paper); color: var(--roi-blue-900); position: relative; }
.woocommerce-tabs .panel {
  border: 1px solid var(--roi-blue-100); border-radius: 0 var(--radius-m) var(--radius-m) var(--radius-m);
  padding: 1.6rem 1.8rem; background: var(--roi-paper); max-width: none;
}
.woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce-tabs .panel h2 { font-size: 1.15rem; }

/* related products */
.related.products { margin-top: 3rem; border-top: 1px solid var(--roi-blue-100); padding-top: 2rem; }
.related.products > h2 { font-size: 1.35rem; margin: 0 0 .4rem; }

/* notices (added to cart etc.) */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  list-style: none; margin: 0 0 1.4rem; padding: .9rem 1.2rem; border-radius: var(--radius-m);
  border: 1px solid var(--roi-blue-100); border-left: 4px solid var(--roi-blue-500); background: var(--roi-blue-50); color: var(--roi-ink);
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between;
}
.woocommerce-error { border-left-color: #b3261e; background: #fdf1f0; }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { order: 2; }

/* pagination (search/archief/shop) */
.roi-pagination { margin-top: 2rem; }
.roi-pagination .nav-links, .woocommerce nav.woocommerce-pagination ul {
  display: flex; gap: .4rem; flex-wrap: wrap; list-style: none; margin: 2rem 0 0; padding: 0; border: 0;
}
/* NEW-9: these measured 40 x 42.3px, i.e. 2px under the WCAG 2.2 target floor.
   inline-flex + an explicit min box guarantees 44px regardless of font metrics. */
.roi-pagination .page-numbers, .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
  padding: .5rem .95rem; border: 1px solid var(--roi-blue-100); border-radius: 6px;
  color: var(--roi-blue-700); text-decoration: none; font-weight: 600; font-size: .95rem; background: var(--roi-paper);
}
.roi-pagination .page-numbers.current, .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--roi-blue-700); color: #fff; border-color: var(--roi-blue-700); }
.woocommerce nav.woocommerce-pagination ul li { margin: 0; border: 0; }

/* result count / ordering row on shop archives */
.woocommerce-result-count { color: var(--roi-slate); font-size: .95rem; margin: 0 0 .6rem; }
.woocommerce-ordering { float: right; margin: 0 0 1rem; }
.woocommerce-ordering select { padding: .5rem .8rem; border: 1px solid var(--roi-blue-100); border-radius: 6px; font: inherit; color: var(--roi-blue-900); background: var(--roi-paper); }

/* === Neutralize Woo core layout CSS (floats/percent widths) inside our grids === */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product { width: 100% !important; float: none !important; margin: 0 !important; clear: none !important; }
.single-product div.product .woocommerce-product-gallery,
.woocommerce-page div.product div.images,
.woocommerce div.product div.images { width: 100% !important; float: none !important; margin: 0 !important; }
.woocommerce-page div.product div.summary,
.woocommerce div.product div.summary { width: 100% !important; float: none !important; margin: 0 !important; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image a { display: block; }
.woocommerce-product-gallery__wrapper img { width: 100% !important; height: auto; }
.woocommerce ul.products { width: 100%; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
/* tabs cleanup vs Woo core */
.woocommerce-tabs ul.tabs::before, .woocommerce-tabs ul.tabs::after { display: none !important; }
.woocommerce-tabs ul.tabs li { border: 0 !important; background: none !important; margin: 0 !important; padding: 0 !important; }
.woocommerce-tabs ul.tabs li a::before, .woocommerce-tabs ul.tabs li a::after { display: none !important; }
.woocommerce-tabs ul.tabs { padding-left: 0 !important; }
.woocommerce-tabs .panel { margin-top: 0 !important; }
/* summary spacing: pull price + USP tighter */
.single-product .summary .price { margin: 0; }
.single-product .summary .roi-usp-list { margin: .2rem 0; }
/* related grid heading spacing */
.related.products ul.products { margin-top: 1rem; }

/* === Tabs: pixel-perfect (Woo core zeroes panel padding with a more specific selector) === */
.woocommerce div.product .woocommerce-tabs { margin-top: 2.5rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: .35rem; margin: 0; padding: 0; position: relative; z-index: 2; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-block; padding: .7rem 1.3rem; margin: 0; font-weight: 600; font-size: .95rem;
  color: var(--roi-slate); background: var(--roi-mist);
  border: 1px solid var(--roi-blue-100); border-bottom: 0; border-radius: 8px 8px 0 0; text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  background: var(--roi-paper); color: var(--roi-blue-900);
  box-shadow: 0 1px 0 0 var(--roi-paper); /* covers the panel top border below the active tab */
}
.woocommerce div.product .woocommerce-tabs .panel {
  margin: -1px 0 0; padding: 1.8rem 2rem 1.9rem;
  border: 1px solid var(--roi-blue-100); border-radius: 0 var(--radius-m) var(--radius-m) var(--radius-m);
  background: var(--roi-paper); max-width: none;
}
.woocommerce div.product .woocommerce-tabs .panel > *:first-child { margin-top: 0; }
.woocommerce div.product .woocommerce-tabs .panel > *:last-child { margin-bottom: 0; }
.woocommerce div.product .woocommerce-tabs .panel ul { margin: .8rem 0 0; padding-left: 1.2rem; }
.woocommerce div.product .woocommerce-tabs .panel li { margin: .35rem 0; color: var(--roi-ink); }

/* === Exam filter bar (/examens/) === */
.roi-examfilter { display: grid; gap: .9rem; margin: 0 0 1.6rem; }
.roi-examfilter__search {
  max-width: 420px; width: 100%; padding: .75rem 1rem; font: inherit;
  border: 1px solid var(--roi-blue-100); border-radius: 8px; background: var(--roi-paper); color: var(--roi-blue-900);
}
.roi-examfilter__search:focus { outline: 2px solid var(--roi-amber-600); outline-offset: 2px; border-color: var(--roi-blue-300); }
.roi-examfilter__chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.roi-examfilter__chip {
  padding: .45rem .95rem; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  color: var(--roi-blue-700); background: var(--roi-paper);
  border: 1px solid var(--roi-blue-100); border-radius: 999px; transition: all .12s ease;
}
.roi-examfilter__chip:hover { border-color: var(--roi-blue-300); }
.roi-examfilter__chip[aria-pressed="true"] { background: var(--roi-blue-700); color: #fff; border-color: var(--roi-blue-700); }
.roi-examfilter__count { color: var(--roi-slate); font-size: .92rem; margin: 0; }
.roi-examfilter__empty { padding: 1.4rem; border: 1px dashed var(--roi-blue-100); border-radius: var(--radius-m); color: var(--roi-slate); }
.woocommerce ul.products li.product.roi-hidden { display: none !important; }

/* === WCAG 2.2 fixes === */
.woocommerce form .show-password-input { width: 28px; height: 28px; min-width: 28px; min-height: 28px; }

/* === Forminator: brand styling (design-standards) === */
.forminator-ui.forminator-custom-form { font-family: inherit !important; }
.forminator-ui .forminator-label { font-weight: 600 !important; color: var(--roi-blue-900) !important; font-size: .95rem !important; }
/* NEW-6: the select2 dropdown chevron ships as #777771, the last off-palette
   colour on the primary lead-gen form. It is an icon on white, so it takes the
   interactive blue rather than the body ink. */
.forminator-ui .select2-selection__arrow,
.forminator-ui .forminator-icon-chevron-down,
.forminator-select2 + .select2 .select2-selection__arrow { color: var(--roi-blue-700) !important; }
.forminator-ui .forminator-input, .forminator-ui .forminator-textarea, .forminator-ui select.forminator-select2, .forminator-ui .forminator-select {
  border: 1px solid var(--roi-blue-100) !important; border-radius: var(--radius-s) !important;
  padding: .75rem 1rem !important; font: inherit !important; color: var(--roi-blue-900) !important; background: var(--roi-paper) !important;
}
.forminator-ui .forminator-input:focus, .forminator-ui .forminator-textarea:focus {
  outline: 2px solid var(--roi-amber-600) !important; outline-offset: 2px !important; border-color: var(--roi-blue-300) !important; box-shadow: none !important;
}
/* NEW-6: the radius standard is 6px (`--radius-s`); these were hardcoded 8px. */
.forminator-ui .forminator-button-submit {
  background: var(--roi-amber-500) !important; color: var(--roi-blue-900) !important;
  border-radius: var(--radius-s) !important; font-weight: 700 !important; padding: .8rem 1.5rem !important; border: 0 !important; font-family: inherit !important;
}
.forminator-ui .forminator-button-submit:hover { background: var(--roi-amber-600) !important; color: #fff !important; }
/* NEW-6: #b3261e is off-palette; `--roi-alert` is the documented error token. */
.forminator-ui .forminator-error-message { color: var(--roi-alert) !important; font-size: .88rem !important; }
.forminator-ui .forminator-input.forminator-has_error, .forminator-ui .forminator-textarea.forminator-has_error { border-color: var(--roi-alert) !important; }

/* ------------------------------------------------------------
   NEW-3: offerte intake radios (the M3 split-intake control)

   Forminator ships `.forminator-radio-bullet` as a 20x20px #EDEDED circle with
   a #777771 border and a 40px radius, and the label hit area was 20px tall.
   This is the first and most important qualifying question on the primary
   lead-gen form, and it was the only control on the page not wearing the theme.
   The real <input> is visually hidden but stays in the a11y tree and keeps
   focus (cf. D-2026-08-27-37): the bullet is decorative, the input is the
   control, and :focus-visible is mirrored onto the bullet.
   ------------------------------------------------------------ */
.forminator-ui .forminator-radio,
.forminator-ui .forminator-checkbox {
  display: inline-flex !important;
  align-items: center;
  gap: .65rem;
  min-height: 44px;               /* WCAG 2.2 target size */
  padding: .35rem .75rem .35rem 0;
  margin: 0 1.2rem .2rem 0 !important;
  cursor: pointer;
  color: var(--roi-ink) !important;
  line-height: 1.4;
}
.forminator-ui .forminator-radio input[type="radio"],
.forminator-ui .forminator-checkbox input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.forminator-ui .forminator-radio .forminator-radio-bullet,
.forminator-ui .forminator-checkbox .forminator-checkbox-box {
  /* Forminator sets its own width on the bullet; `flex: none` alone still let
     the flex line shrink it to 20px, so the basis is pinned explicitly. */
  flex: 0 0 24px;
  box-sizing: border-box;
  min-width: 24px;
  width: 24px !important;         /* min 24px per the work order */
  height: 24px !important;
  margin: 0 !important;
  border: 2px solid var(--roi-blue-300) !important;
  border-radius: 50% !important;
  background: var(--roi-paper) !important;
  position: relative;
  transition: border-color .12s ease, background-color .12s ease;
}
.forminator-ui .forminator-checkbox .forminator-checkbox-box { border-radius: var(--radius-s) !important; }
.forminator-ui .forminator-radio:hover .forminator-radio-bullet,
.forminator-ui .forminator-checkbox:hover .forminator-checkbox-box { border-color: var(--roi-blue-500) !important; }
/* Checked: navy ring with a navy dot. Status/selection is blue, never amber. */
.forminator-ui .forminator-radio input[type="radio"]:checked ~ .forminator-radio-bullet,
.forminator-ui .forminator-checkbox input[type="checkbox"]:checked ~ .forminator-checkbox-box {
  border-color: var(--roi-blue-700) !important;
  background: var(--roi-blue-700) !important;
}
.forminator-ui .forminator-radio input[type="radio"]:checked ~ .forminator-radio-bullet::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--roi-paper);
}
.forminator-ui .forminator-checkbox input[type="checkbox"]:checked ~ .forminator-checkbox-box::after {
  content: "";
  position: absolute;
  left: 7px; top: 3px;
  width: 6px; height: 11px;
  border: solid var(--roi-paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.forminator-ui .forminator-radio input[type="radio"]:focus-visible ~ .forminator-radio-bullet,
.forminator-ui .forminator-checkbox input[type="checkbox"]:focus-visible ~ .forminator-checkbox-box {
  outline: 2px solid var(--roi-amber-600);
  outline-offset: 2px;
}
.forminator-ui .forminator-radio .forminator-radio-label,
.forminator-ui .forminator-checkbox .forminator-checkbox-label {
  font-size: .98rem !important;
  color: var(--roi-ink) !important;
  margin: 0 !important;
}
.forminator-ui .forminator-response-message.forminator-success { background: var(--roi-blue-50) !important; border-left: 4px solid var(--roi-blue-500) !important; border-radius: var(--radius-m) !important; }

/* ============================================================
   WAVE 2 — marketing shell (Agent C)
   Implements docs/audit/visual-audit.md + cro-audit.md.
   ============================================================ */

/* --- P0-2 · Forminator select2 control ---------------------
   The audited "34x26px" element is the hidden native <select> behind
   select2 (inert, like Woo's country_to_state). The control a visitor
   actually operates is .select2-selection, which rendered at 40px with
   no theme border. Both are corrected here. */
.forminator-ui .select2-container,
.forminator-ui .select2.select2-container { width: 100% !important; }
.forminator-ui .select2-container .select2-selection--single {
  min-height: 48px;
  height: auto;
  display: flex;
  align-items: center;
  padding: .35rem .9rem;
  border: 1px solid var(--roi-blue-100) !important;
  border-radius: var(--radius-s) !important;
  background: var(--roi-paper) !important;
}
.forminator-ui .select2-container--open .select2-selection--single,
.forminator-ui .select2-container .select2-selection--single:focus {
  border-color: var(--roi-blue-300) !important;
  outline: 2px solid var(--roi-amber-600);
  outline-offset: 1px;
}
/* WAVE 8: this was `padding: 0`, and Forminator's own
   `select.forminator-select2 + .forminator-select .selection span[role=combobox]
   .select2-selection__rendered` rule (far higher specificity) also forces the
   CONTROL's padding to 0. Between them the selected text and the placeholder
   sat 1px from the border, while every other field on the form insets its
   text by 16px. The inset is applied to the rendered text itself, which is
   the element Forminator does not reset away. */
.forminator-ui .select2-selection__rendered {
  padding: 0 0 0 1rem !important;
  line-height: 1.4 !important;
  color: var(--roi-blue-900) !important;
}
.forminator-ui .select2-selection__placeholder { color: var(--roi-slate) !important; }
.forminator-ui .select2-selection__arrow { height: 46px !important; right: .6rem !important; }
/* The open dropdown panel was attempted here in wave 2 and never applied:
   Forminator passes a `dropdownCssClass`, so its panel is
   `.forminator-select-dropdown`, not `.select2-dropdown`, and the highlight
   rule below set a navy background while leaving the text black (1.9:1).
   Both are superseded by the WAVE 8 block at the end of this file. */

/* The hidden native select must not be a stray 34x26 hit target. */
.forminator-ui select.forminator-select2 { position: absolute; opacity: 0; pointer-events: none; }

/* --- V-15 · Required markers use the documented alert token --- */
.roi-form .required,
.forminator-ui .forminator-required,
.forminator-ui .forminator-label .forminator-required { color: var(--roi-alert) !important; }
.forminator-ui .forminator-error-message { color: var(--roi-alert) !important; }
.forminator-ui .forminator-input.forminator-has_error,
.forminator-ui .forminator-textarea.forminator-has_error { border-color: var(--roi-alert) !important; }

/* --- V-14 · Breadcrumbs on light surfaces --------------------
   blue-300 on white is 2.38:1, the one usage the standard forbids.
   The navy page-hero keeps blue-300 (legal on navy). */
.breadcrumbs--light { color: var(--roi-slate); }
.breadcrumbs--light a { color: var(--roi-slate); }
.breadcrumbs--light a:hover { color: var(--roi-blue-700); }

/* --- V-44 · Desktop nav links reach 44px --------------------- */
@media (min-width: 900px) {
  .site-nav > ul > li > a { min-height: 44px; display: flex; align-items: center; }
}

/* ============================================================
   HEADER: phone, login, search, CTA  (H6, H7, H8, M6, V-30/31/32/86)
   ============================================================ */
.header-bar { gap: .5rem; }
.header-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
}
/* Icon buttons (phone, login, search) */
.header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .55rem;
  border: 1px solid var(--roi-blue-100);
  border-radius: var(--radius-s);
  background: var(--roi-paper);
  color: var(--roi-blue-800);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.header-icon:hover { border-color: var(--roi-blue-300); background: var(--roi-blue-50); color: var(--roi-blue-700); }
.header-icon svg { width: 18px; height: 18px; flex: none; }
.header-icon svg path,
.header-icon svg circle,
.header-icon svg rect { stroke: var(--roi-blue-500); }

/* Desktop phone block: number + opening hours (H6, L7) */
.header-phone { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.2; padding: .25rem .6rem; }
.header-phone .header-phone__num { display: flex; align-items: center; gap: .4rem; font-variant-numeric: tabular-nums; }
.header-phone .header-phone__hours {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .72rem;
  color: var(--roi-slate);
  padding-left: 1.5rem;
}
/* Compact variants shown only on small screens */
.header-icon--compact { display: none; }
@media (max-width: 899px) {
  .header-phone { display: none; }
  .header-icon--compact { display: inline-flex; }
  .header-actions .header-icon--login span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 900px) {
  .header-icon--compact { display: none; }
}
/* Keep the amber CTA in the mobile bar (V-30) */
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 .9rem;
  border-radius: var(--radius-s);
  background: var(--roi-amber-500);
  color: var(--roi-blue-900);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  white-space: nowrap;
}
.header-cta:hover { background: #f0a54a; color: var(--roi-blue-900); }
@media (max-width: 560px) {
  /* Phone button carries the action when there is no room for a label */
  .header-cta { display: none; }
}

/* Header search (M6): icon expands an input, keyboard accessible */
.header-search { position: relative; }
.header-search__panel {
  display: none;
  position: absolute;
  right: 0;
  left: auto;
  top: calc(100% + .5rem);
  z-index: 120;
  background: var(--roi-paper);
  border: 1px solid var(--roi-blue-100);
  border-radius: var(--radius-m);
  box-shadow: 0 14px 30px rgba(20,31,52,.14);
  padding: .8rem;
  width: min(380px, calc(100vw - var(--space) * 2));
  max-width: calc(100vw - var(--space) * 2);
}

/* NEW-7: at 390px the search icon sits ~77px from the right edge, so a panel
   anchored to that icon and sized at `92vw` ran off the LEFT of the viewport
   (measured x = -77): the input's left edge and part of its placeholder were
   unreachable. No width clamp can fix this while the panel is positioned
   against a 44px icon, because its right edge is already inset from the
   viewport. `scrollWidth` never caught it: leftward overflow does not grow the
   scroll width, which is why the wave-2 overflow assertion passed.

   Below the nav breakpoint the panel is therefore anchored to the header row
   instead of to the icon, spanning the content width like the mobile nav panel
   it sits beside. Above it, the icon anchoring is correct and is kept. */
@media (max-width: 1149px) {
  .header-search { position: static; }
  .header-search__panel {
    left: var(--space);
    right: var(--space);
    width: auto;
    max-width: none;
  }
}
.header-search.is-open .header-search__panel { display: block; }
.header-search__panel form { display: flex; gap: .5rem; }
.header-search__panel input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  font: inherit;
  font-size: .95rem;
  padding: .5rem .8rem;
  border: 1px solid var(--roi-blue-100);
  border-radius: var(--radius-s);
  background: var(--roi-paper);
  color: var(--roi-ink);
}
.header-search__panel input[type="search"]:focus {
  outline: 2px solid var(--roi-amber-600);
  outline-offset: 1px;
  border-color: var(--roi-blue-300);
}
.header-search__panel button {
  min-height: 44px;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--radius-s);
  background: var(--roi-blue-700);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  cursor: pointer;
}
.header-search__panel button:hover { background: var(--roi-blue-500); }

/* Nav breakpoint moves to 900px so tablets keep the full nav (V-31) */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; position: static; }
  .site-nav ul { display: flex; align-items: center; gap: .1rem; }
  .site-nav a { padding: .55rem .6rem; font-size: .92rem; }
  .site-nav .menu-cta { display: none; } /* the header CTA carries this */
}
@media (max-width: 899px) {
  .site-nav.is-open { display: block; }
}
/* Mobile menu: opaque panel + scrim so the hero CTA cannot show through (V-32) */
.site-nav.is-open {
  background: var(--roi-paper);
  box-shadow: 0 18px 30px rgba(20,31,52,.18);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--header-h);
  z-index: 90;
  background: rgba(20,31,52,.45);
}
body.nav-open .nav-scrim { display: block; }
body.nav-open { overflow: hidden; }
/* Account links sit at the top of the mobile menu, visually separated (H8) */
.site-nav .nav-account {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .2rem 0 .8rem;
  margin-bottom: .6rem;
  border-bottom: 1px solid var(--roi-blue-100);
}
.site-nav .nav-account a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .5rem .8rem;
  border: 1px solid var(--roi-blue-100);
  border-radius: var(--radius-s);
  font-size: .92rem;
}
.site-nav .nav-account svg { width: 18px; height: 18px; }
.site-nav .nav-account svg path, .site-nav .nav-account svg circle { stroke: var(--roi-blue-500); }
@media (min-width: 900px) { .site-nav .nav-account { display: none; } }

/* Sticky header slims and gains a border when stuck (V-86) */
.site-header.is-stuck {
  box-shadow: 0 2px 14px rgba(20,31,52,.10);
  border-bottom-color: var(--roi-blue-300);
}
.site-header.is-stuck .brand img { width: 36px; height: 36px; }
.site-header.is-stuck .brand-name small { display: none; }

/* ============================================================
   STEPPER — the route-line as a real diagram (V-45/46/47/48)
   2px line, rounded caps, filled junction dots, labelled.
   Amber only on a genuine action step.
   ============================================================ */
.roi-stepper {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: roi-step;
}
.roi-stepper > li {
  position: relative;
  padding: 0 0 1.9rem 2.6rem;
}
/* the connecting line */
.roi-stepper > li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 22px;
  bottom: -2px;
  width: 2px;
  border-radius: 2px;
  background: var(--roi-blue-300);
}
.roi-stepper > li:last-child { padding-bottom: 0; }
.roi-stepper > li:last-child::before { display: none; }
/* filled junction dot */
.roi-stepper > li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--roi-blue-300);
  border: 4px solid var(--roi-paper);
  box-shadow: 0 0 0 2px var(--roi-blue-300);
}
/* an action step (and only an action step) is amber */
.roi-stepper > li.is-action::after {
  background: var(--roi-amber-500);
  box-shadow: 0 0 0 2px var(--roi-amber-500);
}
.roi-stepper__label {
  display: block;
  font-family: var(--font-head);
  font-stretch: 115%;
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--roi-blue-700);
  margin-bottom: .15rem;
}
.roi-stepper__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--roi-blue-900);
  margin: 0 0 .25rem;
  line-height: 1.25;
}
.roi-stepper p { margin: 0; color: var(--roi-slate); font-size: .95rem; max-width: 60ch; }
.roi-stepper a { font-weight: 600; }
/* on tinted/navy surfaces */
.section--navy .roi-stepper > li::after { border-color: var(--roi-blue-800); }
.section--navy .roi-stepper__title { color: #fff; }
.section--navy .roi-stepper p { color: var(--roi-blue-100); }
.section--navy .roi-stepper__label { color: var(--roi-blue-300); }
.section--tint .roi-stepper > li::after { border-color: var(--roi-blue-50); }

/* Horizontal variant for wide surfaces (homepage traject, examens) */
@media (min-width: 900px) {
  .roi-stepper--row { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .roi-stepper--row > li { padding: 2.6rem 1.1rem 0 0; }
  .roi-stepper--row > li::before {
    left: 18px;
    right: -1.1rem;
    top: 8px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .roi-stepper--row > li:last-child::before { display: none; }
  .roi-stepper--row > li::after { top: 0; left: 0; }
  .roi-stepper--row p { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) {
  .roi-stepper > li, .roi-stepper > li::before, .roi-stepper > li::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   RIGHT RAIL for prose templates (V-18, V-19)
   Kills the 760px-column-in-1440px-void problem.
   ============================================================ */
.roi-layout {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.roi-layout > * { min-width: 0; }
@media (min-width: 1000px) {
  .roi-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 3rem; }
}
.roi-rail { display: grid; gap: 1.1rem; align-content: start; }
@media (min-width: 1000px) {
  .roi-rail--sticky { position: sticky; top: calc(var(--header-h) + 1.2rem); }
}
.roi-rail .card { padding: 1.2rem; }
.roi-rail .card h3 { font-size: 1.05rem; }
.roi-rail .btn { width: 100%; }
/* Rail offerte card */
.rail-cta { background: var(--roi-blue-50); border-color: var(--roi-blue-100); }
.rail-cta .btn + .btn { margin-top: .5rem; }
.rail-phone {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--roi-blue-800);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.rail-phone svg { width: 18px; height: 18px; }
.rail-phone svg path { stroke: var(--roi-blue-500); }

/* Prose inside the layout keeps its measure but no longer strands the page */
.roi-layout .entry-content { max-width: 68ch; }

/* ============================================================
   CPT single: double CTA, mobile hoist, sticky bar (H5, V-29)
   ============================================================ */
.course-actions { display: grid; gap: .6rem; margin: 1.2rem 0 0; }
@media (min-width: 480px) {
  .course-actions { grid-template-columns: 1fr 1fr; }
}
.course-actions .btn { width: 100%; }
.course-actions--inline { margin: 1.8rem 0; max-width: 560px; }

/* Startdata block at the top of the spec table */
.spec-start {
  border: 1px solid var(--roi-blue-100);
  border-bottom: 0;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  background: var(--roi-blue-50);
  padding: .9rem 1rem;
}
.spec-start + .spec-table { border-radius: 0 0 var(--radius-m) var(--radius-m); border-top: 0; }
.spec-start__label {
  display: block;
  font-family: var(--font-head);
  font-stretch: 115%;
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--roi-blue-700);
  margin-bottom: .3rem;
}
.spec-start ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.spec-start li { display: flex; align-items: center; gap: .5rem; font-variant-numeric: tabular-nums; }
.spec-start p { margin: 0; font-size: .93rem; color: var(--roi-slate); }

/* V-61/62/63 · spec-table rhythm: top border, mono values, calmer ratio */
.spec-table { border-top: 1px solid var(--roi-blue-100); }
.spec-table th { width: 40%; }
.spec-table td { font-variant-numeric: tabular-nums; }
.spec-table .chip { white-space: normal; }
.spec-table .spec-note { display: block; margin-top: .3rem; font-size: .88rem; color: var(--roi-slate); }

/* Sticky mobile CTA bar on CPT singles (H5b) */
.course-stickybar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 95;
  display: flex;
  gap: .5rem;
  padding: .6rem var(--space) calc(.6rem + env(safe-area-inset-bottom));
  background: var(--roi-paper);
  border-top: 1px solid var(--roi-blue-100);
  box-shadow: 0 -6px 20px rgba(20,31,52,.10);
}
.course-stickybar .btn { flex: 1 1 auto; min-height: 48px; }
.course-stickybar .btn--phone { flex: 0 0 auto; padding-inline: 1rem; }
.course-stickybar .btn--phone svg { width: 20px; height: 20px; }
.course-stickybar .btn--phone svg path { stroke: currentColor; }
@media (min-width: 1024px) { .course-stickybar { display: none; } }
/* Content clearance so the bar never covers the last element */
@media (max-width: 1023px) {
  body.has-stickybar .site-footer { padding-bottom: 76px; }
}

/* ============================================================
   Token discipline sweep (V-12, V-50, V-51, V-59, V-53/54/60)
   ============================================================ */
/* V-12: decorative chips are informational, not conversion */
.chip--feature {
  background: var(--roi-blue-100);
  border-color: var(--roi-blue-100);
  color: var(--roi-blue-700);
}
/* V-59: no shadows on FAQ/search cards */
.roi-faq, .card { box-shadow: none; }
/* V-53/54: real link affordance on cards */
.card__more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .2rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .92rem;
  color: var(--roi-blue-700);
  text-decoration: none;
}
.card:hover .card__more { color: var(--roi-blue-500); }
.card__more::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.card:hover .card__more::after { transform: rotate(-45deg) translate(2px, 2px); }
/* Card action row (catalog per-card CTAs, M5a) */
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .8rem;
  position: relative;
  z-index: 1;
}
.card-actions .btn {
  min-height: 44px;
  padding: .5rem 1rem;
  font-size: .92rem;
}
/* V-50: signal dots on every card/aside eyebrow */
.card-eyebrow, .contact-details dt { display: flex; align-items: center; gap: .5rem; }
.card-eyebrow .dot, .contact-details dt .dot { margin-right: 0; flex: none; }
/* V-51: one bullet system */
.entry-content ul:not(.roi-plain):not(.spec-start ul) { list-style: none; padding-left: 1.4rem; }
.entry-content ul:not(.roi-plain):not(.spec-start ul) > li { position: relative; }
.entry-content ul:not(.roi-plain):not(.spec-start ul) > li::before {
  content: "";
  position: absolute;
  left: -1.15rem;
  top: .62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--roi-blue-300);
}

/* V-81: the ILT link must not break mid-phrase */
.authority-item a { white-space: nowrap; }
@media (max-width: 420px) { .authority-item a { white-space: normal; } }

/* V-27: page-hero images get a real minimum height, never a sliver */
.page-hero--media { min-height: 260px; display: flex; align-items: center; }
.page-hero--media > .wrap { width: 100%; }
@media (min-width: 1000px) { .page-hero--media { min-height: 320px; } }

/* V-19: kill the dead gap before the footer */
.site-footer { margin-top: 0; }
main > .section:last-child { padding-bottom: var(--section-pad); }

/* ============================================================
   404 (V-28, V-110, V-111)
   ============================================================ */
.error-404 .roi-layout { align-items: start; }
.error-404 .btn-row .btn { min-width: 200px; justify-content: flex-start; }

/* ============================================================
   In-content search form  (NEW-2, V-87, V-88)

   Used by 404.php AND search.php. These rules were scoped `.error-404 ...`,
   so on `/?s=...` nothing matched and both controls rendered as raw UA widgets
   (153x21px input, 60x21px grey button) directly above themed result cards.
   The submit button was never styled on either page.
   Scope is therefore the component, never the page that happens to host it.
   ============================================================ */
.roi-inline-search { max-width: 520px; margin: 0 0 1.6rem; }
.roi-inline-search form { display: flex; gap: .5rem; align-items: stretch; }
.roi-inline-search input[type="search"] {
  flex: 1 1 auto; min-width: 0; min-height: 48px; font: inherit;
  padding: .6rem .9rem; border: 1px solid var(--roi-blue-100);
  border-radius: var(--radius-s); background: var(--roi-paper);
  color: var(--roi-ink);
}
.roi-inline-search input[type="search"]::placeholder { color: var(--roi-slate); }
.roi-inline-search input:focus { outline: 2px solid var(--roi-amber-600); outline-offset: 1px; border-color: var(--roi-blue-300); }
/* Mirrors `.header-search__panel button`: navy, never amber. Searching is
   navigation, not a conversion moment (D-2026-08-27-01). */
.roi-inline-search button[type="submit"] {
  flex: none; min-height: 48px; padding: 0 1.3rem; border: 0;
  border-radius: var(--radius-s); background: var(--roi-blue-700); color: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  cursor: pointer;
}
.roi-inline-search button[type="submit"]:hover { background: var(--roi-blue-500); }
.roi-inline-search button[type="submit"]:focus-visible { outline: 2px solid var(--roi-amber-600); outline-offset: 2px; }
@media (max-width: 420px) {
  /* Below ~420px the label and a usable field cannot share a 44px row. */
  .roi-inline-search form { flex-wrap: wrap; }
  .roi-inline-search button[type="submit"] { width: 100%; }
}

/* Footer search field (Informatie column) */
.footer-search { margin-top: .8rem; }
.footer-search form { display: flex; gap: .4rem; }
.footer-search input[type="search"] {
  flex: 1 1 auto; min-width: 0; min-height: 44px; font: inherit; font-size: .9rem;
  padding: .5rem .7rem; border: 1px solid rgba(142,169,217,.4);
  border-radius: var(--radius-s); background: rgba(255,255,255,.06); color: #fff;
}
.footer-search input::placeholder { color: var(--roi-blue-300); }
.footer-search input:focus { outline: 2px solid var(--roi-amber-500); outline-offset: 1px; }
.footer-search button {
  min-height: 44px; padding: 0 .8rem; border: 1px solid rgba(142,169,217,.4);
  border-radius: var(--radius-s); background: rgba(142,169,217,.14); color: #fff;
  font-family: var(--font-head); font-weight: 600; cursor: pointer; font-size: .9rem;
}
.footer-search button:hover { background: rgba(142,169,217,.26); }

/* ============================================================
   Footer rebalance (V-25, V-89)
   ============================================================ */
@media (min-width: 800px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1.1fr 1.1fr; }
}
.footer-contact address { font-style: normal; margin: 0 0 .6rem; }
.footer-phone {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff !important;
  font-variant-numeric: tabular-nums;
}
.footer-phone svg { width: 18px; height: 18px; }
.footer-phone svg path { stroke: var(--roi-blue-300); }
.footer-hours { font-size: .85rem; color: var(--roi-blue-300); margin: .2rem 0 .7rem; }
/* legal links move to the bottom bar */
.footer-legal { align-items: center; }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; list-style: none; margin: 0; padding: 0; }
.footer-legal li { margin: 0; }
.footer-legal a { color: var(--roi-blue-300); font-size: .85rem; }
.footer-legal a:hover { color: #fff; }

/* ============================================================
   Cookie banner as a real overlay (V-96, V-97, L6)
   ============================================================ */
.consent-banner {
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  /* Overlay exception to the no-shadow rule, documented in design-standards.md */
  box-shadow: 0 -10px 40px rgba(20,31,52,.45);
  max-width: calc(var(--content-max) + 2 * var(--space));
  margin-inline: auto;
}
.consent-banner.is-visible { display: block; }
/* AA on navy: blue-100 on blue-900 is 12.9:1 */
.consent-inner p { color: var(--roi-blue-100); }
.consent-inner a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--roi-amber-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.consent-inner a:hover { color: var(--roi-amber-500); }
/* L6: never cover form fields — reserve space while visible */
body.consent-visible { padding-bottom: var(--roi-consent-h, 0px); }

/* ============================================================
   Contact map: consent-gated click-to-load (V-90)
   ============================================================ */
.roi-map {
  border: 1px solid var(--roi-blue-100);
  border-radius: var(--radius-m);
  overflow: hidden;
  margin-top: 1.4rem;
  background: var(--roi-blue-50);
}
.roi-map__body { padding: 1.2rem; display: grid; gap: .7rem; }
.roi-map__body address { font-style: normal; margin: 0; }
.roi-map__note { font-size: .88rem; color: var(--roi-slate); margin: 0; }
.roi-map__frame { aspect-ratio: 16 / 10; width: 100%; border: 0; display: block; }
.roi-map__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ============================================================
   FAQ page: grouping, anchors, open-all (V-94, V-116)
   ============================================================ */
.faq-group { margin: 0 0 2.4rem; }
.faq-group > h2 { font-size: 1.35rem; margin-bottom: .9rem; }
.faq-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1.4rem; }
.faq-toolbar button {
  min-height: 44px;
  padding: .5rem 1.1rem;
  border: 1px solid var(--roi-blue-700);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--roi-blue-700);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
}
.faq-toolbar button:hover { background: var(--roi-blue-50); }
.roi-faq { scroll-margin-top: calc(var(--header-h) + 1rem); }
.roi-faq summary { min-height: 44px; display: flex; align-items: center; }

/* ============================================================
   Success affirmation on /bedankt/ (V-93)
   ============================================================ */
.roi-success {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border: 1px solid var(--roi-blue-100);
  border-left: 4px solid var(--roi-blue-500);
  border-radius: var(--radius-m);
  background: var(--roi-blue-50);
  padding: 1.3rem 1.4rem;
  margin: 0 0 2rem;
}
.roi-success__mark {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--roi-blue-700);
  display: grid;
  place-items: center;
}
.roi-success__mark svg { width: 24px; height: 24px; }
.roi-success__mark svg path { stroke: #fff; }
.roi-success h2 { margin: 0 0 .3rem; font-size: 1.25rem; }
.roi-success p { margin: 0; color: var(--roi-slate); }

/* ============================================================
   Forms: "Wat gebeurt er daarna?" block (M4)
   ============================================================ */
.form-next {
  border: 1px solid var(--roi-blue-100);
  border-radius: var(--radius-m);
  background: var(--roi-blue-50);
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
}
.form-next h3 {
  font-size: 1rem;
  margin: 0 0 .35rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.form-next p { margin: 0; font-size: .93rem; color: var(--roi-slate); }
.form-next p + p { margin-top: .4rem; }

/* ============================================================
   Orientation line on /examens/ (M1a)
   ============================================================ */
.roi-orient {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.4rem;
}
.roi-orient__label { font-family: var(--font-head); font-weight: 600; color: var(--roi-blue-900); }
.roi-orient button {
  min-height: 44px;
  padding: .45rem 1rem;
  border: 1px solid var(--roi-blue-100);
  border-radius: var(--radius-s);
  background: var(--roi-paper);
  color: var(--roi-blue-700);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
}
.roi-orient button:hover { border-color: var(--roi-blue-300); background: var(--roi-blue-50); }

/* Catalog filter chips (M5b) — reuse of the /examens/ mechanism */
.roi-catfilter { display: grid; gap: .8rem; margin: 0 0 1.6rem; }
.roi-catfilter__chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.roi-catfilter__chip {
  min-height: 44px;
  padding: .45rem 1rem;
  font: inherit;
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--roi-blue-700);
  background: var(--roi-paper);
  border: 1px solid var(--roi-blue-100);
  border-radius: var(--radius-s);
  transition: border-color .12s ease, background-color .12s ease;
}
.roi-catfilter__chip:hover { border-color: var(--roi-blue-300); }
.roi-catfilter__chip[aria-pressed="true"] { background: var(--roi-blue-700); color: #fff; border-color: var(--roi-blue-700); }
.roi-catfilter__count { color: var(--roi-slate); font-size: .92rem; margin: 0; }
.card.roi-hidden { display: none !important; }

/* Exam filter chips: 6px radius, not pills (V-95 already fixed by B; keep) */
.roi-examfilter__chip { border-radius: var(--radius-s); min-height: 44px; }

/* ============================================================
   Homepage above-the-fold (M10, V-33, V-34, V-35)
   ============================================================ */
.hero-inner { padding-block: clamp(2.2rem, 5.5vw, 4.4rem); }
.hero .btn-row .btn { min-width: 220px; }
@media (max-width: 480px) {
  .hero .btn-row { display: grid; gap: .6rem; }
  .hero .btn-row .btn { width: 100%; min-width: 0; }
  /* V-34: no orphan trust chip */
  .hero-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .hero-facts .chip { text-align: center; }
  .hero-facts .chip:nth-child(3) { grid-column: 1 / -1; }
}
.hero-third {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1rem;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: underline;
  text-decoration-color: var(--roi-amber-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  min-height: 44px;
}
.hero-third:hover { color: var(--roi-amber-500); }
/* V-35: router cards go 3 -> 1 at tablet, never 2+orphan */
@media (min-width: 640px) and (max-width: 899px) {
  .card-grid--router { grid-template-columns: 1fr; }
}
/* Wave 7: with the exam route hidden by the visibility toggle there are two
   router cards, not three. Left on the 3-column track they would sit in the
   first two columns with a dead third, which is the same orphan problem V-35
   fixed at tablet. Two columns, so the pair fills the row. */
@media (min-width: 1000px) {
  .card-grid--router.card-grid--router-2 { grid-template-columns: repeat(2, 1fr); }
}
/* V-33: lift the duotone on mobile so the photo is not invisible */
@media (max-width: 720px) {
  .hero--media .hero-media::after {
    background:
      linear-gradient(180deg, rgba(20,31,52,.86) 0%, rgba(27,44,75,.72) 100%),
      linear-gradient(0deg, rgba(142,169,217,.15), rgba(142,169,217,.15));
  }
  .hero--media .hero-media img { filter: grayscale(1) contrast(1.12) brightness(1.05); }
}
/* V-52: one duotone treatment everywhere */
.card-media img, .hero-media img { filter: grayscale(1) contrast(1.05) brightness(.92); }

/* V-23/24: traject + authority band bottom rhythm */
.authority-grid { align-items: start; }
.authority-item { padding-bottom: .2rem; }

/* V-22: hero-to-content gap */
.page-hero + main > .section:first-child { padding-top: clamp(2.2rem, 4.5vw, 3.2rem); }

/* V-78: consistent search excerpt truncation */
.card p.roi-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* V-101: top-of-hero rhythm */
.page-hero .breadcrumbs { margin-bottom: 1.4rem; }
.page-hero .eyebrow { margin-bottom: .7rem; }

/* V-102: opleiding H2s get a rule so the stack is not monotonous */
.entry-content > h2 {
  padding-top: .5em;
  border-top: 1px solid var(--roi-blue-100);
}
.entry-content > h2:first-child { border-top: 0; padding-top: 0; }

/* V-82: keep Dutch terms together */
.nobr { white-space: nowrap; }

/* --- Course single layout (V-29) ---------------------------
   The aside is first in source order so phones get the specs, start dates
   and both CTAs directly under the hero. From 900px the grid restores the
   prose-left / rail-right reading order. */
.course-layout .course-aside { order: -1; }
@media (min-width: 900px) {
  .course-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 3rem; }
  .course-layout .course-aside { order: 2; position: sticky; top: calc(var(--header-h) + 1.2rem); }
  .course-layout .course-body { order: 1; }
}
.course-aside .spec-table { width: 100%; }
.mt-1 { margin-top: 1rem; }

/* CTA pair: labels are long Dutch phrases, so allow them to breathe rather
   than wrap raggedly inside a fixed-width button. */
.course-actions .btn {
  padding-inline: .9rem;
  font-size: .95rem;
  line-height: 1.25;
  text-align: center;
}
@media (min-width: 480px) and (max-width: 1199px) {
  .course-layout .course-actions { grid-template-columns: 1fr; }
}

/* --- Header bar fit at small widths -------------------------
   The brand block (mark + wordmark + tagline) is ~206px and the action
   cluster ~199px, which overflows a 358px content box at 390px. The brand
   is the element that can yield: the mark alone still identifies the site,
   and the wordmark returns as soon as there is room. */
.header-bar { flex-wrap: nowrap; }
.brand { min-width: 0; flex: 0 1 auto; }
.header-actions { flex: 0 0 auto; }
@media (max-width: 560px) {
  .brand-name { font-size: 1rem; }
  .brand-name small { display: none; }
}
@media (max-width: 460px) {
  /* Mark only: the wordmark is restored to assistive tech by the aria-label
     already on the brand link. */
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .header-actions { gap: .25rem; }
  .header-icon, .nav-toggle { min-width: 42px; width: 42px; }
}

/* --- Header fit on desktop ---------------------------------
   Nav (~626px) plus the action cluster (~499px) left the brand crushed to
   under 100px at 1440, so the wordmark collided with the first menu item.
   The brand gets a floor, the cluster gives up the widest thing it carries
   (the two-line phone block) until there is genuinely room for it, and the
   nav is allowed to shrink its gutters before anything else breaks. */
.brand { flex: 0 0 auto; }
.site-nav { flex: 1 1 auto; min-width: 0; }
@media (min-width: 900px) {
  .site-nav > ul { justify-content: flex-end; flex-wrap: nowrap; }
  .site-nav a { white-space: nowrap; }
  /* Below 1200px the phone collapses to its icon; the number stays one tap away. */
  .header-phone { display: none; }
  .header-icon--compact { display: inline-flex; }
}
@media (min-width: 1200px) {
  .header-phone { display: inline-flex; }
  .header-icon--compact { display: none; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  /* Reclaim the last of the gutter before the brand starts losing its name. */
  .site-nav a { padding-inline: .4rem; font-size: .88rem; }
  .header-cta { display: none; }
}

/* --- Hero + footer route-lines (V-45) ----------------------
   These are the one place the route-line stays ornamental, because there is
   no sequence to describe. They are therefore made quieter and regular
   rather than pretending to be a diagram: even spacing, uniform blue dots,
   no amber (amber on a decorative dot is exactly the dilution V-12 flags). */
.hero-route i:nth-child(1) { left: 20%; }
.hero-route i:nth-child(2) { left: 40%; }
.hero-route i:nth-child(3) { left: 60%; background: var(--roi-blue-300); }
.hero-route i:nth-child(4) { left: 80%; }
.footer-route i:nth-child(2) { background: var(--roi-blue-300); }

/* --- Header: stop the nav from being compressed below its content ---
   `.site-nav { flex: 1 1 auto }` let the flex line shrink the <ul> below its
   min-content width, and with nowrap the first items then rendered to the
   LEFT of their own box, on top of the brand wordmark. The nav must never
   shrink; the row scales by dropping the phone block and CTA instead, which
   the breakpoints above already do. */
.site-nav { flex: 0 1 auto; }
@media (min-width: 900px) {
  .site-nav { flex: 0 0 auto; }
  .site-nav > ul { flex-wrap: nowrap; justify-content: flex-start; }
  .header-bar { gap: .75rem; }
  /* The brand yields its tagline before the nav gives up any width. */
  .brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .brand-name { overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .brand-name small { display: none; }
}

/* The brand may compress, but never below the point where the wordmark
   disappears entirely: the mark plus the name is the site's identity. There
   is room for it once the phone block and CTA drop at their breakpoints. */
@media (min-width: 900px) {
  .brand { flex: 0 0 auto; overflow: visible; }
  .brand-name { overflow: visible; text-overflow: clip; }
}
@media (min-width: 900px) and (max-width: 1379px) {
  /* Give the row its width back by dropping the two widest optional items. */
  .header-phone { display: none; }
  .header-icon--compact { display: inline-flex; }
}
@media (min-width: 1380px) {
  .header-phone { display: inline-flex; }
  .header-icon--compact { display: none; }
  .brand-name small { display: block; }
}

/* --- Header row: make the content actually fit -------------
   Brand (250) + nav (690) + actions (499) = 1439px of content in a 1280px
   wrap, so the row overflowed the page at every desktop width. The nav is
   the widest block and its 9 items are all needed, so the gutters and type
   come down, and the action cluster keeps only what earns its width. */
@media (min-width: 900px) {
  .site-nav a { padding: .55rem .45rem; font-size: .9rem; }
  .header-actions { gap: .3rem; }
  .header-icon { padding-inline: .45rem; }
  .header-icon--login span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .header-cta { padding-inline: .75rem; font-size: .88rem; }
}
@media (min-width: 1500px) {
  /* Only at genuinely wide viewports is there room for the full cluster. */
  .site-nav a { padding-inline: .7rem; font-size: .92rem; }
  .header-icon--login span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; }
}

/* The nav alone is ~640px, so below ~1150px the row cannot hold brand + nav
   + any actions. Keep the hamburger down to 1150px instead of 900px: a
   tablet still gets the full menu behind one tap plus the phone and CTA,
   which is what V-30 actually asks for. */
@media (max-width: 1149px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; }
  .site-nav.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; }
  .site-nav .nav-account { display: flex; }
  .site-nav > ul { display: block; }
  .site-nav a { padding: .75rem .4rem; font-size: 1rem; }
  .header-phone { display: none; }
  .header-icon--compact { display: inline-flex; }
  .header-cta { display: inline-flex; }
}
@media (min-width: 1150px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; position: static; }
  .site-nav > ul { display: flex; }
}
/* Above 1500px the wrap is capped at 1280px, so the extra viewport width is
   margin, not usable row width. Keep the compact treatment. */
@media (min-width: 1500px) {
  .site-nav a { padding-inline: .5rem; font-size: .9rem; }
  .header-icon--login span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* --- Mobile menu: one amber CTA, and the toggle stays on screen ---
   V-32 counted two simultaneous amber "Offerte aanvragen" buttons as the
   defect. The header bar already carries one, so the duplicate inside the
   open panel is suppressed. */
@media (max-width: 1149px) {
  .site-nav.is-open .menu-cta { display: none; }
  /* The bar must not push the toggle past the right edge. */
  .header-bar { padding-right: max(var(--space), env(safe-area-inset-right)); }
  .header-actions { flex-wrap: nowrap; }
}
@media (max-width: 560px) {
  /* At phone widths the CTA label is what has to give, not the controls. */
  .header-cta { display: none; }
}

/* The menu CTA is the fallback for exactly the widths where the header bar
   has no room for one. Below 560px the header CTA is hidden, so the menu
   must carry it; between 560 and 1149px the header has it and the menu
   must not duplicate it. */
@media (max-width: 560px) {
  .site-nav.is-open .menu-cta { display: block; }
}

/* The login label is hidden visually, never from assistive technology:
   removing it with display:none stripped the link's accessible name
   (axe: link-name, serious). */
.header-icon--login { position: relative; }

/* The native <select> behind select2 is inert decoration: keep it out of the
   hit-testing and target-size surface entirely (it measured 34x26). */
.forminator-ui select.forminator-select2 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

/* ============================================================
   WAVE 8: the select2 OPEN state, sitewide.

   The closed control was themed in wave 2/4 (48px, blue-100 border). The
   panel that opens on top of it never was, and it showed: #E6E6E6 grey
   panel, a #097BAA cyan border, #777771 option text (2.9:1, fails AA), and
   a highlighted row painted navy with black text left on top (1.9:1).

   Why the wave-2 attempt missed: select2 appends the panel to <body>, so
   form-scoped selectors cannot reach it, and BOTH consumers here rename it.

     - Forminator passes a `dropdownCssClass`, so its panel is
       `.forminator-select-dropdown` inside
       `.forminator-select-dropdown-container--open`.
     - WooCommerce ships selectWoo (a select2 fork) which keeps
       `.select2-dropdown` but marks state with `[data-selected]` next to
       `[aria-selected]`, and highlights with `--wp-admin-theme-color`.

   So this block styles both families together. It lives in main.css, which
   is enqueued on `wp_enqueue_scripts` only: wp-admin never loads it, so the
   unprefixed class names cannot leak into the admin UI.

   SPECIFICITY NOTE. Forminator writes a PER-FORM stylesheet into
   `uploads/forminator/<hash>/css/style-<id>.css` from the form's design
   settings. That file is regenerated whenever the form is saved, so it must
   never be hand-edited; it is also loaded after the theme and carries long
   descendant chains. It is the real source of the reported defects:

     .forminator-select-dropdown-container--open
       .forminator-custom-form-1714.forminator-dropdown--default
       { border-color:#097BAA; background-color:#E6E6E6 }
     ... .select2-results__option--highlighted
       { outline:2px solid #254DEB; outline-offset:-2px }   <- the "own border"
     ... .select2-results__option--selected
       { background-color:#097BAA; color:#FFFFFF }

   The override chain below therefore mirrors that structure rather than
   relying on `!important` alone, and matches Forminator's own
   `.select2-results__option--selected` CLASS as well as the `aria-`/`data-`
   attributes selectWoo uses.
   ============================================================ */

/* --- The panel ------------------------------------------------
   An overlay, so it takes the shadow allowed by the design-standards
   overlay exception (cookie banner / mobile nav / search panel). It is not
   a card. */
.forminator-select-dropdown,
body .select2-container .select2-dropdown {
  background: var(--roi-paper) !important;
  border: 1px solid var(--roi-blue-100) !important;
  border-radius: var(--radius-s) !important;
  box-shadow: 0 6px 20px rgba(20, 31, 52, .14) !important;
  padding: 0 !important;
  overflow: hidden !important;         /* clips rows to the 6px corners */
  color: var(--roi-ink) !important;
}

/* No doubled border and no floating gap where the panel meets the field.
   select2 offsets the panel by the control's border; both edges stay, which
   read as one 2px seam plus a 13px gap. Square off the joined corners and
   pull the panel onto the control instead.

   The direction class lands in different places per consumer: Forminator
   puts `--below`/`--above` on the panel, selectWoo puts it on the
   container, so both spellings are matched.

   IMPORTANT: the panel must NOT be pulled up over the control. A negative
   margin here put the panel's top edge 1px above the control's bottom
   edge, so the panel became the topmost element over the control's own hit
   area; a mousedown on the control followed by a mouseup on that 1px strip
   is read by select2 as two separate targets and re-toggles the dropdown
   shut. The seam is closed by dropping the panel's own top border instead,
   which needs no offset at all. */
.forminator-select-dropdown--below,
body .select2-container--below .select2-dropdown,
body .select2-container .select2-dropdown--below {
  margin-top: 0 !important;
  border-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
.forminator-select-dropdown--above,
body .select2-container--above .select2-dropdown,
body .select2-container .select2-dropdown--above {
  margin-top: 0 !important;
  border-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
/* Keep the control's own corners square on the joined edge too, so the
   field and panel read as one object. */
.select2-container--open .select2-selection--single,
.select2-container--open .select2-selection--multiple {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.select2-container--above.select2-container--open .select2-selection--single,
.select2-container--above.select2-container--open .select2-selection--multiple {
  border-radius: var(--radius-s) var(--radius-s) 0 0 !important;
  border-bottom-left-radius: var(--radius-s) !important;
  border-bottom-right-radius: var(--radius-s) !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* --- Option rows ---------------------------------------------
   44px minimum touch target, real padding, ink text. The shipped #777771 is
   both off-palette and 2.9:1. */
.forminator-select-dropdown .select2-results__option,
body .select2-container .select2-dropdown .select2-results__option {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  border: 0 !important;                /* kill the rogue per-row border */
  background: transparent !important;
  color: var(--roi-ink) !important;    /* 14.1:1 on paper */
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
}

/* Hover and keyboard highlight are the SAME state, as select2 moves
   `--highlighted` on both. blue-50 tint keeps ink text at 13.3:1; the
   default select2/selectWoo blue is off-palette and, here, was painting
   navy under black text. */
.forminator-select-dropdown .select2-results__option--highlighted,
.forminator-select-dropdown .select2-results__option--highlighted[aria-selected],
.forminator-select-dropdown .select2-results__option--highlighted[data-selected],
body .select2-container .select2-dropdown .select2-results__option--highlighted,
body .select2-container .select2-dropdown .select2-results__option--highlighted[aria-selected],
body .select2-container .select2-dropdown .select2-results__option--highlighted[data-selected] {
  background: var(--roi-blue-50) !important;
  color: var(--roi-ink) !important;
  /* An inset marker rather than a border, so the row does not shift 1px
     when it becomes the highlighted one. */
  box-shadow: inset 3px 0 0 var(--roi-blue-500) !important;
}

/* Already-selected options: a firmer tint plus the interactive blue.
   blue-700 on blue-100 is 7.4:1. */
.forminator-select-dropdown .select2-results__option[aria-selected="true"],
.forminator-select-dropdown .select2-results__option[data-selected="true"],
body .select2-container .select2-dropdown .select2-results__option[aria-selected="true"],
body .select2-container .select2-dropdown .select2-results__option[data-selected="true"] {
  background: var(--roi-blue-100) !important;
  color: var(--roi-blue-700) !important;
  font-weight: 600 !important;
}
/* Selected AND highlighted: highlight wins the background, blue-700 text
   stays. 7.9:1 on blue-50. */
.forminator-select-dropdown .select2-results__option--highlighted[aria-selected="true"],
.forminator-select-dropdown .select2-results__option--highlighted[data-selected="true"],
body .select2-container .select2-dropdown .select2-results__option--highlighted[aria-selected="true"],
body .select2-container .select2-dropdown .select2-results__option--highlighted[data-selected="true"] {
  background: var(--roi-blue-50) !important;
  color: var(--roi-blue-700) !important;
}

/* Disabled and the "no results" / "searching" notices: slate is the
   documented secondary text token and still clears AA at 5.6:1. */
.forminator-select-dropdown .select2-results__option[aria-disabled="true"],
.forminator-select-dropdown .select2-results__message,
body .select2-container .select2-dropdown .select2-results__option[aria-disabled="true"],
body .select2-container .select2-dropdown .select2-results__message {
  color: var(--roi-slate) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-style: normal !important;
}

/* Optgroup labels, where a select uses them (Woo state lists do). */
.forminator-select-dropdown .select2-results__group,
body .select2-container .select2-dropdown .select2-results__group {
  padding: 10px 14px 6px !important;
  color: var(--roi-blue-800) !important;
  font-family: var(--font-head) !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

/* --- Scroll area ---------------------------------------------
   The stock 200px cap against 44px rows shows 4.5 rows and clips the last
   one mid-text. 308px is exactly 7 rows, so the list always ends on a row
   boundary and the cut edge reads as "more below", not as a bug. */
.forminator-select-dropdown .select2-results > .select2-results__options,
.forminator-select-dropdown .select2-results__options,
body .select2-container .select2-dropdown .select2-results > .select2-results__options,
body .select2-container .select2-dropdown .select2-results__options {
  max-height: 308px !important;
  overflow-y: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  scrollbar-width: thin;
  scrollbar-color: var(--roi-blue-300) var(--roi-blue-50);
  overscroll-behavior: contain;
}
.forminator-select-dropdown .select2-results__options::-webkit-scrollbar,
body .select2-container .select2-dropdown .select2-results__options::-webkit-scrollbar {
  width: 10px;
}
.forminator-select-dropdown .select2-results__options::-webkit-scrollbar-track,
body .select2-container .select2-dropdown .select2-results__options::-webkit-scrollbar-track {
  background: var(--roi-blue-50);
}
.forminator-select-dropdown .select2-results__options::-webkit-scrollbar-thumb,
body .select2-container .select2-dropdown .select2-results__options::-webkit-scrollbar-thumb {
  background: var(--roi-blue-300);
  border-radius: 999px;
  border: 3px solid var(--roi-blue-50);
}

/* Short lists must not render a stray empty strip under the last row. */
.forminator-select-dropdown .select2-results,
body .select2-container .select2-dropdown .select2-results {
  display: block !important;
  background: transparent !important;
}

/* --- The embedded search field -------------------------------
   Styled like every other theme input, with the site's amber focus ring
   (design-standards: 2px solid amber-600, offset 2px) replacing the default
   blue outline that was overlapping the field box. */
.forminator-select-dropdown .select2-search--dropdown,
body .select2-container .select2-dropdown .select2-search--dropdown {
  display: block !important;
  padding: 10px !important;
  background: var(--roi-paper) !important;
  border-bottom: 1px solid var(--roi-blue-100) !important;
}
.forminator-select-dropdown .select2-search--dropdown.select2-search--hide,
body .select2-container .select2-dropdown .select2-search--dropdown.select2-search--hide {
  display: none !important;
}
.forminator-select-dropdown .select2-search__field,
body .select2-container .select2-dropdown .select2-search__field {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: .6rem .8rem !important;
  border: 1px solid var(--roi-blue-100) !important;
  border-radius: var(--radius-s) !important;
  background: var(--roi-paper) !important;
  color: var(--roi-ink) !important;
  font: inherit !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.forminator-select-dropdown .select2-search__field::placeholder,
body .select2-container .select2-dropdown .select2-search__field::placeholder {
  color: var(--roi-slate) !important;
  opacity: 1 !important;
}
.forminator-select-dropdown .select2-search__field:focus,
body .select2-container .select2-dropdown .select2-search__field:focus {
  border-color: var(--roi-blue-300) !important;
  outline: 2px solid var(--roi-amber-600) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* --- Multi-select tags in the closed control ------------------
   The offerte field is a multiple; its chips wore the stock #e4e4e4/#aaa
   grey with a #999 remove-x. Chips are blue-100/blue-700 per the standards,
   and the remove control is the documented alert token at a 24px target. */
.select2-container .select2-selection--multiple {
  min-height: 48px !important;
  padding: .3rem .5rem !important;
  border: 1px solid var(--roi-blue-100) !important;
  border-radius: var(--radius-s) !important;
  background: var(--roi-paper) !important;
}
.select2-container .select2-selection--multiple .select2-selection__choice {
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  min-height: 32px !important;
  margin: .25rem .35rem .25rem 0 !important;
  padding: .2rem .6rem !important;
  border: 1px solid var(--roi-blue-100) !important;
  border-radius: var(--radius-s) !important;
  background: var(--roi-blue-50) !important;
  color: var(--roi-blue-700) !important;
  font-size: .92rem !important;
}
.select2-container .select2-selection--multiple .select2-selection__choice__remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: var(--radius-s) !important;
  background: transparent !important;
  color: var(--roi-alert) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.select2-container .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container .select2-selection--multiple .select2-selection__choice__remove:focus-visible {
  background: var(--roi-blue-100) !important;
  color: var(--roi-alert) !important;
}
.select2-container .select2-selection--multiple .select2-selection__choice__remove:focus-visible {
  outline: 2px solid var(--roi-amber-600) !important;
  outline-offset: 1px !important;
}
/* The inline "type to filter" field inside a multi-select control. */
.select2-container .select2-search--inline .select2-search__field {
  margin: 0 !important;
  padding: .35rem .2rem !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--roi-ink) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  outline: none !important;
  box-shadow: none !important;
}

/* --- WooCommerce / selectWoo closed control -------------------
   Woo's own select2.css sets a 28px single control with a #aaa border;
   match the 48px theme field so checkout country/state and the my-account
   address selects read as the same control as everything else. */
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce-page .select2-container--default .select2-selection--single {
  min-height: 48px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: .35rem .9rem !important;
  border: 1px solid var(--roi-blue-100) !important;
  border-radius: var(--radius-s) !important;
  background: var(--roi-paper) !important;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered,
.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  line-height: 1.4 !important;
  color: var(--roi-blue-900) !important;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__placeholder,
.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--roi-slate) !important;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow,
.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px !important;
  top: 0 !important;
  right: .4rem !important;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow b,
.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-top-color: var(--roi-blue-700) !important;
}
.woocommerce .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
.woocommerce-page .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-bottom-color: var(--roi-blue-700) !important;
}
/* selectWoo focuses the container, not the control, so the ring goes here.
   Same amber convention as every other field on the site. */
.select2-container--open .select2-selection--single,
.select2-container--open .select2-selection--multiple,
.select2-container--focus .select2-selection--single,
.select2-container--focus .select2-selection--multiple {
  border-color: var(--roi-blue-300) !important;
  outline: 2px solid var(--roi-amber-600) !important;
  outline-offset: 1px !important;
}

/* --- Native <select> fallbacks -------------------------------
   Woo's state field degrades to a plain <select> for countries with no
   state list, and shortcode/LMS surfaces render bare selects. They must
   match the same 48px field. (Forminator's own native select stays hidden;
   it is inert decoration behind select2, see the rule above.) */
.woocommerce select:not(.forminator-select2),
.woocommerce-page select:not(.forminator-select2),
.roi-form select,
select.roi-select {
  box-sizing: border-box;
  min-height: 48px;
  width: 100%;
  padding: .7rem 2.2rem .7rem .9rem;
  border: 1px solid var(--roi-blue-100);
  border-radius: var(--radius-s);
  background-color: var(--roi-paper);
  /* blue-700 chevron, inlined so it needs no external request */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2329467A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  color: var(--roi-ink);
  font: inherit;
  font-family: var(--font-body);
  -webkit-appearance: none;
  appearance: none;
}
.woocommerce select:not(.forminator-select2):focus-visible,
.woocommerce-page select:not(.forminator-select2):focus-visible,
.roi-form select:focus-visible,
select.roi-select:focus-visible {
  border-color: var(--roi-blue-300);
  outline: 2px solid var(--roi-amber-600);
  outline-offset: 2px;
}

/* --- Motion ---------------------------------------------------
   There is no open/close animation to suppress: the panel appears and the
   only transition is the row tint. Cut even that under reduced motion. */
.forminator-select-dropdown .select2-results__option,
body .select2-container .select2-dropdown .select2-results__option {
  transition: background-color .12s ease, color .12s ease;
}
@media (prefers-reduced-motion: reduce) {
  .forminator-select-dropdown .select2-results__option,
  body .select2-container .select2-dropdown .select2-results__option,
  .select2-container .select2-selection--multiple .select2-selection__choice__remove {
    transition: none !important;
  }
}

/* --- Beating the generated per-form stylesheet ----------------
   Same descendant depth as the rules quoted in the block header, so these
   win on specificity and not only on `!important`. */

/* Panel: kill the #E6E6E6 fill, the #097BAA border and the 9px top/bottom
   padding that left an empty strip under the last row. */
.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-dropdown--default,
.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-dropdown--basic,
.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-dropdown--flat {
  padding: 0 !important;
  border: 1px solid var(--roi-blue-100) !important;
  background-color: var(--roi-paper) !important;
}

/* Option rows: the generated file colours both the row and its inner
   <span>, so both are reset here. */
.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results .select2-results__options .select2-results__option,
.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results .select2-results__options .select2-results__option span:not(.forminator-checkbox-box) {
  background-color: transparent !important;
  color: var(--roi-ink) !important;
  line-height: 1.4 !important;
}

/* Highlighted (hover AND keyboard): blue-50 tint, ink text, and the
   #254DEB outline replaced by an inset blue-500 edge marker that does not
   shift the row. */
.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results .select2-results__options .select2-results__option.select2-results__option--highlighted,
.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results .select2-results__options .select2-results__option:not(.select2-results__option--selected).select2-results__option--highlighted,
.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results .select2-results__options .select2-results__option:not(.select2-results__option--selected).select2-results__option--highlighted span:not(.forminator-checkbox-box) {
  outline: 0 !important;
  outline-offset: 0 !important;
  background-color: var(--roi-blue-50) !important;
  color: var(--roi-ink) !important;
}
.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results .select2-results__options .select2-results__option.select2-results__option--highlighted {
  box-shadow: inset 3px 0 0 var(--roi-blue-500) !important;
}

/* Selected: the generated #097BAA fill with white text becomes the
   documented chip pairing, blue-100 under blue-700 (7.4:1). */
.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results .select2-results__options .select2-results__option.select2-results__option--selected,
.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results .select2-results__options .select2-results__option.select2-results__option--selected span:not(.forminator-checkbox-box) {
  background-color: var(--roi-blue-100) !important;
  color: var(--roi-blue-700) !important;
  font-weight: 600 !important;
}
/* Selected AND highlighted: highlight tint wins, blue-700 text stays. */
.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results .select2-results__options .select2-results__option.select2-results__option--selected.select2-results__option--highlighted,
.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results .select2-results__options .select2-results__option.select2-results__option--selected.select2-results__option--highlighted span:not(.forminator-checkbox-box) {
  background-color: var(--roi-blue-50) !important;
  color: var(--roi-blue-700) !important;
}

/* Scroll area: lift the stock 200px cap to a whole number of 44px rows. */
.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results .select2-results__options {
  max-height: 308px !important;
}

/* Search row inside the panel. */
.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-search {
  margin: 0 !important;
  padding: 10px !important;
  border-bottom: 1px solid var(--roi-blue-100) !important;
}
.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-search input {
  min-height: 44px !important;
  padding: .6rem .8rem !important;
  border: 1px solid var(--roi-blue-100) !important;
  border-radius: var(--radius-s) !important;
  background-color: var(--roi-paper) !important;
  color: var(--roi-ink) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
}
.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-search input:focus {
  border-color: var(--roi-blue-300) !important;
  outline: 2px solid var(--roi-amber-600) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* --- Panel geometry: align the panel to the field ------------
   ROOT CAUSE of both the offset panel and the gap. Forminator puts
   `padding: 12px 16px` on the `.select2-container.forminator-select`
   WRAPPER, while the control a visitor sees is the `.select2-selection`
   inside it. select2 measures the wrapper to place and size the panel, so
   the panel was drawn 34px wide (2x16px) and 13px low (12px + the 1px
   border) relative to the field: exactly the overhang and the drop in the
   report.

   Removing the phantom padding makes wrapper and control the same box, so
   select2's own positioning lands the panel flush without fighting its
   inline styles. The vertical rhythm the padding provided is restored as
   margin on the wrapper, which select2 does not measure. */
.forminator-ui .select2-container.forminator-select {
  padding: 0 !important;
  margin: 0 0 12px !important;
}
/* The panel keeps select2's inline width and select2's own top position:
   with the wrapper padding gone it already lands exactly on the control's
   bottom edge. No negative offset here either, for the hit-testing reason
   documented at the border rules above. */
.forminator-select-dropdown-container--open {
  margin-top: 0 !important;
}

/* --- Closed-control text inset -------------------------------
   The rendered text in a select2 control must line up with the text in a
   plain theme input (16px from the border). Forminator zeroes the
   control's padding from a much more specific selector, so the inset goes
   on the rendered element; selectWoo leaves the control alone, so there it
   can go on either. Both are set here so every select2 on the site starts
   its text on the same vertical line as the inputs beside it. */
.forminator-ui .select2-container .select2-selection--single .select2-selection__rendered,
.forminator-ui .select2-container .select2-selection--multiple .select2-selection__rendered,
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered,
.woocommerce-page .select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 1rem !important;
}
/* The multi-select chip row keeps the same left edge; its own chips supply
   the rest of the rhythm. */
.forminator-ui .select2-container .select2-selection--multiple .select2-selection__rendered {
  padding-right: .5rem !important;
}
/* Woo's arrow already sits inside the 16px inset; keep the text clear of it. */
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered,
.woocommerce-page .select2-container .select2-selection--single .select2-selection__rendered {
  padding-right: 2.2rem !important;
}