/*
Theme Name: pvznixkgdx
Theme URI: https://bluect.nl/
Author: BlueCT
Author URI: https://bluect.nl/
Description: Classic PHP theme voor Brandlogic, consultancy voor maatwerksoftware, systeemintegraties en AI-automatisering. Systeemtekening: koel lila-wit, diep merkpaars als constructielijn en een oranje merkteken als enige markering. Alle inhoud staat in SCF-velden.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pvznixkgdx
Tags: classic, custom-fields, accessibility-ready
*/

/* Concept: Systeemtekening. De site leest als de schets die een architect maakt
   voordat er een regel code staat: een koel lila-wit vel, diep merkpaars als
   constructielijn, rechte hoeken, 1px hairlines en genummerde blokken. Precies
   een markering in de hele taal, het oranje merkteken, wijst steeds naar wat er
   toe doet. Geen stockfoto's van handen schudden, geen carrousel, geen
   corporate mist: cijfers, namen en concrete beloftes.
   Signatuur: HET MERKTEKEN. Een massief oranje vierkant van 10px. Het staat
   voor elke bovenregel, het zit in de rechteronderhoek van elke kaart en elk
   beeldvlak, en op de primaire knop reist het bij hover van rechts naar links.
   Vormentaal: squared plus offset-square. Radius 0 op knoppen, kaarten, beelden
   en formuliervelden; het systeem draagt op hairlines in merkpaars op 12
   procent. Typografie: Space Grotesk (engineered grotesk, koppen) tegenover
   Inter (de huisletter van de klant, lopende tekst). */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* kleur */
  --ink: #17141F;              /* bijna zwart met paarse inslag, 18,2:1 op wit */
  --ink-soft: #56506A;         /* meta en bijschriften, 7,6:1 op wit */
  --paper: #FFFFFF;
  --surface: #F7F5FA;          /* lila-wit, dominante ondergrond */
  --surface-2: #EEEAF6;        /* getinte sectie */
  --deep: #2E1550;             /* donkere merkbaan, wit erop 15,7:1 */
  --brand: #5C2D91;            /* merkpaars, 8,7:1 op lila-wit */
  --accent: #F26522;           /* oranje merkteken: vlakken en grafiek, nooit kleine tekst */
  --accent-text: #A8410C;      /* donkerder oranje voor kleine tekst, 5,7:1 op lila-wit */
  --accent-lite: #FFA46B;      /* oranje op donker, 8,1:1 op --deep */
  --line: rgba(23, 20, 31, 0.12);
  --line-strong: rgba(23, 20, 31, 0.26);
  --line-ondark: rgba(255, 255, 255, 0.22);
  --ondark: rgba(255, 255, 255, 0.84);

  /* knoplabels: expliciet, nooit geerfd */
  --btn-fill: #F26522;
  --btn-label: #17141F;
  --btn-fill-hover: #E0571B;

  /* typografie: display en body zijn bewust twee families */
  --font-display: "Space Grotesk", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --step-0: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem);
  --step-2: clamp(1.3rem, 1.18rem + 0.6vw, 1.6rem);
  --step-3: clamp(1.55rem, 1.32rem + 1.05vw, 2.15rem);
  --step-4: clamp(1.8rem, 1.45rem + 1.7vw, 2.75rem);
  --step-5: clamp(2.1rem, 1.6rem + 3vw, 4.15rem);

  /* ruimte */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 7rem;

  /* vorm: squared plus het merkteken */
  --radius: 0px;
  --mark: 10px;

  --container: 1280px;
  --measure: 760px;
  --header-h: 86px;
}

/* ==========================================================================
   2. RESET EN BASIS
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: hidden;
  max-width: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100%;
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; }
img { display: block; height: auto; border-radius: var(--radius); }

/* Iconen blijven op dezelfde regel als hun tekst. svg{display:block} klopt voor
   losstaande media, maar laat een pijl in een link of knop naar de volgende
   regel vallen. */
svg { display: block; }
a > svg, button > svg, p svg, li > a svg, summary svg, span > svg, dd svg {
  display: inline-block;
  vertical-align: middle;
  flex: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--space-3);
  line-height: 1.12;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

h1 { font-size: var(--step-5); line-height: 1.04; letter-spacing: -0.03em; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: 1.2; }
h4 { font-size: var(--step-1); line-height: 1.3; }

