/* ========================================================================== 
   V6 sitecanon: bovengloed en CTA-hiërarchie

   Laad dit bestand na routegebonden CSS. De homepage en acht bestaande
   templatepagina's hebben al echte .hero-bg-circle-markup. Voeg
   .vp-page-glow alleen toe aan een hero zonder die markup, zodat nergens een
   dubbele gloed ontstaat.
   ========================================================================== */

/* Metrisch passende fallback voor Urbanist. Onder throttling komt het
   Google-fontbestand pas rond de vier seconden binnen; tot dan tekent de
   browser met de systeem-sans, die 4,99 procent breder is (gemeten op de
   home-h1: 1989,45px tegen 1894,89px). Daardoor wikkelde die kop naar drie
   regels en sprong de hele hero 74px omhoog zodra het echte font er was: dat
   was 0,252 van de 0,334 CLS op de homepage.

   Deze face draagt dezelfde naam als het webfont en staat eerder in de
   cascade, dus hij dient alleen als tijdelijke tekenwijze zolang het webfont
   laadt; zodra dat binnen is wint de later gedeclareerde Google-face. De
   size-adjust van 95,25 procent (1 / 1,0499) maakt de fallbackregel even
   breed, waardoor de regelval niet meer verspringt. Vindt een systeem geen
   van deze lokale fonts, dan valt de browser terug op het oude gedrag.
   ========================================================================== */
@font-face {
  font-family: Urbanist;
  font-style: normal;
  font-weight: 400 700;
  size-adjust: 95.25%;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Roboto"), local("Segoe UI");
}

/* ==========================================================================
   Zelfgehost Urbanist, 4 september 2026 (O1289).

   Stond tot vandaag als stylesheet van fonts.googleapis.com in de head van
   elke pagina, met twee preconnects erboven. Google zag daardoor het IP van
   elke bezoeker, op een site die lokale verwerking verkoopt. De bestanden
   staan nu in fonts/ en komen van onze eigen host; de link en de preconnects
   haalt borgZelfgehostFont() in scripts/bouw-ontbrekende-paginas.mjs weg.

   Twee bestanden, want Google splitst de tekenset: latin dekt het Nederlands,
   latin-ext de accenten die daarbuiten vallen. De browser haalt de tweede
   alleen op als een pagina zo'n teken draagt.

   Urbanist is variabel, dus de hele as 400 tot 700 zit in een bestand. De
   pagina's gebruiken 400, 500, 600 en 700; niets eronder en niets erboven.

   DEZE TWEE FACES MOETEN NA DE FALLBACK-FACE HIERBOVEN STAAN. Die draagt
   dezelfde familienaam en dient als tijdelijke tekenwijze; de later
   gedeclareerde face wint zodra het bestand binnen is. Zet je ze ervoor, dan
   tekent de site permanent met Arial.
   ========================================================================== */
