/* Adaptive Safety Solutions: upgrades on top of the live site (index.html keeps its own styles and scripts).
 * Only four places change; everything else is the live site as it was.
 * - Werkvelden ticker: runs continuously, holds still under the pointer.
 * - Waarom wij: a larger two-column statement that lights up with the scroll; each pillar is linked to its words.
 * - Werkwijze: a dark chapter; polish.js still draws the line and lights the steps. */

:root {
  --forest-deep: #2C2E18;
  --forest-night: #1B1C10;
  --line-dark: rgba(255, 255, 255, .14);
}

/* 2 · Werkvelden: continuous, slower, holds still under the pointer ---------------------------------------------- */

.ticker-track { animation: ticker-loop 42s linear infinite; }
@keyframes ticker-loop { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
/* smaller than the live site's line */
.ticker ul { padding-block: clamp(9px, 1vw, 13px); }
.ticker li { font-size: clamp(13px, 1.15vw, 18px); gap: clamp(12px, 1.2vw, 18px); padding-right: clamp(12px, 1.2vw, 18px); }
.ticker li .tm { height: clamp(8px, .7vw, 11px); }
/* held (upgrade.js): the left fade clears and the arrow appears on the right */
.ticker.has-fade { -webkit-mask-image: none; mask-image: none; }
.ticker-fade { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.ticker.is-held .ticker-fade { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 80%, transparent 94%); mask-image: linear-gradient(90deg, #000 0, #000 80%, transparent 94%); }
.ticker-next {
  position: absolute; right: max(var(--gutter), 16px); top: 50%; z-index: 2; display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
  opacity: 0; transform: translate(8px, -50%); pointer-events: none; transition: opacity .3s ease, transform .4s cubic-bezier(.16, 1, .3, 1), border-color .2s ease;
}
.ticker-next svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ticker.is-held .ticker-next { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.ticker-next:hover { border-color: var(--forest); }
.ticker-next:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; transform: translate3d(-25%, 0, 0); } }

/* 3 · Waarom wij ------------------------------------------------------------------------------------------------- */

.stance { padding-block: clamp(96px, 11vw, 168px) clamp(72px, 9vw, 140px); }
.stance__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px clamp(24px, 4vw, 64px); }
.stance__aside .kicker { position: sticky; top: 112px; }
.stance .statement { max-width: 24ch; font-size: clamp(30px, 4.1vw, 66px); line-height: 1.06; letter-spacing: -.04em; }
.stance .statement .sw { opacity: var(--o, 1); }
.stance .statement span { color: inherit; }
.stance .statement .tone { color: var(--olive); }
.stance .statement .link .sw, .stance .statement .tone .sw { color: inherit; }
.stance__lede { margin-top: clamp(28px, 3.4vw, 48px); }

/* Linking: a pillar under the pointer lights its words; the rest of the statement steps back */
.stance .statement .link { position: relative; transition: color .35s ease; cursor: default; }
.stance .statement .link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .07em; border-radius: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out);
}
.stance .statement .sw { transition: color .35s ease; }
.stance .statement.is-linking .sw { color: #C9CFCB; }
.stance .statement.is-linking .link.is-on .sw { color: var(--forest); }
.stance .statement .link.is-on { color: var(--forest); }
.stance .statement .link.is-on::after { transform: scaleX(1); }

.pillars { list-style: none; margin: clamp(64px, 8vw, 128px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: pillar; }
.pillars li {
  position: relative; display: block; padding: 28px clamp(16px, 2vw, 32px) 12px 0; border-top: 0; counter-increment: pillar;
  transition: background-color .4s ease;
}
.pillars li + li { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--line); }
.pillars li .num {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(28px, 4vw, 64px);
  font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--olive);
}
.pillars li .num::before { content: counter(pillar, decimal-leading-zero); }
.pillars li .num::after {
  content: attr(data-word); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--forest);
  opacity: 0; transform: translateX(-6px); transition: opacity .35s ease, transform .45s var(--ease-out);
}
.pillars li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform-origin: 0 50%; transition: transform 1.2s var(--ease-out), height .3s ease, background-color .3s ease; }
.pillars li + li::after { left: 0; }
html.reveal .pillars li[data-reveal]:not(.is-in)::after { transform: scaleX(0); }
.pillars li.is-on::after { height: 3px; background: var(--forest); }
.pillars li.is-on .num::after { opacity: 1; transform: none; }
.pillars h3 { font-size: clamp(19px, 1.5vw, 24px); line-height: 1.15; letter-spacing: -.02em; transition: color .3s ease; }
.pillars li.is-on h3 { color: var(--forest); }
.pillars p { margin: 12px 0 0; color: var(--graphite); font-size: 15.5px; line-height: 1.55; }
.pillars.is-linking li:not(.is-on) { opacity: .5; }
.pillars li { transition: opacity .35s ease; }
/* polish.css draws its own hover line on the pillars; the link state replaces it */
.pillars li::before { display: none; }