p { margin: 0 0 var(--space-3); overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-text); }

strong, b { font-weight: 600; }

ul, ol { margin: 0 0 var(--space-3); padding-left: 1.15rem; }
li { margin-bottom: 0.35rem; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-5) 0; }

::selection { background: var(--accent); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* De skip-link staat buiten beeld maar houdt een volwaardig raakvlak. */
.skip-link {
  position: absolute;
  left: 1rem; top: -160px;
  z-index: 1200;
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0.7rem 1.25rem;
  background: var(--ink); color: #FFFFFF;
  font-family: var(--font-display); font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease-out;
}
.skip-link:focus { top: 1rem; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 2rem);
}

.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }
.section--paper { background: var(--paper); }
.section--surface { background: var(--surface); }
.section--tinted { background: var(--surface-2); }
.section--deep { background: var(--deep); }
.section--paper + .section--paper { border-top: 1px solid var(--line); }
.section--surface + .section--surface { border-top: 1px solid var(--line); }

/* Lange lopende tekst (privacy, vrije prosepagina's) krijgt een leesmaat van
   760px, GECENTREERD in de 1280px-doos. Gewone marketingtekst wordt niet
   geklemd: die loopt over de volle kolom. */
.prose--longform {
  max-width: var(--measure);
  margin-inline: auto;
  text-align: left;
}
.prose--longform > h2 { font-size: var(--step-3); margin-top: var(--space-6); }
.prose--longform > h3 { font-size: var(--step-1); margin-top: var(--space-5); }
.prose--longform > h4 { margin-top: var(--space-4); }
.prose--longform p { margin-bottom: var(--space-3); }
.prose--longform ul { list-style: none; padding-left: 1.1rem; margin-bottom: var(--space-3); }
.prose--longform ul > li { position: relative; padding-left: 1rem; }
.prose--longform ul > li::before {
  content: ""; position: absolute; left: -0.15rem; top: 0.72em;
  width: 7px; height: 7px; background: var(--accent);
}
.prose--longform ul ul { margin-top: 0.35rem; margin-bottom: 0; padding-left: 1.1rem; }
.prose--longform ul ul > li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--brand); }
.prose--longform ol { list-style: none; counter-reset: pl; padding-left: 0; margin-bottom: var(--space-3); }
.prose--longform ol > li { counter-increment: pl; position: relative; padding-left: 2.2rem; }
.prose--longform ol > li::before {
  content: counter(pl, decimal-leading-zero);
  position: absolute; left: 0; top: 0.05em;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9em;
  color: var(--accent-text);
}
.prose--longform ol ol { list-style: lower-alpha; counter-reset: none; padding-left: 1.4rem; margin-top: 0.35rem; }
.prose--longform ol ol > li { padding-left: 0; }
.prose--longform ol ol > li::before { content: none; }
.prose--longform blockquote {
  margin: var(--space-4) 0; padding-left: var(--space-4);
  box-shadow: inset 2px 0 0 0 var(--brand);
  font-family: var(--font-display); font-size: var(--step-1);
}
.prose--longform figure { margin: var(--space-4) 0; }
.prose--longform figcaption { font-size: var(--step--1); color: var(--ink-soft); margin-top: var(--space-2); }
.prose--longform code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em; background: var(--surface-2); padding: 0.1em 0.35em;
}
.prose--longform table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: var(--space-3); }
.prose--longform th, .prose--longform td {
  padding: 0.65rem 0.75rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere; word-break: break-word;
}
.prose--longform th {
  font-family: var(--font-display); font-weight: 700;
  border-bottom: 2px solid var(--line-strong);
}
.table-scroll { overflow-x: auto; margin-bottom: var(--space-3); }

/* ==========================================================================
   4. SIGNATUUR: HET MERKTEKEN
   ========================================================================== */

.eyebrow {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--space-3);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: var(--mark); height: var(--mark);
  background: var(--accent);
}
.on-dark .eyebrow { color: var(--accent-lite); }

