/* --- from the design source --- */

body{margin:0;background:#fafafa}
[data-l="nl"]{display:none}
[data-lang="nl"] [data-l="nl"]{display:inline}
[data-lang="nl"] [data-l="en"]{display:none}
a{color:#010504}
.lo-rv{opacity:0;transform:translate3d(0,16px,0)}
.lo-rv-in{opacity:1;transform:none;transition:opacity 620ms cubic-bezier(0.2,0,0.38,0.9),transform 620ms cubic-bezier(0.2,0,0.38,0.9)}
@media (prefers-reduced-motion: reduce){.lo-rv,.lo-rv-in{opacity:1;transform:none;transition:none}}
a:hover{color:#00a36d}
@media (max-width:1079px){
[data-r="g5"],[data-r="g4"],[data-r="g3"]{grid-template-columns:repeat(2,1fr)!important}
[data-r="g2"]{grid-template-columns:1fr!important;gap:40px!important}
[data-r="steps"]{grid-template-columns:1fr!important;gap:0!important}
[data-r="steps"]>div{padding:20px 0 24px!important}
[data-r="model"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;column-gap:24px!important}
[data-r="ctxviz"]{position:static!important}
[data-r="cinecopy"]{max-width:min(44ch,60vw)!important}
main>section{padding-left:20px!important;padding-right:20px!important}
}
@media (max-width:899px){
[data-r="nav"]{display:none!important}
[data-r="hdrcta"]{display:none!important}
[data-r="burger"]{display:flex!important}
[data-r="drawer"]{display:flex!important}
[data-r="dec"]{left:20px!important;right:20px!important;width:auto!important;top:auto!important;bottom:72px!important;max-height:none!important;overflow:visible!important}
[data-r="dec"] [data-r="runners"]{display:none!important}
[data-r="cinecopy"]{max-width:none!important}
[data-r="cinestage"]{align-items:flex-start!important;padding-top:88px!important}
[data-r="veil"]{background:linear-gradient(180deg,rgba(1,5,4,.97) 0%,rgba(1,5,4,.9) 30%,rgba(1,5,4,.35) 46%,rgba(1,5,4,0) 62%)!important}
[data-r="cinecopy"] h2{font-size:30px!important;line-height:1.12!important;min-height:0!important}
[data-r="cinecopy"] p{font-size:15px!important;line-height:22px!important}
[data-r="cinecopy"]{gap:16px!important}
[data-r="railwrap"]{padding:0 20px 20px!important}
[data-r="rail"]{gap:0!important;justify-content:space-between!important;font-size:9px!important;letter-spacing:0.10em!important;overflow:hidden!important}
[data-r="rail"]>span{white-space:nowrap!important}
}
@media (max-width:719px){
[data-r="g5"],[data-r="g4"],[data-r="g3"]{grid-template-columns:1fr!important}
main>section{padding-top:72px!important;padding-bottom:72px!important}
[data-r="funnel"]{grid-template-columns:76px minmax(0,1fr)!important;gap:16px!important}
[data-r="cmp"]{gap:12px!important}
[data-r="ev"]{grid-template-columns:18px minmax(0,1fr) 40px!important;gap:12px!important}
[data-r="ev"]>span:last-child{display:none!important}
[data-r="funnel"]{grid-template-columns:76px minmax(0,1fr)!important;gap:16px!important}
[data-r="pin"]{height:460vh!important}
[data-r="hero"]{height:auto!important;min-height:88vh!important}
[data-r="srcrow"]{flex-direction:column!important;gap:2px!important}
[data-r="model"]{column-gap:16px!important}
}
@keyframes lo-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.lo-pin-wrap{background:transparent!important;border:0!important}
.lo-pin{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--lo-layer-01);border:2px solid var(--c);box-shadow:0 1px 4px rgba(10,10,10,.35);cursor:pointer;transition:transform var(--lo-duration-fast-02) var(--lo-easing-standard)}
.lo-pin:hover{transform:scale(1.12)}
.lo-pin__dot{width:10px;height:10px;border-radius:50%;background:var(--c)}
.lo-pin__plan{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--lo-green-50);border:2px solid var(--lo-layer-01)}
.lo-pin--sel{transform:scale(1.18);box-shadow:0 0 0 4px rgba(6,229,153,.28),0 1px 4px rgba(10,10,10,.35)}
.leaflet-container{background:var(--lo-layer-02);font-family:var(--lo-font-sans)}
.leaflet-control-zoom a{border-radius:0!important;color:var(--lo-text-primary)!important;background:var(--lo-layer-01)!important;border-color:var(--lo-border-subtle)!important}
.leaflet-control-attribution{font:var(--lo-type-helper-01);background:var(--lo-layer-01)!important;color:var(--lo-text-helper)!important}
.leaflet-control-attribution a{color:var(--lo-text-secondary)!important}


/* --- hover states lifted from style-hover attributes --- */

.lo-h1:hover{color:var(--lo-gray-10)}
.lo-h2:hover{background:var(--lo-gray-95);color:var(--lo-gray-10)}
.lo-h3:hover{border-color:var(--lo-green-50)}
.lo-h4:hover{background:var(--lo-gray-20);border-color:var(--lo-gray-100)}
.lo-h5:hover{color:var(--lo-gray-40)}
.lo-h6:hover{background:rgba(250,250,250,.05)}

/* --- site additions --- */

/* ============================================================
   Site additions: design-system components reimplemented as CSS,
   runtime gates, and the accessibility states the DS bundle omits.
   ============================================================ */

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

/* Blocks the design gated on runtime state: present in the DOM, hidden until
   the script opens them. display:contents keeps the child's own layout intact. */
[data-when] { display: contents; }
[data-when]:not(.is-open) { display: none; }

/* Skip link ------------------------------------------------------------- */
.lo-skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--lo-green-50); color: var(--lo-gray-100);
  font: var(--lo-type-body-01); padding: 10px 16px;
  border-radius: var(--lo-radius-sm); text-decoration: none;
  transition: top var(--lo-duration-fast-02) var(--lo-easing-standard);
}
.lo-skip:focus { top: 12px; color: var(--lo-gray-100); }