@media (max-width: 1080px) {
  .stance__grid { grid-template-columns: minmax(0, 1fr); }
  .stance__aside .kicker { position: static; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .pillars li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 620px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillars li, .pillars li + li { padding-left: 0; border-left: 0; }
  .pillars li .num { margin-bottom: 16px; }
}

/* 4 · Werkwijze as a dark chapter (polish.js still draws each step's line and sets .is-lit) ----------------------- */

.process {
  color: var(--on-dark);
  background: radial-gradient(90% 120% at 100% 0%, #3A3D1D 0%, transparent 55%), linear-gradient(180deg, #191A12, var(--night));
}
.process .kicker { color: var(--sage); }
.process .lede { color: var(--on-dark-2); }
.process h2 span { color: var(--sage); }
.process .steps li { border-top-color: var(--line-dark); padding-top: 36px; }
.process .steps li::before, html.polish .process .steps.is-scrub li::after { background: var(--sage); }
.process .steps .n {
  display: block; margin-bottom: 8px; font-family: var(--sans); font-size: clamp(56px, 6.4vw, 108px); font-weight: 600;
  line-height: .82; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .3);
  transition: color .6s ease, -webkit-text-stroke-color .6s ease;
}
html.polish .process .steps.is-scrub li:not(.is-lit) .n { color: transparent; }
.process .steps li.is-lit .n, html:not(.polish) .process .steps .n { color: var(--sage); -webkit-text-stroke-color: var(--sage); }
.process .steps h3 { color: var(--on-dark); font-size: clamp(19px, 1.6vw, 24px); }
.process .steps p { color: var(--on-dark-2); }

/* 5 · Diensten: polish on the live layout (list, photo, detail). upgrade.js adds the rail and the count ------------ */

/* One marker travels a progress rail beside the list, instead of a dot per name */
.svc-rail { position: absolute; z-index: 1; width: 1px; background: var(--line); pointer-events: none; }
.svc-rail__fill { position: absolute; inset: 0; background: var(--forest); transform-origin: 50% 0; transform: scaleY(0); }
.svc-rail__dot {
  position: absolute; left: 50%; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--forest); box-shadow: 0 0 0 4px var(--paper); transition: transform .7s var(--ease-out);
}
.sectors.has-rail .sector__button::before { display: none; }

/* The active number, large and outlined, above the list */
.svc-count { position: absolute; z-index: 1; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; transform: translateY(-100%); }
.svc-count__num { display: block; overflow: hidden; }
.svc-count__num b {
  display: block; padding: .12em .03em .03em 0; font-size: clamp(64px, 6vw, 104px); font-weight: 600; line-height: .84; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1px var(--forest);
}
.svc-count__num b.is-in { animation: count-in .7s var(--ease-out) both; }
.sectors[data-dir="prev"] .svc-count__num b.is-in { animation-name: count-in-prev; }
@keyframes count-in { from { transform: translateY(70%); opacity: 0; } }
@keyframes count-in-prev { from { transform: translateY(-70%); opacity: 0; } }
.svc-count small { margin-bottom: .55em; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--quiet); }