.section-head { max-width: 52rem; margin-bottom: var(--space-6); }
.section-head h2 { margin-bottom: var(--space-3); }
.section-head p { color: var(--ink-soft); font-size: var(--step-1); max-width: 46rem; }
.on-dark .section-head p { color: var(--ondark); }
.section-rule { border: 0; border-top: 1px solid var(--line); margin: 0 0 var(--space-5); }
.on-dark .section-rule { border-top-color: var(--line-ondark); }

/* ==========================================================================
   5. KNOPPEN
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  border: 0; border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-0); line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}

/* De primaire knop draagt het merkteken in de rechteronderhoek. Bij hover
   groeit dat vierkant uit tot de volle onderregel: dezelfde beweging als de
   onderstreping in het menu. Alleen transform, dus geen layoutverschuiving. */
.btn--primary { background: var(--btn-fill); color: var(--btn-label); }
.btn--primary::after {
  content: "";
  position: absolute; bottom: 0; right: 0;
  width: 100%; height: var(--mark);
  background: var(--ink);
  transform: scaleX(0.07);
  transform-origin: right center;
  transition: transform 0.28s ease-out;
  z-index: -1;
}
.btn--primary:hover::after,
.btn--primary:focus-visible::after { transform: scaleX(1); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--btn-fill-hover); color: var(--btn-label); }

.btn--line {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.btn--line:hover, .btn--line:focus-visible {
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--brand);
}
.on-dark .btn--line { color: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--line-ondark); }
.on-dark .btn--line:hover, .on-dark .btn--line:focus-visible { color: #FFFFFF; box-shadow: inset 0 0 0 1.5px #FFFFFF; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.btn-row--spaced { margin-top: var(--space-4); }
.cards--spaced { margin-top: var(--space-6); }
.stack-top { margin-top: var(--space-5); }
.footer-cta-row { margin-top: var(--space-4); }

.microcopy { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.microcopy--spaced { margin-top: var(--space-3); }
.on-dark .microcopy { color: var(--ondark); }

/* Tekstlink die zijn bestemming noemt. */
.textlink {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-0);
  color: var(--brand); text-decoration: none;
}
.textlink span { text-decoration: underline; text-underline-offset: 0.22em; }
.textlink:hover { color: var(--accent-text); }
.textlink svg { transition: transform 0.18s ease-out; }
.textlink:hover svg { transform: translateX(3px); }
.on-dark .textlink { color: var(--accent-lite); }

/* ==========================================================================
   6. HEADER
   ========================================================================== */

.site-header {
  position: sticky; top: 0;
  z-index: 999;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
body.nav-open .site-header { z-index: 1000; }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: var(--header-h);
  padding-block: 0.6rem;
}

.brand {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 0.15rem;
  min-height: 48px;
  text-decoration: none;
}
.brand img { height: clamp(30px, 3.4vw, 40px); width: auto; max-width: 220px; object-fit: contain; }
.brand-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.05; letter-spacing: -0.03em;
  color: var(--ink);
}
.brand-slogan {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--step--1); line-height: 1.2;
  color: var(--ink-soft);
}

.header-actions { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem); }

.header-tel {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0.4rem 0.2rem;
  font-family: var(--font-display); font-weight: 700;
  color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.header-tel:hover { color: var(--accent-text); }
.header-cta { white-space: nowrap; }
.cta-label-short { display: none; }

/* ---- hoofdmenu ---- */
.primary-nav .nav-menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: clamp(0.6rem, 1.8vw, 1.6rem);
}
.primary-nav .nav-menu > li { position: relative; }
.primary-nav .nav-menu a:not(.btn) {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 44px;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
  white-space: nowrap;
  position: relative;
}
.primary-nav .nav-menu > li > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0.5rem;
  width: 0; height: 3px; background: var(--accent);
  transition: width 0.18s ease-out;
}
.primary-nav .nav-menu > li > a:not(.btn):hover::after,
.primary-nav .nav-menu > li > a:not(.btn):focus-visible::after { width: 100%; }
.primary-nav .nav-menu > li.is-current > a::after { width: var(--mark); }
.nav-caret { transform: rotate(90deg); transition: transform 0.18s ease-out; }
.has-flyout.is-open > a .nav-caret { transform: rotate(-90deg); }

