/* =============================================================================
   leftway-theme.css — drop-in huisstijl voor de Leftway-applicaties
   -----------------------------------------------------------------------------
   Toepassen op:  scanner.leagl.be · docscanner.leagl.be
                  docscanner.leagl.be/bestuurderscheck
                  intake.leagl.be · platform.leagl.be

   Gebruik:  laad dit bestand ALS LAATSTE, na de bestaande stylesheets.
             <link rel="stylesheet" href="/css/leftway-theme.css">
             Sectie 10 neutraliseert de oude LEAGL-stijl.

   Bronnen:  huisstijlgids LEAGL x Leftway (Sayhey, maart 2026)
             en live gemeten tokens op www.leagl.be (2 augustus 2026)

   LET OP — conflict tussen twee bronnen:
     De huisstijlgids schrijft Gibson (koppen) + Roboto (body) voor.
     www.leagl.be draait feitelijk op Figtree 800 + Metropolis.
     Dit bestand volgt de huisstijlgids, met Inter als Gibson-vervanger.
     Wil je gelijklopen met leagl.be, wissel dan alleen --lw-font-display
     naar 'Figtree'. Eén regel, verder verandert er niets.
   ========================================================================== */

/* ── 1. TOKENS ──────────────────────────────────────────────────────────── */
:root{
  /* merk — exacte waarden, nooit benaderen */
  --lw-deep:#222035;          /* Deep Purple   — tekst, donkere vlakken     */
  --lw-soft:#D8D3EF;          /* Soft Purple   — lichte vlakken, tekst op donker */
  --lw-bright:#5245AD;        /* Bright Purple — CTA, links, accenten       */
  --lw-white:#FFFFFF;

  /* afgeleiden — enkel voor UI-staten, geen nieuwe merkkleuren */
  --lw-bright-hover:#6455C4;
  --lw-deep-2:#2C2942;
  --lw-bg:#F7F6F5;            /* gelijk aan de achtergrond van leagl.be     */
  --lw-panel:#FAFAFA;
  --lw-ink-70:rgba(34,32,53,.70);
  --lw-ink-45:rgba(34,32,53,.45);
  --lw-rule:rgba(34,32,53,.14);
  --lw-on-dark-70:rgba(255,255,255,.70);
  --lw-on-dark-12:rgba(255,255,255,.12);

  /* statuskleuren — alleen voor scanresultaten, niet voor merkuitingen */
  --lw-risk-critical:#C9463F;
  --lw-risk-high:var(--lw-bright);
  --lw-risk-medium:#8B7FD6;
  --lw-risk-ok:var(--lw-soft);

  /* typografie */
  --lw-font-display:'Inter',system-ui,-apple-system,sans-serif;  /* Gibson-vervanger */
  --lw-font-body:'Roboto',system-ui,-apple-system,sans-serif;

  --lw-h1:clamp(34px,4.6vw,64px);
  --lw-h2:clamp(26px,3.2vw,44px);
  --lw-h3:clamp(19px,1.7vw,24px);
  --lw-body:16px;
  --lw-small:13.5px;
  --lw-caption:12px;
  --lw-lh-tight:1.05;         /* koppen  */
  --lw-lh-body:1.62;          /* lopende tekst */

  /* ritme — 8px-basis uit de huisstijlgids */
  --lw-1:8px;  --lw-2:16px; --lw-3:24px; --lw-4:32px;
  --lw-6:48px; --lw-8:64px; --lw-12:96px;
  --lw-container:1280px;
  --lw-gutter:clamp(20px,4vw,48px);

  /* vorm — architecturaal, niet rond */
  --lw-radius:6px;
  --lw-radius-lg:10px;
  --lw-radius-hero:0px;

  --lw-shadow:0 24px 60px -34px rgba(34,32,53,.55);
  --lw-shadow-lg:0 40px 90px -50px rgba(34,32,53,.75);

  /* beweging — de linkerbeweging: alles komt van rechts, landt links */
  --lw-ease:cubic-bezier(.16,1,.3,1);
  --lw-ease-left:cubic-bezier(.22,1.14,.36,1);
  --lw-dur:.55s;
}