/* Focus visibility. The DS bundle ships no focus styles at all; without this
   the whole site is unusable by keyboard. Two rings so it reads on either ground. */
:focus-visible {
  outline: 2px solid var(--lo-green-50);
  outline-offset: 2px;
  border-radius: var(--lo-radius-sm);
}
.lo-btn--accent:focus-visible { outline-color: var(--lo-gray-100); outline-offset: 3px; }

/* Icons ----------------------------------------------------------------- */
.lo-ico { display: block; flex: 0 0 auto; }

/* Button ---------------------------------------------------------------- */
.lo-btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--lo-spacing-06);
  font: 400 14px/18px var(--lo-font-sans);
  text-align: left; white-space: nowrap; text-decoration: none;
  cursor: pointer; border-radius: var(--lo-radius-sm);
  border: 1px solid transparent; width: auto;
  transition: background var(--lo-duration-fast-02) var(--lo-easing-standard),
              color var(--lo-duration-fast-02) var(--lo-easing-standard);
}
.lo-btn--sm { height: 32px; padding: 0 12px; }
.lo-btn--md { height: 40px; padding: 0 16px; }
.lo-btn--lg { height: 48px; padding: 0 16px; }
.lo-btn--xl { height: 64px; padding: 0 16px; font: 400 16px/22px var(--lo-font-sans); }
.lo-btn--full { width: 100%; }

.lo-btn--primary { background: var(--lo-button-primary); color: var(--lo-text-inverse); }
.lo-btn--primary:hover { background: var(--lo-button-primary-hover); color: var(--lo-text-inverse); }

.lo-btn--accent { background: var(--lo-button-accent); color: var(--lo-text-on-color); }
.lo-btn--accent:hover { background: var(--lo-button-accent-hover); color: var(--lo-text-on-color); }

.lo-btn--secondary { background: var(--lo-button-secondary); color: var(--lo-text-inverse); }
.lo-btn--secondary:hover { background: var(--lo-button-secondary-hover); }

.lo-btn--tertiary {
  background: transparent; color: var(--lo-button-tertiary);
  border: 1px solid var(--lo-button-tertiary);
}
.lo-btn--tertiary:hover { background: var(--lo-button-tertiary); color: var(--lo-text-inverse); }

.lo-btn--ghost { background: transparent; color: var(--lo-text-primary); }
.lo-btn--ghost:hover { background: var(--lo-layer-hover); }