/* ---- mega-menu: gecentreerd onder de header, nooit vanaf de linkerrand ---- */
.mega {
  display: none;
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  width: min(940px, calc(100vw - 3rem));
  padding: var(--space-4);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  z-index: 30;
}
.mega__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}
/* Gelijke specificiteit als de menuregel hierboven, en later in het bestand:
   zo wint deze regel zonder een !important-oorlog. */
.primary-nav .nav-menu .mega__list a {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 var(--space-3);
  align-items: start;
  min-height: 44px;
  padding: var(--space-3);
  white-space: normal;
  text-decoration: none;
}
.mega__list a:hover, .mega__list a:focus-visible { background: var(--surface); }
.mega__icon {
  grid-row: span 2;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: var(--brand);
  background: var(--surface-2);
}
.mega__list a:hover .mega__icon { background: var(--accent); color: var(--ink); }
.mega__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-0); line-height: 1.25; color: var(--ink);
}
.mega__desc {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--step--1); line-height: 1.5; color: var(--ink-soft);
  margin-top: 0.2rem;
}
.mega__foot {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.nav-toggle, .nav-close, .nav-overlay, .nav-drawer-cta, .nav-drawer-tel { display: none; }

/* Het megapaneel hangt onder de HELE header, niet onder het menu-item: de li
   wordt daarom static, zodat het paneel zich tegen .site-header afzet en
   gecentreerd kan staan zonder rechts buiten beeld te lopen. */
@media (min-width: 981px) {
  .primary-nav .nav-menu > li.has-flyout { position: static; }
  .has-flyout.is-open > .mega,
  .has-flyout:focus-within > .mega { display: block; }
}

@media (max-width: 1179px) {
  .header-tel { display: none; }
}

/* ==========================================================================
   7. MOBIELE LADE
   ========================================================================== */

@media (max-width: 980px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 48px; min-height: 48px;
    padding: 0.6rem;
    background: transparent; border: 0;
    box-shadow: inset 0 0 0 1.5px var(--line-strong);
    color: var(--ink); cursor: pointer;
  }
  .primary-nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(360px, 88vw);
    height: 100dvh;
    padding: calc(var(--space-6) + 0.75rem) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
    background: var(--deep);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(calc(100% + 8px));
    transition: transform 0.25s ease-out;
    z-index: 1001;
  }
  body.nav-open .primary-nav { transform: translateX(0); }
  .primary-nav .nav-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav .nav-menu a:not(.btn) {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px;
    color: #FFFFFF;
    font-size: var(--step-1);
    border-bottom: 1px solid var(--line-ondark);
  }
  .primary-nav .nav-menu > li > a:not(.btn)::after { background: var(--accent-lite); bottom: 0.7rem; }
  .primary-nav .nav-menu > li.is-current > a { color: var(--accent-lite); }
  /* Op mobiel is de flyout een gewone ingesprongen lijst: geen thumbnails,
     geen omschrijvingen. Alleen .is-open (door JS gezet) mag hem openen; een
     :hover- of :focus-within-regel zou het tweede tikje blokkeren. */
  .mega {
    display: none;
    position: static; transform: none; width: auto;
    padding: 0 0 var(--space-3) var(--space-3);
    background: transparent; border: 0;
  }
  .has-flyout.is-open > .mega { display: block; }
  .mega__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .primary-nav .nav-menu .mega__list a {
    grid-template-columns: minmax(0, 1fr);
    padding: 0; min-height: 48px;
  }
  .mega__icon, .mega__desc { display: none; }
  .mega__title { color: #FFFFFF; font-weight: 500; }
  .mega__foot { border-top-color: var(--line-ondark); }
  .nav-close {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: var(--space-3); right: var(--space-3);
    min-width: 48px; min-height: 48px;
    background: transparent; border: 0;
    box-shadow: inset 0 0 0 1.5px var(--line-ondark);
    color: #FFFFFF; cursor: pointer;
  }
  .nav-overlay {
    display: block; position: fixed; inset: 0;
    background: rgba(23, 20, 31, 0.6);
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease-out;
    z-index: 990;
  }
  body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .nav-drawer-cta { display: flex; width: 100%; margin-top: var(--space-4); }
  .nav-drawer-tel {
    display: inline-flex; align-items: center; gap: 0.5rem;
    min-height: 48px; margin-top: var(--space-3);
    color: #FFFFFF; text-decoration: none;
    font-family: var(--font-display); font-weight: 700;
  }
}