/* ── 2. BASIS ───────────────────────────────────────────────────────────── */
.lw *,.lw *::before,.lw *::after{box-sizing:border-box}
.lw, .lw-scope{
  font-family:var(--lw-font-body);
  font-size:var(--lw-body);
  line-height:var(--lw-lh-body);
  color:var(--lw-deep);
  background:var(--lw-bg);
  -webkit-font-smoothing:antialiased;
}
.lw h1,.lw h2,.lw h3,.lw h4{
  font-family:var(--lw-font-display);
  font-weight:600;
  line-height:var(--lw-lh-tight);
  letter-spacing:-.02em;
  color:inherit;
}
.lw h1{font-size:var(--lw-h1)}
.lw h2{font-size:var(--lw-h2)}
.lw h3{font-size:var(--lw-h3)}
.lw p{max-width:68ch}                    /* 6-10 woorden per regel, huisstijlgids */
.lw a{color:var(--lw-bright);text-decoration:none}
.lw a:hover{color:var(--lw-deep)}
.lw ::selection{background:var(--lw-soft);color:var(--lw-deep)}
.lw-container{max-width:var(--lw-container);margin:0 auto;padding:0 var(--lw-gutter)}
.lw-section{padding:var(--lw-12) 0}
@media(max-width:760px){.lw-section{padding:var(--lw-8) 0}}

/* vlakritme: wit / soft / deep — nooit andere kleuren */
.lw-surface--light{background:var(--lw-bg);color:var(--lw-deep)}
.lw-surface--soft {background:var(--lw-soft);color:var(--lw-deep)}
.lw-surface--dark {background:var(--lw-deep);color:var(--lw-white)}
.lw-surface--dark h1,.lw-surface--dark h2,.lw-surface--dark h3{color:var(--lw-white)}
.lw-surface--dark p{color:var(--lw-on-dark-70)}

/* het accentwoord: "left" altijd in Bright Purple */
.lw-accent{color:var(--lw-bright)}
.lw-surface--dark .lw-accent{color:#9B8EF0}   /* leesbaar op Deep Purple */

/* ── 3. BEELDMERK ───────────────────────────────────────────────────────── */
/* het ↙ uit logo-leagl.svg, als masker zodat het de tekstkleur volgt */
.lw-arrow{
  display:inline-block;width:.72em;height:.96em;vertical-align:-.08em;
  background-color:currentColor;
  -webkit-mask:var(--lw-arrow-src) no-repeat center/contain;
          mask:var(--lw-arrow-src) no-repeat center/contain;
  transition:transform .35s var(--lw-ease-left);
}
:root{
  --lw-arrow-src:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 41'><path d='M27.4947 18.8696L21.8629 13.3312L7.08271 28.0838V13.3312H0V40.7289H27.4947V33.6711H12.5669L27.4947 18.8696Z'/></svg>");
}
a:hover > .lw-arrow{transform:translate(-4px,4px)}

/* achtergrondpatroon uit de huisstijlgids — altijd laag contrast */
.lw-pattern{position:relative;isolation:isolate}
.lw-pattern::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.12;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'><path d='M6 6 H60 V26 L26 60 H6 Z' fill='none' stroke='%235245AD' stroke-width='2'/></svg>");
}