/* Tag ------------------------------------------------------------------- */
.lo-tag {
  display: inline-flex; align-items: center; gap: var(--lo-spacing-03);
  height: 24px; padding: 0 8px;
  border: 1px solid transparent; border-radius: var(--lo-radius-pill);
  font: var(--lo-type-label-01); white-space: nowrap;
}
.lo-tag--sm { height: 20px; }
.lo-tag--neutral { background: var(--lo-layer-02); color: var(--lo-text-primary); }
.lo-tag--green   { background: var(--lo-support-success-bg); color: var(--lo-text-success); }
.lo-tag--blue    { background: var(--lo-support-info-bg); color: var(--lo-text-info); }
.lo-tag--red     { background: var(--lo-support-error-bg); color: var(--lo-text-error); }
.lo-tag--amber   { background: var(--lo-support-warning-bg); color: var(--lo-text-warning); }
.lo-tag--inverse { background: var(--lo-background-inverse); color: var(--lo-text-inverse); }
.lo-tag--outline {
  background: transparent; color: var(--lo-text-secondary);
  border-color: var(--lo-border-subtle-02);
}

/* ScoreBar -------------------------------------------------------------- */
.lo-score { display: inline-flex; align-items: center; gap: var(--lo-spacing-04); }
.lo-score__track {
  display: inline-block; height: 6px; background: var(--lo-layer-03);
  border-radius: var(--lo-radius-sm); overflow: hidden;
}
.lo-score__fill { display: block; height: 100%; background: var(--lo-green-50); }
.lo-score__fill--split { background: var(--lo-support-warning); }
.lo-score__fill--conflict { background: var(--lo-support-error); }
.lo-score__val {
  font: var(--lo-type-num-02); font-family: var(--lo-font-numeric);
  font-variant-numeric: tabular-nums; color: var(--lo-text-primary);
}

/* Form fields ----------------------------------------------------------- */
.lo-field { display: flex; flex-direction: column; gap: var(--lo-spacing-03); }
.lo-field__label {
  font: var(--lo-type-label-01);
  letter-spacing: var(--lo-letter-spacing-label);
  color: var(--lo-text-secondary);
}
.lo-field__control {
  width: 100%; background: var(--lo-field-01);
  border: none; border-bottom: 1px solid var(--lo-border-strong);
  border-radius: var(--lo-radius-sm) var(--lo-radius-sm) 0 0;
  color: var(--lo-text-primary); font: var(--lo-type-body-01);
  padding: 0 var(--lo-spacing-05);
  transition: border-color var(--lo-duration-fast-02) var(--lo-easing-standard);
}
.lo-field__control--sm { height: 32px; }
.lo-field__control--md { height: 40px; }
.lo-field__control--lg { height: 48px; }
.lo-field__control--area {
  height: auto; resize: vertical;
  padding: var(--lo-spacing-04) var(--lo-spacing-05);
}
.lo-field__control:focus-visible { border-bottom-color: var(--lo-green-50); }
.lo-field__control::placeholder { color: var(--lo-text-placeholder); }
.lo-field__wrap { position: relative; }
.lo-field__select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px; cursor: pointer;
}
.lo-field__caret {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--lo-icon-primary); display: flex;
}
.lo-field__helper { font: var(--lo-type-helper-01); color: var(--lo-text-helper); }
.lo-field__error { font: var(--lo-type-helper-01); color: var(--lo-text-error); }
.lo-field__control[aria-invalid="true"] { border-bottom-color: var(--lo-support-error); }

/* Accordion ------------------------------------------------------------- */
.lo-acc { border-top: 1px solid var(--lo-border-subtle); }
.lo-acc__panel { border-bottom: 1px solid var(--lo-border-subtle); }
.lo-acc__trigger {
  display: flex; align-items: center; gap: var(--lo-spacing-05);
  width: 100%; min-height: 48px;
  padding: var(--lo-spacing-04) var(--lo-spacing-05);
  border: none; background: transparent; cursor: pointer;
  text-align: left; font: var(--lo-type-body-02);
  color: var(--lo-text-primary);
  transition: background var(--lo-duration-fast-02) var(--lo-easing-standard);
}
.lo-acc__trigger:hover { background: var(--lo-layer-hover); }
.lo-acc__chev {
  transition: transform var(--lo-duration-fast-02) var(--lo-easing-standard);
}
.lo-acc__trigger[aria-expanded="true"] .lo-acc__chev { transform: rotate(90deg); }
.lo-acc__title { flex: 1; }
.lo-acc__body {
  padding: 0 var(--lo-spacing-05) var(--lo-spacing-06) 48px;
  font: var(--lo-type-body-long-02); color: var(--lo-text-secondary);
  max-width: 75ch;
}

/* Hero shader ----------------------------------------------------------- */
.lo-shader { display: block; width: 100%; height: 100%; }