@media (max-width: 900px) {
  .site-header__inner { gap: var(--space-3); }
  .brand-slogan { display: none; }
}

@media (max-width: 979px) {
  .cta-label-full { display: none; }
  .cta-label-short { display: inline; }
  .header-cta { padding-inline: 1.1rem; }
}

@media (max-width: 379px) {
  .header-cta { display: none; }
}

/* ==========================================================================
   8. HERO
   ========================================================================== */

.hero { background: var(--surface); border-bottom: 1px solid var(--line); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 7vw, 5.5rem);
}
.hero__copy { max-width: 46rem; min-width: 0; }
.hero h1 { margin-bottom: var(--space-4); }
.hero__intro { font-size: var(--step-1); color: var(--ink-soft); max-width: 38rem; }
.hero__intro p { margin-bottom: var(--space-3); }
.hero .btn-row { margin-top: var(--space-5); }
.hero__promise {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: var(--space-3);
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step--1); color: var(--ink-soft);
}
.hero__promise::before {
  content: ""; flex: none;
  width: 7px; height: 7px; background: var(--accent);
}

.hero__facts {
  list-style: none; margin: var(--space-6) 0 0; padding: var(--space-4) 0 0;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4);
}
.hero__facts li { margin: 0; min-width: 0; }
.fact__value {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-2); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink);
}
.fact__label {
  display: block; margin-top: 0.25rem;
  font-size: var(--step--1); line-height: 1.45; color: var(--ink-soft);
}

.hero__media { position: relative; min-width: 0; }
.hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: 22px; height: 22px;
  background: var(--accent);
}

/* Kop van een binnenpagina */
.page-head { background: var(--surface); border-bottom: 1px solid var(--line); }
.page-head__inner { padding-block: clamp(2.5rem, 6vw, 4.5rem); max-width: 56rem; }
.page-head h1 { margin-bottom: var(--space-4); }
.page-head__intro { font-size: var(--step-1); color: var(--ink-soft); max-width: 46rem; }
.page-head .btn-row { margin-top: var(--space-5); }

/* ==========================================================================
   9. GENUMMERDE BLOKKEN
   ========================================================================== */

.numbered { display: grid; gap: 0; }
/* Variant met een vinkje in plaats van een cijfer: het icoon vraagt geen
   cijferkolom, anders staat de tekst onnodig ver weg. */
.numbered--check .numbered__row { grid-template-columns: 2.25rem minmax(0, 1fr); }
.numbered--check .numbered__num { display: flex; align-items: center; height: 1.6em; }
.numbered__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--line);
}
.numbered__row:last-child { border-bottom: 1px solid var(--line); }
.numbered__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-3); line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-text);
}
.numbered__body { min-width: 0; }
.numbered__body h3 { margin-bottom: var(--space-2); }
.numbered__body p { color: var(--ink-soft); max-width: 46rem; }
.on-dark .numbered__row { border-top-color: var(--line-ondark); }
.on-dark .numbered__row:last-child { border-bottom-color: var(--line-ondark); }
.on-dark .numbered__num { color: var(--accent-lite); }
.on-dark .numbered__body p { color: var(--ondark); }