/* ── 4. HEADER ──────────────────────────────────────────────────────────── */
.lw-header{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:var(--lw-3);
  padding:14px var(--lw-gutter);
  background:var(--lw-deep);color:var(--lw-white);
  border-bottom:1px solid var(--lw-on-dark-12);
}
.lw-header__logo img{display:block;height:34px;width:auto}   /* min. 110px breed, huisstijlregel */
.lw-header__product{
  font-family:var(--lw-font-body);font-weight:700;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--lw-soft);
  padding-left:var(--lw-3);margin-left:var(--lw-1);
  border-left:1px solid var(--lw-on-dark-12);
}
.lw-header__spacer{flex:1}
.lw-nav{display:flex;align-items:center;gap:var(--lw-1)}
.lw-nav a{
  font-size:13.5px;color:var(--lw-on-dark-70);padding:8px 12px;border-radius:var(--lw-radius);
  transition:all .25s var(--lw-ease);
}
.lw-nav a:hover{color:var(--lw-white);background:var(--lw-on-dark-12)}
.lw-nav a[aria-current="page"]{color:var(--lw-white);background:var(--lw-on-dark-12)}
/* de doorverwijzing naar de menselijke kant hoort in elke app */
.lw-nav__human{
  display:inline-flex;align-items:center;gap:8px;margin-left:var(--lw-1);
  padding:8px 14px;border-radius:var(--lw-radius);
  color:var(--lw-soft);box-shadow:inset 0 0 0 1px var(--lw-on-dark-12);
}
.lw-nav__human:hover{background:var(--lw-on-dark-12);color:var(--lw-white)}
@media(max-width:900px){.lw-nav a:not(.lw-nav__human){display:none}}
@media(max-width:600px){.lw-nav__human{padding:8px 10px;font-size:12.5px}
  .lw-nav__human .long{display:none}
  .lw-header{gap:var(--lw-2)} .lw-header__product{font-size:10.5px;padding-left:var(--lw-2)}}

/* ── 5. KNOPPEN ─────────────────────────────────────────────────────────── */
.lw-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border:0;border-radius:var(--lw-radius);cursor:pointer;
  font-family:var(--lw-font-body);font-weight:700;font-size:14.5px;line-height:1;
  background:var(--lw-bright);color:var(--lw-white);
  transition:background .25s var(--lw-ease),transform .35s var(--lw-ease);
}
.lw-btn:hover{background:var(--lw-bright-hover);color:var(--lw-white)}
.lw-btn:active{transform:translateY(1px)}
.lw-btn:focus-visible{outline:3px solid var(--lw-soft);outline-offset:2px}
.lw-btn[disabled]{opacity:.45;cursor:not-allowed}
.lw-btn--dark{background:var(--lw-deep)}
.lw-btn--dark:hover{background:var(--lw-bright)}
.lw-btn--ghost{background:transparent;color:var(--lw-deep);box-shadow:inset 0 0 0 1px var(--lw-rule)}
.lw-btn--ghost:hover{background:var(--lw-soft);color:var(--lw-deep)}
.lw-surface--dark .lw-btn--ghost{color:var(--lw-white);box-shadow:inset 0 0 0 1px var(--lw-on-dark-12)}
/* een kaart op een donker vlak is zelf licht: ghost-knop daarin blijft donkere tekst */
.lw-card .lw-btn--ghost,.lw-panel .lw-btn--ghost{color:var(--lw-deep);box-shadow:inset 0 0 0 1px var(--lw-rule)}
.lw-card .lw-btn--ghost:hover,.lw-panel .lw-btn--ghost:hover{background:var(--lw-soft);color:var(--lw-deep)}
.lw-btn--block{width:100%}
.lw-btn--lg{padding:18px 34px;font-size:16px}
/* de pijl in een CTA wijst en beweegt naar links */
.lw-btn__arw{display:inline-block;transition:transform .4s var(--lw-ease-left)}
.lw-btn:hover .lw-btn__arw{transform:translateX(-7px)}

/* ── 6. FORMULIEREN ─────────────────────────────────────────────────────── */
.lw-field{margin-bottom:var(--lw-2)}
.lw-label{
  display:block;margin-bottom:7px;
  font-size:var(--lw-caption);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lw-ink-45);
}
.lw-label .req{color:var(--lw-bright)}
.lw-input,.lw-select,.lw-textarea{
  width:100%;padding:14px 16px;
  font-family:var(--lw-font-body);font-size:15px;color:var(--lw-deep);
  background:var(--lw-white);border:1px solid var(--lw-rule);border-radius:var(--lw-radius);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.lw-input::placeholder,.lw-textarea::placeholder{color:var(--lw-ink-45)}
.lw-input:focus,.lw-select:focus,.lw-textarea:focus{
  outline:0;border-color:var(--lw-bright);box-shadow:0 0 0 3px rgba(82,69,173,.16);
}
.lw-input[aria-invalid="true"]{border-color:var(--lw-risk-critical)}
.lw-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--lw-2)}
@media(max-width:600px){.lw-row{grid-template-columns:1fr}}
.lw-check{display:flex;align-items:flex-start;gap:11px;font-size:14px;line-height:1.5;margin-bottom:var(--lw-2)}
.lw-check input{width:18px;height:18px;margin-top:2px;accent-color:var(--lw-bright);flex:0 0 18px}
.lw-hint{font-size:var(--lw-caption);color:var(--lw-ink-45);margin-top:8px}