/* Image slots ----------------------------------------------------------- */
.lo-slot-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lo-shot { display: block; width: 100%; height: auto; }
.lo-slot {
  display: flex; align-items: flex-end; width: 100%; height: 100%;
  min-height: 240px; padding: 24px;
  background-color: var(--lo-gray-95);
  background-image:
    linear-gradient(135deg, rgba(6, 229, 153, .07), transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(250, 250, 250, .10) 1.2px, transparent 0);
  background-size: auto, 24px 24px;
  border: 1px solid var(--lo-gray-90);
}
.lo-slot__label {
  font: var(--lo-type-helper-01); color: var(--lo-gray-50);
  max-width: 46ch; text-wrap: pretty;
}

/* Header nav ------------------------------------------------------------
   Six items plus a CTA get tight between the design's 900px and 1080px
   breakpoints; without this the labels wrap onto two lines. */
[data-r="nav"] a { white-space: nowrap; }
@media (max-width: 1079px) {
  [data-r="nav"] { gap: 16px !important; }
}

/* Motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .lo-shader { display: none; }
  html { scroll-behavior: auto; }
}

/* Print ----------------------------------------------------------------- */
@media print {
  .lo-shader, [data-r="burger"], [data-r="drawer"] { display: none !important; }
  [data-l="nl"] { display: none !important; }
}

/* The burger button is 44px so it stays a comfortable tap target, but the
   design draws the language toggle at 32px — sized for a desktop header where
   no burger sits beside it. Where the two do appear together, match them. */
@media (max-width: 899px) {
  [data-action="toggleLang"] {
    height: 44px !important;
  }
}

/* The hero shader is sized for the desktop composition, where it fills the
   space beside the headline. On a phone that box is a narrow strip and the
   field reads as noise rather than as movement, so it grows by 40% — the box
   itself, not a transform, because the canvas renders at whatever size its
   element is and scaling it up would only soften it.
   Width 84% -> 117.6% and height 112% -> 156.8%, both around the same centre. */
@media (max-width: 899px) {
  .lo-hero-shader {
    top: -28.4% !important;
    bottom: -28.4% !important;
    left: 9.2% !important;
    right: -26.8% !important;
  }
}

/* The shader reads darker on a phone than on a desktop at the same opacity:
   the copy runs across it there rather than beside it, so the same brightness
   costs more contrast. Mobile keeps the inline 0.65; desktop gets some of it
   back. */
@media (min-width: 900px) {
  .lo-shader {
    opacity: 0.7 !important;
  }
}

/* The hero centres its copy in the section, which is geometrically right and
   optically wrong: the sticky header sits directly above and the eye counts it
   as part of the top, so the block reads low. Measured at 375x812 it sat 41px
   below the centre of the viewport — half the 65px header plus half the part
   of the section that falls below the fold. The extra bottom margin lifts it
   by half of itself, putting it back on the optical centre. Only on mobile;
   on desktop the header is a smaller share of the frame. */
@media (max-width: 899px) {
  .lo-hero-copy {
    /* The element carries an inline `margin: 0 auto`, which a stylesheet cannot
       outrank without this. */
    margin-bottom: 82px !important;
  }
}


/* --- legal pages --- */


.lo-legal h2{margin:56px 0 16px;font:var(--lo-type-heading-04);letter-spacing:-0.015em;color:var(--lo-gray-100)}
.lo-legal h3{margin:32px 0 12px;font:var(--lo-type-heading-03);color:var(--lo-gray-100)}
.lo-legal p{margin:0 0 16px;font:var(--lo-type-body-long-02);color:var(--lo-gray-70);max-width:68ch}
.lo-legal ul,.lo-legal ol{margin:0 0 16px;padding-left:20px;font:var(--lo-type-body-long-02);color:var(--lo-gray-70);max-width:68ch}
.lo-legal li{margin:0 0 8px}
.lo-legal strong{color:var(--lo-gray-100);font-weight:500}
.lo-legal a{color:var(--lo-green-70);text-decoration:underline;text-underline-offset:2px}
.lo-legal a:hover{color:var(--lo-gray-100)}
.lo-legal table{border-collapse:collapse;margin:0 0 24px;font:var(--lo-type-body-01);color:var(--lo-gray-70)}
.lo-legal th,.lo-legal td{text-align:left;padding:10px 24px 10px 0;border-bottom:1px solid var(--lo-gray-30);vertical-align:top}
.lo-legal th{font-weight:500;color:var(--lo-gray-100)}
.lo-legal h2+div>p:first-child{margin-top:0}