/* ==========================================================================
   10. KAARTEN
   ========================================================================== */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--paper);
  border: 1px solid var(--line);
  min-width: 0;
}
.card::after {
  content: "";
  position: absolute; right: -1px; bottom: -1px;
  width: var(--mark); height: var(--mark);
  background: var(--accent);
  transform-origin: bottom right;
  transition: transform 0.22s ease-out;
}
.card:hover::after, .card:focus-within::after { transform: scale(1.9); }
.card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: var(--brand); background: var(--surface-2);
}
.card h2, .card h3 { margin: 0; font-size: var(--step-1); line-height: 1.25; }
.card p { color: var(--ink-soft); margin: 0; }
.card .textlink {
  display: block;
  margin-top: auto;
}
.card .textlink svg { margin-left: 0.4rem; }
.card__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step--1); letter-spacing: 0.14em;
  color: var(--accent-text);
}
.on-dark .card { background: rgba(255, 255, 255, 0.05); border-color: var(--line-ondark); }
.on-dark .card h2, .on-dark .card h3 { color: #FFFFFF; }
.on-dark .card p { color: var(--ondark); }
.on-dark .card__icon { background: rgba(255, 255, 255, 0.1); color: var(--accent-lite); }

/* ==========================================================================
   11. BEELDBAND
   ========================================================================== */

.imageband { background: var(--surface); padding-block: 0; }
.imageband figure { margin: 0; }
.imageband__media { position: relative; }
.imageband img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.imageband__media::after {
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: 22px; height: 22px;
  background: var(--accent);
}
.imageband figcaption {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: var(--space-3) 0 0;
  font-size: var(--step--1); color: var(--ink-soft);
  max-width: 48rem;
}
.imageband--framed { padding-block: clamp(3rem, 7vw, 5rem); }

/* ==========================================================================
   12. DONKERE BAAN EN STATEMENT
   ========================================================================== */

.on-dark { color: #FFFFFF; }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #FFFFFF; }
.on-dark p { color: var(--ondark); }
.on-dark a:not(.btn) { color: var(--accent-lite); }
.on-dark hr { border-top-color: var(--line-ondark); }

.statement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.statement__lead {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-2); line-height: 1.3; letter-spacing: -0.02em;
  color: #FFFFFF;
}
.statement__note { margin-top: var(--space-4); font-size: var(--step--1); color: var(--ondark); }

/* ==========================================================================
   13. BEWIJS: CIJFERS EN CITATEN
   ========================================================================== */

.stats {
  list-style: none; margin: 0 0 var(--space-6); padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.stats li { margin: 0; padding: var(--space-5); background: var(--paper); min-width: 0; }
.stat__value {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-3); line-height: 1; letter-spacing: -0.03em;
  color: var(--brand);
}
.stat__label { display: block; margin-top: var(--space-2); font-size: var(--step--1); color: var(--ink-soft); }

.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.quote {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-5);
  background: var(--paper);
  border: 1px solid var(--line);
  min-width: 0;
}
.quote::after {
  content: "";
  position: absolute; right: -1px; bottom: -1px;
  width: var(--mark); height: var(--mark);
  background: var(--accent);
}
.quote__mark {
  width: 26px; height: 3px; background: var(--accent);
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-1); line-height: 1.45; letter-spacing: -0.01em;
  color: var(--ink);
}
.quote figcaption { margin-top: auto; font-size: var(--step--1); color: var(--ink-soft); }
.quote__author { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); color: var(--ink); }

/* ==========================================================================
   14. VRAGEN
   ========================================================================== */

.faq { border-top: 1px solid var(--line); max-width: 56rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) 0;
  min-height: 52px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-1); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none;
  width: var(--mark); height: var(--mark);
  background: var(--accent);
  transition: transform 0.2s ease-out;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding: 0 0 var(--space-4); max-width: 46rem; color: var(--ink-soft); }

/* ==========================================================================
   15. SPLIT EN LIJSTEN
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split__body { min-width: 0; }
.split__body p { color: var(--ink-soft); }

.ticklist { list-style: none; margin: 0; padding: 0; }
.ticklist li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.ticklist li:first-child { border-top: 1px solid var(--line); }
.ticklist svg { color: var(--accent-text); margin-top: 0.25rem; }
.on-dark .ticklist li { border-color: var(--line-ondark); }
.on-dark .ticklist svg { color: var(--accent-lite); }

.deflist { margin: 0; }
.deflist > div {
  display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--line);
}
.deflist > div:last-child { border-bottom: 1px solid var(--line); }
.deflist dt {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-text);
}
.deflist dd { margin: 0; min-width: 0; color: var(--ink-soft); }
.deflist dd a { color: var(--brand); font-weight: 600; }

/* ==========================================================================
   16. CASES
   ========================================================================== */

.case {
  position: relative;
  padding: clamp(1.5rem, 4vw, var(--space-6));
  background: var(--paper);
  border: 1px solid var(--line);
}
.case::after {
  content: "";
  position: absolute; right: -1px; bottom: -1px;
  width: 18px; height: 18px;
  background: var(--accent);
}
.case + .case { margin-top: var(--space-5); }
.case__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-5);
}
.case__client {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-2); letter-spacing: -0.02em;
  color: var(--ink);
}
.case__sector { font-size: var(--step--1); color: var(--ink-soft); }
.case__title { font-size: var(--step-1); margin-bottom: var(--space-4); max-width: 46rem; }
.case__quote {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.case__quote blockquote {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-1); line-height: 1.45;
  color: var(--ink);
}
.case__quote figcaption { font-size: var(--step--1); color: var(--ink-soft); }
.case__quote figcaption strong { display: block; font-family: var(--font-display); font-size: var(--step-0); color: var(--ink); }