/* uploadzone */
.lw-drop{
  border:1.5px dashed var(--lw-rule);border-radius:var(--lw-radius);
  padding:var(--lw-6) var(--lw-3);text-align:center;background:var(--lw-panel);
  transition:all .3s var(--lw-ease);cursor:pointer;
}
.lw-drop:hover,.lw-drop.is-over{border-color:var(--lw-bright);background:rgba(82,69,173,.05)}
.lw-drop__icon{color:var(--lw-bright);margin-bottom:var(--lw-2)}

/* toggle, o.a. Privacy Mode in de docscanner */
.lw-toggle{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:rgba(82,69,173,.06);border:1px solid rgba(82,69,173,.22);border-radius:var(--lw-radius);
}
.lw-toggle__title{font-weight:700;font-size:14px}
.lw-toggle__sub{font-size:var(--lw-caption);color:var(--lw-ink-45)}
.lw-switch{margin-left:auto;width:46px;height:26px;border-radius:13px;background:var(--lw-rule);
  position:relative;cursor:pointer;transition:background .25s ease;flex:0 0 46px}
.lw-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:transform .28s var(--lw-ease)}
.lw-switch[aria-checked="true"]{background:var(--lw-bright)}
.lw-switch[aria-checked="true"]::after{transform:translateX(20px)}

/* ── 7. KAARTEN, LIJSTEN, BADGES ────────────────────────────────────────── */
.lw-card{
  background:var(--lw-white);color:var(--lw-deep);border-radius:var(--lw-radius-lg);
  padding:var(--lw-4);box-shadow:var(--lw-shadow),0 0 0 1px var(--lw-rule);
}
.lw-card--flush{padding:0;overflow:hidden}
.lw-card__top{height:3px;background:var(--lw-bright)}    /* de paarse rand bovenaan */
.lw-panel{background:var(--lw-panel);color:var(--lw-deep);padding:var(--lw-3);border-radius:var(--lw-radius)}
.lw-list__item{
  display:flex;align-items:center;justify-content:space-between;gap:var(--lw-2);
  padding:13px 0;border-bottom:1px solid var(--lw-rule);
  font-weight:700;font-size:15px;color:var(--lw-deep);transition:color .25s ease;
}
.lw-list__item:last-child{border-bottom:0}
.lw-list__item:hover{color:var(--lw-bright)}
.lw-check-item{display:flex;align-items:flex-start;gap:12px;padding:7px 0;font-size:15.5px}
.lw-check-item::before{content:"";flex:0 0 18px;height:18px;margin-top:3px;background-color:var(--lw-bright);
  -webkit-mask:var(--lw-arrow-src) no-repeat center/contain;mask:var(--lw-arrow-src) no-repeat center/contain}
.lw-badge{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--lw-radius);
  font-size:12.5px;font-weight:700;background:rgba(82,69,173,.10);color:var(--lw-bright);
}
.lw-badge--dark{background:var(--lw-on-dark-12);color:var(--lw-soft)}
.lw-kicker{display:block;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--lw-bright);margin-bottom:var(--lw-2)}
.lw-surface--dark .lw-kicker{color:var(--lw-soft)}