/* Names: the active one and the one under the pointer step forward */
.sectors.is-enhanced .sector__button .nm { display: inline-block; transition: transform .5s var(--ease-out); }
.sectors.is-enhanced .sector.is-active .sector__button .nm { transform: translateX(6px); }
@media (hover: hover) { .sectors.is-enhanced .sector__button:hover .nm { transform: translateX(6px); } }

/* The detail column arrives line by line */
.sectors.is-enhanced .sector__details > * { opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease; }
.sectors.is-enhanced .sector.is-active .sector__details > * { opacity: 1; transform: none; transition: opacity .6s ease var(--dd, .25s), transform .9s var(--ease-out) var(--dd, .25s); }
.sectors.is-enhanced .sector__details > :nth-child(1) { --dd: .25s; }
.sectors.is-enhanced .sector__details > :nth-child(2) { --dd: .32s; }
.sectors.is-enhanced .sector__details > :nth-child(3) { --dd: .39s; }
.sectors.is-enhanced .sector__details > :nth-child(4) { --dd: .46s; }
.sectors.is-enhanced .sector__details > :nth-child(5) { --dd: .53s; }

/* Photos still to come: a tonal field with the mark and an honest label */
.sector__media--ph { background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--forest) 75%, var(--tone, #2A2C1E)) 0%, color-mix(in srgb, var(--forest-deep) 60%, var(--tone, #2A2C1E)) 75%); }
.sector__media--ph svg { color: rgba(255, 255, 255, .1); }
.sector__media--ph::after {
  content: "Foto volgt"; position: absolute; left: 18px; bottom: 16px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55);
}

@media (prefers-reduced-motion: reduce) {
  .svc-rail__dot, .sectors.is-enhanced .sector__button .nm, .sectors.is-enhanced .sector__details > * { transition: none !important; }
  .svc-count__num b.is-in { animation: none; }
}

/* The big count above the list carries the number: the small ones beside the names go (the phone list keeps them) */
.sectors.is-enhanced .sector__button .n { display: none; }

/* 6 · Phones ---------------------------------------------------------------------------------------------------- */

/* Diensten as a list: room before the dark Werkwijze chapter */
.sectors:not(.is-enhanced) .sectors__deck { padding-bottom: clamp(80px, 18vw, 128px); }


/* Het team on phones: an endless straight row that follows the finger (team-carousel.js builds it).
   The centred card is framed by the hero's viewfinder corners; the caption under it names the person.
   Desktop keeps the live panels. */