/* ==========================================================================
   17. PORTRET
   ========================================================================== */

.person {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.person__media { position: relative; min-width: 0; }
.person__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; }
.person__media::after {
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: 22px; height: 22px;
  background: var(--accent);
}
.person__body { min-width: 0; }
.person__name { font-size: var(--step-3); margin-bottom: 0.25rem; }
.person__role {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-0); color: var(--accent-text);
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   18. CONTACT
   ========================================================================== */

.contact-grid h2 { font-size: var(--step-3); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-form-wrap { min-width: 0; }
.form-promise {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-0);
}
.form-promise svg { color: var(--accent-text); margin-top: 0.15rem; }
.form-placeholder {
  padding: var(--space-5);
  border: 1.5px dashed var(--line-strong);
  color: var(--ink-soft);
  font-size: var(--step-0);
}
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { margin: 0; border-top: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: 1px solid var(--line); }
.contact-list a, .contact-list .contact-static {
  display: grid; grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-height: 56px; padding-block: var(--space-3);
  text-decoration: none; color: var(--ink);
  font-family: var(--font-display); font-weight: 700;
  overflow-wrap: anywhere;
}
.contact-list a:hover { color: var(--accent-text); }
.contact-list svg { color: var(--brand); }
.contact-list .contact-static { font-weight: 400; color: var(--ink-soft); font-family: var(--font-body); }
.hours { list-style: none; margin: 0; padding: 0; }
.hours li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--line);
  margin: 0;
  font-size: var(--step-0);
}
.hours__label { color: var(--ink); }
.hours__time { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   19. AFSLUITENDE CTA-BAAN
   ========================================================================== */

.cta-band { background: var(--deep); color: #FFFFFF; }
.cta-band .container { padding-block: clamp(3.5rem, 8vw, 6rem); }
.cta-band h2 { max-width: 22ch; }
.cta-band p { max-width: 48rem; font-size: var(--step-1); }
.cta-band .btn-row { margin-top: var(--space-5); }
.cta-band .btn { color: var(--btn-label); }
.cta-band .btn--line { color: #FFFFFF; }

/* ==========================================================================
   20. FOOTER
   ========================================================================== */

.site-footer { background: var(--ink); color: #FFFFFF; }
.site-footer .container { padding-block: clamp(3rem, 7vw, 4.5rem); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
}
.footer-brand__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-2); letter-spacing: -0.03em;
  color: #FFFFFF; margin: 0 0 var(--space-3);
}
.footer-brand p { color: var(--ondark); font-size: var(--step-0); max-width: 30rem; }
.footer-legal { font-size: var(--step--1); color: rgba(255, 255, 255, 0.7); margin-top: var(--space-3); }
.site-footer h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-lite);
  margin: 0 0 var(--space-3);
}
.site-footer a { color: #FFFFFF; }
.site-footer .btn { color: var(--btn-label); }
.site-footer .btn--line { color: #FFFFFF; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin: 0; }
.footer-links a {
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 44px;
  color: #FFFFFF; text-decoration: none;
  font-size: var(--step-0);
  overflow-wrap: anywhere;
}
.footer-links a:hover { color: var(--accent-lite); text-decoration: underline; }
.footer-links svg { color: var(--accent-lite); }
.footer-hours { list-style: none; margin: 0; padding: 0; }
.footer-hours li {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding-block: 0.35rem;
  font-size: var(--step--1); color: var(--ondark);
  margin: 0;
}
.footer-hours .hours__label { color: #FFFFFF; }
.footer-hours .hours__time { color: var(--ondark); }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-ondark);
}
.footer-bottom p { margin: 0; font-size: var(--step--1); color: rgba(255, 255, 255, 0.7); }
.footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; }
.footer-bottom li { margin: 0; }
.footer-bottom a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-size: var(--step--1); color: rgba(255, 255, 255, 0.82);
}