/* scanresultaten */
.lw-score{display:flex;align-items:baseline;gap:10px}
.lw-score b{font-family:var(--lw-font-display);font-weight:700;font-size:52px;line-height:1;color:var(--lw-bright)}
.lw-risk{display:inline-block;width:12px;height:12px;border-radius:3px}
.lw-risk--critical{background:var(--lw-risk-critical)}
.lw-risk--high{background:var(--lw-risk-high)}
.lw-risk--medium{background:var(--lw-risk-medium)}
.lw-risk--ok{background:var(--lw-risk-ok)}

/* ── 8. VERTICALE CTA-TAB (spiegelt leagl.be) ───────────────────────────── */
.lw-tab{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;align-items:center;gap:14px;padding:28px 12px;
  writing-mode:vertical-rl;background:var(--lw-deep);color:var(--lw-soft);
  font-weight:700;font-size:14px;transition:background .3s ease;
}
.lw-tab:hover{background:var(--lw-bright);color:var(--lw-white)}
@media(max-width:760px){.lw-tab{display:none}}

/* ── 9. BEWEGING — de linkerbeweging ────────────────────────────────────── */
.lw-in{opacity:0;transform:translateX(52px);
  transition:opacity .8s ease,transform 1s var(--lw-ease-left)}
.lw-in.is-in{opacity:1;transform:none}
.lw-in--d1{transition-delay:.09s}
.lw-in--d2{transition-delay:.18s}
.lw-in--d3{transition-delay:.27s}
.lw-in--d4{transition-delay:.36s}

/* ── 10. OVERSCHRIJFLAAG — neutraliseert de oude LEAGL-stijl ────────────── */
/* Deze selectoren mikken op wat de vijf apps nu gebruiken. Verwijder wat
   niet van toepassing is; laat staan wat wel matcht.                       */
.lw-reset button:not([class*="lw-"]):not([aria-pressed]):not([role="tab"]),
.lw-reset .btn:not([class*="lw-"]),
.lw-reset .button:not([class*="lw-"]){
  border-radius:var(--lw-radius);
  font-family:var(--lw-font-body);font-weight:700;
  background:var(--lw-bright);color:var(--lw-white);border:0;
}
.lw-reset input[type="text"],.lw-reset input[type="email"],
.lw-reset input[type="tel"],.lw-reset input[type="url"],.lw-reset select,.lw-reset textarea{
  border-radius:var(--lw-radius);border:1px solid var(--lw-rule);
  font-family:var(--lw-font-body);
}
.lw-reset h1,.lw-reset h2,.lw-reset h3{font-family:var(--lw-font-display);letter-spacing:-.02em}
/* elke andere paarstint terugbrengen naar de merkwaarde */
.lw-reset [style*="#4B3C8F"],.lw-reset [style*="#4b3c8f"]{color:var(--lw-bright) !important}

/* ── 11. FOOTER ─────────────────────────────────────────────────────────── */
.lw-footer{background:var(--lw-deep);color:var(--lw-on-dark-70);padding:var(--lw-8) 0 var(--lw-6)}
.lw-footer a{color:var(--lw-soft)}
.lw-footer a:hover{color:var(--lw-white)}
.lw-footer__claim{font-family:var(--lw-font-display);font-weight:700;color:var(--lw-white);
  font-size:var(--lw-h2);margin-bottom:var(--lw-3)}
.lw-footer__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--lw-4);margin-top:var(--lw-6)}
@media(max-width:820px){.lw-footer__grid{grid-template-columns:repeat(2,1fr)}}
.lw-footer__col h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--lw-on-dark-70);
  margin-bottom:var(--lw-2);font-family:var(--lw-font-body);font-weight:700}
.lw-footer__col a{display:block;padding:5px 0;font-size:14px}

/* ── 12. TOEGANKELIJKHEID ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .lw *,.lw *::before,.lw *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .lw-in{opacity:1 !important;transform:none !important}
}
.lw-skip{position:absolute;left:-9999px}
.lw-skip:focus{left:var(--lw-gutter);top:10px;z-index:100;background:var(--lw-bright);color:#fff;
  padding:10px 16px;border-radius:var(--lw-radius)}

/* ── 13. PAGINALAYOUT — hero, stappen, app-raster ──────────────────────── */