@font-face {
  font-family: Urbanist;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/urbanist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Urbanist;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/urbanist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Skiplink: op elke pagina buiten beeld tot hij focus krijgt. Route-CSS mag
   dit met een paginaspecifieke selector overschrijven; zonder deze basisregel
   stond de link zichtbaar linksboven op elke pagina zonder eigen regel. */
.vp-skip {
  position: fixed;
  z-index: 999;
  top: 8px;
  left: 8px;
  display: inline-flex;
  min-height: 44px;
  padding: 11px 14px;
  align-items: center;
  background: var(--vp-navy, #1e3a5f);
  color: #fff;
  transform: translateY(-160%);
}

.vp-skip:focus { transform: none; }

/* Brede, gecentreerde variant van de homepagegloed. Het verloop en masker
   lossen binnen de hero op; overflow knipt daardoor geen gekleurde rand. */
.vp-page-glow {
  --vp-page-glow-y: -48px;
  --vp-page-glow-r: 800px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--vp-kaart, #fbf9f4);
}

.vp-page-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle var(--vp-page-glow-r) at 50% var(--vp-page-glow-y),
    rgba(255, 107, 53, .11) 0%,
    rgba(255, 107, 53, .15) 35%,
    rgba(255, 107, 53, .225) 60%,
    rgba(255, 107, 53, .21) 75%,
    rgba(255, 107, 53, .125) 88%,
    rgba(255, 107, 53, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 56%,
    rgba(0, 0, 0, .88) 68%,
    rgba(0, 0, 0, .58) 80%,
    rgba(0, 0, 0, .26) 90%,
    rgba(0, 0, 0, .06) 96%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 56%,
    rgba(0, 0, 0, .88) 68%,
    rgba(0, 0, 0, .58) 80%,
    rgba(0, 0, 0, .26) 90%,
    rgba(0, 0, 0, .06) 96%,
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Zelfde zachte crèmelaag als .hero-bg-circle-small op homepage. Zonder deze
   tweede laag oogt hetzelfde oranje verloop harder en warmer. */
.vp-page-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle 631px at 50% var(--vp-page-glow-y),
    rgba(253, 241, 233, .55) 0%,
    rgba(253, 241, 233, .55) 84%,
    rgba(253, 241, 233, .34) 92%,
    rgba(253, 241, 233, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 56%,
    rgba(0, 0, 0, .88) 68%,
    rgba(0, 0, 0, .58) 80%,
    rgba(0, 0, 0, .26) 90%,
    rgba(0, 0, 0, .06) 96%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 56%,
    rgba(0, 0, 0, .88) 68%,
    rgba(0, 0, 0, .58) 80%,
    rgba(0, 0, 0, .26) 90%,
    rgba(0, 0, 0, .06) 96%,
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.vp-page-glow > * {
  position: relative;
  z-index: 1;
}

/* Route-CSS verborg deze bestaande templategloed. Sitecanon laadt laatst en
   herstelt dezelfde homepagevorm zonder tweede effectlaag. */
.vp-proces-page main .hero-bg-circle,
.vp-rustpagina main .hero-bg-circle {
  display: flex;
}

/* Elke bestaande app-button blijft outline in rust en vult oranje bij hover.
   Dit geldt alleen voor echte links/knoppen binnen .button-div; labels krijgen
   nooit deze vorm. Modifierklassen blijven bestaan voor oudere templates. */
.button-div > .app-button {
  min-height: 56px;
  max-width: 100%;
  padding: 10px 24px 10px 18px;
  border: 2px solid var(--vp-accent-hover, #883815);
  border-radius: var(--_spacing---radius--100px, 100px);
  color: var(--vp-accent-hover, #883815);
  background-color: transparent;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;
  transition: color .175s ease, border-color .175s ease,
    background-color .175s ease;
}

.button-div > .app-button:first-of-type:not(.vp-cta-secondary),
.button-div > .app-button.vp-cta-primary {
  border-color: var(--vp-accent-hover, #883815);
  background-color: transparent;
  color: var(--vp-accent-hover, #883815);
}

.button-div > .app-button:not(:first-of-type):not(.vp-cta-primary),
.button-div > .app-button.vp-cta-secondary {
  border-color: var(--vp-accent-hover, #883815);
  background-color: transparent;
  color: var(--vp-accent-hover, #883815);
}

.button-div > .app-button:first-of-type:not(.vp-cta-secondary):hover,
.button-div > .app-button.vp-cta-primary:hover {
  border-color: var(--vp-accent-hover, #883815);
  background-color: var(--vp-accent-hover, #883815);
  color: #fff;
}

.button-div > .app-button:not(:first-of-type):not(.vp-cta-primary):hover,
.button-div > .app-button.vp-cta-secondary:hover {
  border-color: var(--vp-accent-hover, #883815);
  background-color: var(--vp-accent-hover, #883815);
  color: #fff;
}

.button-div > .app-button:hover .app-icon {
  filter: brightness(0) invert(1) !important;
}

.button-div > .app-button .app-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  transition: filter .175s ease;
}

/* Webflow animeerde tekst en vlak in 300ms, maar liet het icoon in 0ms naar
   brightness(50000%) springen. Deze regels nemen alleen die oude hover over:
   tekst, vlak en icoon gebruiken nu één duur en één easing. */
.button-div > .app-button[data-w-id] {
  border-color: var(--vp-accent-hover, #883815) !important;
  background-color: transparent !important;
  color: var(--vp-accent-hover, #883815) !important;
  transition: color .3s ease, border-color .3s ease,
    background-color .3s ease;
}

.button-div > .app-button[data-w-id]:hover {
  border-color: var(--vp-accent-hover, #883815) !important;
  background-color: var(--vp-accent-hover, #883815) !important;
  color: #fff !important;
}

.button-div > .app-button[data-w-id] .app-icon,
.button[data-w-id] .nav-button-icon {
  transition: filter .3s ease;
}

.button[data-w-id] {
  border-color: var(--color--blue-950) !important;
  background-color: transparent !important;
  color: var(--color--blue-950) !important;
  transition: color .3s ease, border-color .3s ease,
    background-color .3s ease;
}

.button[data-w-id]:hover {
  border-color: var(--color--blue-950) !important;
  background-color: var(--color--blue-950) !important;
  color: #fff !important;
}

.button[data-w-id]:hover .nav-button-icon {
  filter: brightness(0) invert(1) !important;
}

.button-div > .app-button .app-info-div {
  align-items: flex-start;
  text-align: left;
}

.button-div > .app-button:focus-visible {
  outline: 3px solid var(--vp-accent-op-licht, #a5441a);
  outline-offset: 3px;
  box-shadow: none;
}

@media screen and (max-width: 991px) {
  .vp-page-glow {
    --vp-page-glow-y: -144px;
  }
}

@media screen and (max-width: 767px) {
  .vp-page-glow {
    --vp-page-glow-y: -288px;
  }
}

@media screen and (max-width: 479px) {
  .vp-page-glow {
    --vp-page-glow-y: -352px;
  }

  .button-div > .app-button {
    min-height: 52px;
    padding: 8px 18px 8px 14px;
    font-size: 14px;
  }

  .button-div > .app-button .app-icon {
    width: 26px;
    height: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button-div > .app-button,
  .button-div > .app-button .app-icon,
  .button[data-w-id],
  .button[data-w-id] .nav-button-icon {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   De pleister voor de bevroren Webflow-beginstanden stond hier van 4 tot
   5 september 2026: vier beelden met een inline IX2-transform die zonder
   js/webflow.js (weg sinds O1293) permanent op hun beginstand bleven staan.

   Die inline transforms staan er niet meer. borgWebflowBeginstanden() in
   scripts/bouw-ontbrekende-paginas.mjs strijkt ze nu bij elke bouw weg, samen
   met het <style>-blok met de `w-mod-js:not(.w-mod-ix)`-regels dat hetzelfde
   deed voor de drie beelden in de Mail-triage-kaart. Daarmee is O1300 dicht en
   is deze regel overbodig: een `transform: none !important` zou een latere
   animatie op die klassen juist blokkeren.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Hover op de zes Pilo-kaarten van de homepage (5 september 2026).

   Die kaarten hadden een Webflow-hover die met js/webflow.js verdween (O1293),
   dus sindsdien gebeurde er niets meer als je er met de muis op kwam. Terug,
   maar dan als eigen CSS en rustiger dan het origineel.

   Twee dingen tegelijk, allebei klein:
   1. de kaart komt 3px omhoog en het papier wordt een tint lichter;
   2. onder de kaarttitel groeit een accentlijn van links naar rechts.

   Die tweede is het eigen accent: het leest als een leesaccent en niet als een
   knop. Bewust GEEN schaduwsprong, geen schaal en geen `cursor: pointer`: deze
   kaarten zijn geen link, en die drie signalen beloven een klik die er niet is.

   Alleen op de homepage (`#pilo` bestaat nergens anders) en alleen waar een
   muis is (`hover: hover`), zodat een telefoon geen half blijvende hoverstand
   overhoudt na een tik. */
#pilo .feature-card {
  transition: transform .28s ease, background-color .28s ease;
}

#pilo .feature-detail-div h3 {
  position: relative;
  padding-bottom: 6px;
}

#pilo .feature-detail-div h3::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--vp-accent-op-licht, #a5441a);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease;
  content: "";
}

@media (hover: hover) and (pointer: fine) {
  #pilo .feature-card:hover {
    transform: translateY(-3px);
    background-color: var(--color--white);
  }

  #pilo .feature-card:hover .feature-detail-div h3::after,
  #pilo .feature-card:focus-within .feature-detail-div h3::after {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #pilo .feature-card,
  #pilo .feature-detail-div h3::after {
    transition: none;
  }

  #pilo .feature-card:hover {
    transform: none;
  }
}