/* ==========================================================================
   21. 404 EN WEGWIJZER
   ========================================================================== */

.wayfinder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.wayfinder a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 64px; padding: var(--space-4);
  background: var(--paper);
  font-family: var(--font-display); font-weight: 700;
  color: var(--ink); text-decoration: none;
}
.wayfinder a:hover { background: var(--surface-2); color: var(--accent-text); }
.wayfinder svg { color: var(--accent-text); }

/* ==========================================================================
   22. FORMINATOR (het formulier komt ongestyled binnen)
   ========================================================================== */

.forminator-custom-form { font-family: var(--font-body); }
.forminator-custom-form label,
.forminator-custom-form .forminator-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.forminator-custom-form input[type="text"],
.forminator-custom-form input[type="email"],
.forminator-custom-form input[type="tel"],
.forminator-custom-form input[type="url"],
.forminator-custom-form input[type="number"],
.forminator-custom-form input[type="date"],
.forminator-custom-form select,
.forminator-custom-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: none;
}
.forminator-custom-form textarea { min-height: 8rem; }
.forminator-custom-form input:focus,
.forminator-custom-form select:focus,
.forminator-custom-form textarea:focus {
  border-color: var(--brand);
  outline: 3px solid rgba(92, 45, 145, 0.28);
  outline-offset: 0;
}
.forminator-custom-form .forminator-description { font-size: var(--step--1); color: var(--ink-soft); }
.forminator-custom-form .forminator-row { margin-bottom: var(--space-3); }
.forminator-custom-form .forminator-button,
.forminator-custom-form button[type="submit"],
.forminator-custom-form input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  background: var(--btn-fill);
  color: var(--btn-label);
  border: 0; border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-0); line-height: 1.2;
  cursor: pointer;
}
.forminator-custom-form .forminator-button:hover,
.forminator-custom-form button[type="submit"]:hover { background: var(--btn-fill-hover); }
.forminator-custom-form .forminator-error-message,
.forminator-custom-form .forminator-response-message {
  font-size: var(--step-0);
  padding: 0.75rem 1rem;
  background: var(--surface-2);
  color: var(--ink);
}

/* ==========================================================================
   23. ENTRANCE-ANIMATIONS
   ========================================================================== */

/* entrance-animations: .anim-in is standaard zichtbaar; alleen JS mag dimmen. */
.anim-in { opacity: 1; transform: none; }
.anim-pending {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.anim-pending.anim-done { opacity: 1; transform: none; }

/* ==========================================================================
   24. RESPONSIVE
   ========================================================================== */

@media (max-width: 1099px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-5); }
  .hero__copy { max-width: none; }
  /* Belofte en knop staan op mobiel boven het beeld: de eerste viewport moet
     de h1, een steunregel en de primaire actie tonen zonder te scrollen. */
  .hero__media { margin-top: var(--space-5); }
  .hero__media img { aspect-ratio: 16 / 10; }
  .split, .split--even, .statement, .person, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .person__media { max-width: 22rem; }
  .quotes { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .imageband img { aspect-ratio: 16 / 9; }
}

@media (max-width: 599px) {
  :root { --header-h: 72px; }
  .section { padding-block: clamp(2.75rem, 9vw, 3.5rem); }
  .hero__grid { padding-block: var(--space-4); }
  .hero__copy, .hero__copy * { text-align: left; }
  .hero__facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .cards, .cards--two { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .wayfinder { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .btn-row { align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .numbered__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .deflist > div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .card { padding: var(--space-4); }
  .imageband img { aspect-ratio: 4 / 3; }
  /* Decoratieve, absoluut gepositioneerde vierkanten horen niet in een smalle
     kolom: ze raken los van het beeld waar ze bij horen. */
  .hero__media::after,
  .person__media::after,
  .imageband__media::after { display: none; }
}

@media (max-width: 359px) {
  .site-header__inner { gap: 0.5rem; }
}

/* ==========================================================================
   25. PREFERS-REDUCED-MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .anim-pending { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn--primary::after { transition: none !important; }
  .card::after { transition: none !important; }
  .textlink svg { transition: none !important; }
  .primary-nav .nav-menu > li > a:not(.btn)::after { transition: none !important; }
}