.hero{position:relative;overflow:hidden;padding:var(--lw-8) 0 var(--lw-12)}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--lw-8);align-items:start}
@media(max-width:940px){.hero__grid{grid-template-columns:1fr;gap:var(--lw-6)}}
.hero__glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 620px at 18% 34%,rgba(82,69,173,.55),transparent 70%)}
.hero__mesh{position:absolute;inset:0;opacity:.4;pointer-events:none;
  background-image:linear-gradient(rgba(216,211,239,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(216,211,239,.10) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(700px 520px at 20% 40%,#000,transparent 78%)}
.hero__inner{position:relative;z-index:2}
.hero h1{max-width:15ch;margin-bottom:var(--lw-3)}
.trustrow{display:flex;gap:var(--lw-1);flex-wrap:wrap;margin-top:var(--lw-4)}
.lang{display:flex;gap:6px;margin-bottom:var(--lw-3);justify-content:flex-end}
.lang button{padding:7px 13px;border:0;border-radius:var(--lw-radius);cursor:pointer;
  font-family:var(--lw-font-body);font-weight:700;font-size:12.5px;
  background:rgba(34,32,53,.06);color:var(--lw-ink-45);transition:all .25s var(--lw-ease)}
.lang button[aria-pressed="true"]{background:var(--lw-deep);color:#fff}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--lw-3)}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{padding:var(--lw-3);background:var(--lw-white);border-radius:var(--lw-radius-lg);
  box-shadow:0 0 0 1px var(--lw-rule)}
.step b{display:block;font-family:var(--lw-font-display);font-size:13px;color:var(--lw-bright);
  letter-spacing:.16em;margin-bottom:10px}
.step h3{margin-bottom:8px}.step p{font-size:15px;color:var(--lw-ink-70)}
.apps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:var(--lw-4)}
@media(max-width:940px){.apps{grid-template-columns:repeat(2,1fr)}}
.lw .app{display:block;padding:18px;border-radius:var(--lw-radius);background:var(--lw-on-dark-12);
  color:#fff;transition:all .35s var(--lw-ease)}
.lw .app:hover{background:var(--lw-bright);color:#fff;transform:translateX(-5px)}
.lw .app.is-current{background:var(--lw-bright)}
.lw .app b{color:inherit;display:block;font-family:var(--lw-font-display);font-size:14.5px;margin-bottom:5px}
.lw .app span{font-size:12px;color:var(--lw-on-dark-70)}
.lw .app:hover span,.lw .app.is-current span{color:rgba(255,255,255,.85)}
.note{margin-top:var(--lw-6);padding:var(--lw-4);border-left:3px solid var(--lw-bright);background:var(--lw-panel)}
.risklegend{display:flex;gap:var(--lw-3);flex-wrap:wrap;margin-top:var(--lw-4)}
.risklegend span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px}
.herman{width:100%;aspect-ratio:16/7.4;background:url('../assets/herman-band.jpg') center 34%/cover;
  border-radius:var(--lw-radius-lg);margin-bottom:var(--lw-3)}

/* fix: de inkom-animatie (translateX 52px) duwde op smalle schermen een horizontale
   scrollbalk naar buiten. Body clippen en de verplaatsing verkleinen. */
html{overflow-x:clip}
body.lw{overflow-x:clip}
@media(max-width:1100px){.lw-in{transform:translateX(22px)}}
/* fix: een knop die een <a> is erfde de linkkleur, waardoor de tekst
   paars op paars werd. Kleur expliciet forceren. */
a.lw-btn,a.lw-btn:hover,a.lw-btn:visited,
.lw-surface--dark a.lw-btn,.lw-surface--soft a.lw-btn{color:var(--lw-white)}
a.lw-btn .lw-btn__arw,a.lw-btn span{color:inherit}
a.lw-btn--ghost,.lw-surface--dark a.lw-btn--ghost{color:var(--lw-white)}
.band{width:100%;border-radius:var(--lw-radius-lg);overflow:hidden;position:relative}
.band img{display:block;width:100%;height:100%;object-fit:cover}
.band--tall{aspect-ratio:11/14}
.band--wide{aspect-ratio:16/8.4}
.lvl{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--lw-3)}
@media(max-width:880px){.lvl{grid-template-columns:1fr}}
.lvl > div{padding:var(--lw-4);background:var(--lw-white);border-radius:var(--lw-radius-lg);
  box-shadow:0 0 0 1px var(--lw-rule);position:relative;overflow:hidden}
.lvl > div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--lw-bright)}
.lvl b{display:block;font-family:var(--lw-font-display);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lw-bright);margin-bottom:12px}
.lvl h3{margin-bottom:8px}.lvl p{font-size:15px;color:var(--lw-ink-70)}
.dom{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:var(--lw-4)}
@media(max-width:880px){.dom{grid-template-columns:repeat(2,1fr)}}
.dom span{display:block;padding:16px 18px;border-radius:var(--lw-radius);
  background:var(--lw-on-dark-12);color:#fff;font-family:var(--lw-font-display);font-size:14.5px}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--lw-3);counter-reset:f}
@media(max-width:880px){.flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.flow{grid-template-columns:1fr}}
.flow > div{padding-top:18px;border-top:2px solid var(--lw-rule)}
.flow b{display:block;font-family:var(--lw-font-display);font-size:13px;color:var(--lw-bright);margin-bottom:6px}
.flow h4{font-family:var(--lw-font-display);font-size:16px;margin-bottom:6px}
.flow p{font-size:14px;color:var(--lw-ink-70)}
.incl{margin-top:var(--lw-6);padding:var(--lw-4);border-radius:var(--lw-radius-lg);
  background:var(--lw-soft);color:var(--lw-deep)}
.incl b{font-family:var(--lw-font-display);display:block;margin-bottom:6px}
.secure{margin-top:var(--lw-4);font-size:13px;letter-spacing:.06em;color:var(--lw-ink-45)}

/* mediakit */
.mk{display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:var(--lw-3);align-items:start}
@media(max-width:820px){.mk{grid-template-columns:1fr}}
.mkframe{position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--lw-radius-lg);background:var(--lw-deep)}
.mkframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .28s var(--lw-ease)}
.mkframe img.on{opacity:1}
.mkthumbs{display:grid;gap:9px}
@media(max-width:820px){.mkthumbs{grid-template-columns:repeat(5,1fr)}}
.mkthumbs button{padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;
  background:var(--lw-deep);aspect-ratio:1;cursor:pointer;opacity:.55;transition:all .25s var(--lw-ease)}