.team-c { display: none; }
@media (max-width: 900px) {
  .team.has-carousel .sq { display: none; }
  .team-c { --cw: min(62vw, 270px); display: grid; gap: 18px; margin-inline: calc(var(--gutter) * -1); }
  .team-c__stage {
    position: relative; height: calc(var(--cw) * 4 / 3 + 36px); overflow: hidden;
    touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab; outline: none;
  }
  .team-c__stage:active { cursor: grabbing; }
  .team-c__stage:focus-visible .team-c__finder > i { border-color: var(--forest); }
  .team-c__row { position: absolute; inset: 18px 0; }
  .team-c__slot {
    position: absolute; top: 0; left: 50%; width: var(--cw); margin-left: calc(var(--cw) / -2); aspect-ratio: 3 / 4;
    will-change: transform, opacity;
  }
  .team-c__card {
    position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px;
    border-radius: 18px; overflow: hidden; color: var(--on-dark);
    background: radial-gradient(120% 85% at 50% 30%, color-mix(in srgb, var(--tone, var(--forest)) 78%, #fff), var(--tone, var(--forest)) 72%);
    box-shadow: 0 16px 34px -20px rgba(14, 15, 16, .55);
  }
  .team-c__card::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(0deg, rgba(14, 15, 16, .45), transparent); pointer-events: none; }
  .team-c__art { position: absolute; top: 44%; left: 50%; width: 44%; transform: translate(-50%, -50%); color: rgba(255, 255, 255, .2); }
  .team-c__art svg { width: 100%; height: auto; aspect-ratio: 210.5 / 142.9; }
  .team-c__num { position: relative; z-index: 1; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--sage); }
  .team-c__card--you { background: var(--paper); color: var(--ink); border: 1.5px dashed rgba(29, 31, 33, .28); box-shadow: none; flex-direction: column; justify-content: space-between; align-items: flex-start; }
  .team-c__card--you::after { display: none; }
  .team-c__card--you .team-c__num { color: var(--olive); }
  .team-c__plus { width: 52px; height: 52px; border-radius: 50%; background: var(--forest); color: var(--sage); display: grid; place-items: center; font-size: 28px; line-height: 1; }

  /* the viewfinder around the centre slot (still; the row moves under it) */
  .team-c__finder {
    position: absolute; top: 8px; left: 50%; width: calc(var(--cw) + 20px); margin-left: calc(var(--cw) / -2 - 10px);
    aspect-ratio: auto; height: calc(var(--cw) * 4 / 3 + 20px); pointer-events: none;
  }
  .team-c__finder > i { position: absolute; width: 22px; height: 22px; border: 0 solid var(--olive); transition: border-color .3s ease; }
  .team-c__finder > i:nth-child(1) { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; }
  .team-c__finder > i:nth-child(2) { top: 0; right: 0; border-width: 1.5px 1.5px 0 0; }
  .team-c__finder > i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1.5px 1.5px; }
  .team-c__finder > i:nth-child(4) { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; }

  .team-c__caption { display: grid; justify-items: center; gap: 4px; padding-inline: var(--gutter); text-align: center; min-height: 92px; }
  .team-c__caption p { margin: 0; }
  .team-c__name { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
  .team-c__role { font-size: 15px; color: var(--graphite); }
  .team-c__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 600; color: var(--forest); text-decoration: none; }
  .team-c__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .team-c__count { margin-top: 10px !important; font-family: var(--mono); font-size: 12.5px; color: var(--quiet); }
  .team-c__count b { color: var(--ink); font-weight: 600; }
  .team-c__hint { margin: -6px 0 0; text-align: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); }

  /* the caption changes with a short rise */
  .team-c.is-swap .team-c__name, .team-c.is-swap .team-c__role { animation: team-c-swap .45s var(--ease-out) both; }
  .team-c.is-swap .team-c__role { animation-delay: .04s; }
  @keyframes team-c-swap { from { opacity: 0; transform: translateY(8px); } }

  /* first time in view: the cards rise into the row, the centre first */
  .team-c.is-waiting .team-c__card { opacity: 0; transform: translateY(60px); }
  .team-c.is-entering .team-c__card { animation: team-c-rise 1s var(--ease-out) both; animation-delay: calc(var(--k, 0) * 90ms); }
  @keyframes team-c-rise { from { opacity: 0; transform: translateY(60px); } }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .team-c.is-swap .team-c__name, .team-c.is-swap .team-c__role, .team-c.is-entering .team-c__card { animation: none; }
}

/* Het team on desktop: the live site's panels (team.js, team.css), refined. The open panel reads like a caption,
   number over name over role; the narrow ones keep their number, so the row reads as a queue; "Foto volgt" stays
   honest until the portraits are there. */