.mkthumbs button.on{opacity:1;border-color:var(--lw-bright)}
.mkthumbs img{width:100%;height:100%;object-fit:cover;display:block}
.mkbar{display:flex;align-items:center;gap:14px;margin-top:var(--lw-3)}
.mkbar button{width:44px;height:44px;border:1px solid var(--lw-rule);border-radius:999px;
  background:transparent;color:inherit;font-size:18px;cursor:pointer}
.mkbar button:hover{background:var(--lw-bright);color:#fff;border-color:var(--lw-bright)}
.ads{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--lw-3);margin-top:var(--lw-4)}
.ads figure{margin:0}
.ads img{width:100%;display:block;border-radius:var(--lw-radius);box-shadow:0 0 0 1px var(--lw-rule)}
.ads figcaption{margin-top:9px;font-size:13px;color:var(--lw-ink-45)}
.logogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:var(--lw-4)}
.logogrid a{display:block;padding:22px;border-radius:var(--lw-radius);text-align:center;font-size:12.5px}
.logogrid a.on-dark{background:var(--lw-deep);color:#fff}
.logogrid a.on-light{background:var(--lw-white);color:var(--lw-deep);box-shadow:0 0 0 1px var(--lw-rule)}
.logogrid img{width:100%;max-width:180px;height:44px;object-fit:contain;margin-bottom:12px}
.swatch{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:var(--lw-4)}
.swatch div{padding:16px;border-radius:var(--lw-radius);font-size:12px;min-height:96px;
  display:flex;flex-direction:column;justify-content:flex-end}