@media (min-width: 901px) {
  .sq.is-ready .sq__item:not(.sq__item--you) .sq__tag {
    display: grid; grid-template-columns: auto; justify-items: start; row-gap: 6px;
    padding: 96px clamp(24px, 2.4vw, 36px) clamp(22px, 2.2vw, 32px);
    background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, .18) 55%, transparent);
    opacity: 1;
  }
  .sq.is-ready .sq__item:not(.sq__item--you) .sq__name {
    font-size: clamp(22px, 2vw, 30px); font-weight: 600; letter-spacing: -.025em; line-height: 1.05;
  }
  .sq.is-ready .sq__item:not(.sq__item--you) .sq__role { font-size: 15px; max-width: 100%; }
  .sq.is-ready .sq__item:not(.sq__item--you) .sq__tag small { letter-spacing: .06em; }

  /* narrow: only the number, the name and role come in once the panel has opened */
  .sq.is-ready .sq__item:not(.sq__item--you) .sq__name,
  .sq.is-ready .sq__item:not(.sq__item--you) .sq__role {
    opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;
  }
  .sq.is-ready .sq__item.is-open .sq__name,
  .sq.is-ready .sq__item.is-open .sq__role {
    opacity: 1; transform: none;
    transition: opacity .6s ease calc(var(--sq-ms) * .45), transform .9s var(--ease-out) calc(var(--sq-ms) * .45);
  }
  .sq.is-ready .sq__item.is-open .sq__role { transition-delay: calc(var(--sq-ms) * .52); }
  .sq.is-ready .sq__item:not(.sq__item--you):not(.is-open) .sq__tag {
    padding-inline: 0; justify-items: center; background: none;
  }
  .sq.is-ready .sq__item:not(.sq__item--you):not(.is-open) .sq__tag small { color: rgba(205, 208, 143, .75); }

  /* the honest placeholder, top right of the open panel */
  .sq.is-ready .sq__item:not(.sq__item--you) .sq__card::after {
    content: "Foto volgt"; position: absolute; top: 20px; right: 20px; z-index: 1;
    padding: 7px 12px 5px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 999px;
    font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255, 255, 255, .78); opacity: 0; transition: opacity .3s ease;
  }
  .sq.is-ready .sq__item.is-open:not(.sq__item--you) .sq__card::after {
    opacity: 1; transition: opacity .6s ease calc(var(--sq-ms) * .5);
  }

  /* the mark breathes up a touch as its panel opens */
  .sq.is-ready .sq__mark { transition: opacity .6s ease, transform var(--sq-ms) var(--ease-out); transform: scale(.92); }
  .sq.is-ready .is-open .sq__mark { transform: none; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .sq.is-ready .sq__name, .sq.is-ready .sq__role, .sq.is-ready .sq__card::after, .sq.is-ready .sq__mark { transition: none !important; }
}


/* 7 · Quality pass (build-awwwards-quality-sites) ----------------------------------------------------------------- */

/* The poster is the hero's still first frame: shown until the film plays, and without JavaScript */
.hero-media video { opacity: 1; }

/* A way to contact from the first screen: the header's button no longer waits for the scroll (phones keep the
   floating button) */
@media (min-width: 621px) {
  .site-header:not(.is-solid) .nav-end .btn { opacity: 1; visibility: visible; pointer-events: auto; }
}

/* Werkvelden: tap, click, Enter or Space holds the line still (WCAG 2.2.2) */
[data-ticker-hold] { cursor: pointer; }
[data-ticker-hold]:focus-visible { outline: 2px solid var(--forest); outline-offset: -4px; }
.ticker.is-focus { outline: 2px solid var(--forest); outline-offset: -4px; }


/* Hero headline: 15% smaller than the live site's (upgrade.js lets it dissolve after 10 seconds) */
.hero h1 { font-size: clamp(37px, min(6.3vw, 9vh), 95px); max-width: 14ch; }
.hero-fx-word { display: inline-block; }

/* Smooth on every device, Safari on a Mac included ------------------------------------------------------------- */
/* The side menu and the language switch are fixed over the playing film and over everything while scrolling; a
   backdrop blur there is redrawn for every frame of both, which is what made Safari stutter (and the film's sound
   with it). They get the solid fills the live site already uses on phones and tablets. */
.dock a, .lang { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.dock a:not([aria-current]) { background: rgba(255, 255, 255, .94); }
.dock.on-dark a:not([aria-current]) { background: rgba(32, 34, 36, .82); }
.site-header:not(.is-solid) .lang { background: rgba(14, 15, 16, .34); }
/* Waarom wij's peek: only the statement blurs (not the whole section with its pillars), so the blur that clears
   during the first scroll covers a fraction of the area */
.stance > .wrap { transition: opacity .9s var(--ease-out); }
.stance.is-peek > .wrap { filter: none; }
.stance > .wrap .stance__grid { transition: filter .9s var(--ease-out); }
.stance.is-peek > .wrap .stance__grid { filter: blur(7px); }

/* The English page (en/) shares these styles */
html:lang(en) .sector__media--ph::after,
html:lang(en) .sq.is-ready .sq__item:not(.sq__item--you) .sq__card::after { content: "Photo to follow"; }