:root { --navy:#07074a; --cyan:#5fc8d2; --bg:#f2f2f2; --text:#111; }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; background:var(--bg); color:var(--text);
         font-family:"Helvetica Neue",Arial,sans-serif; font-size:17px; line-height:2; }
  .wrap { max-width:560px; margin:0 auto; padding:24px 0 48px; }
  .card { background:#fff; }
  .card img.hero { display:block; width:100%; height:auto; }
  .inner { padding:44px 34px 40px; }
  @media (max-width:560px){ .wrap{padding-top:0} .inner{padding:36px 26px 34px} }
  .logo { display:block; width:280px; max-width:80%; height:auto; margin-bottom:22px; }
  a.logolink { display:block; width:280px; max-width:80%; margin-bottom:22px; border-radius:2px; }
  a.logolink .logo { width:100%; max-width:none; margin:0; transition:opacity .2s; }
  a.logolink:hover .logo { opacity:.8; }
  a.logolink:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
  h1 { color:var(--navy); font-size:22px; font-weight:800; letter-spacing:.32em;
       text-transform:uppercase; margin:0 0 26px; line-height:1.5; }
  p { margin:0 0 24px; }
  ul.plain { list-style:none; padding:0; margin:0 0 24px; }
  ul.dash { list-style:none; padding:0; margin:0; }
  ul.dash li::before { content:"- "; }
  a { color:inherit; }
  .caps { color:var(--navy); font-weight:700; font-size:14px; letter-spacing:.3em;
          text-transform:uppercase; line-height:1.85; margin-bottom:22px; }
  .btn { display:block; width:100%; background:var(--navy); color:#fff; text-align:center;
         text-decoration:none; font-weight:700; font-size:15px; letter-spacing:.35em;
         text-transform:uppercase; padding:18px 10px; border-radius:4px; margin:0 0 16px;
         transition:background .2s; }
  .btn:hover, .btn.current { background:var(--cyan); }
  .btn.back { display:flex; align-items:center; justify-content:center; gap:18px;
              width:auto; max-width:100%; font-size:12px; padding:16px 22px; white-space:nowrap; }
  @media (max-width:420px){ .btn.back{ font-size:11px; letter-spacing:.22em; gap:12px; padding:16px 16px; } }
  .btn.back::before { content:""; border:solid transparent; border-width:15px 18px 15px 0;
                      border-right-color:#fff; }
  .topback { margin-bottom:20px; display:inline-flex; }
  .foot { font-size:14px; text-align:center; color:#666; line-height:1.8; padding:26px 16px 0; }
  .foot a { color:#666; margin:0 6px; }
  form label { display:block; color:var(--navy); font-weight:700; font-size:12px;
               letter-spacing:.3em; text-transform:uppercase; margin:0 0 6px 8px; }
  form input, form textarea { width:100%; border:1px solid #ccc; border-radius:4px; padding:12px;
               font:inherit; font-size:16px; line-height:1.4; margin-bottom:20px; }
  form textarea { min-height:140px; resize:vertical; }
  form button { border:0; cursor:pointer; font-family:inherit; }
  .legal, .card.legal { text-align:center; }
  .legal .inner { padding-top:56px; }
  .legal h1 { font-size:18px; margin-bottom:30px; }
  .legal h2 { color:var(--text); font-size:15px; font-weight:400; margin:30px 0 10px; line-height:1.6; }
  .legal p, .legal li { font-size:15px; line-height:1.85; color:#333; }
  .legal ol { list-style:none; padding:0; margin:0 0 20px; }
  .legal ol li { margin-bottom:10px; }
  .btn.outline { background:#fff; color:var(--navy); border:1px solid #bbb; margin:36px auto 0; display:inline-flex; }
  .btn.outline::before { border-right-color:var(--navy); }
  .btn.outline:hover { background:#f4f4f8; }
  /* ---------- computer: bredere opmaak ---------- */
  .card > picture { display:block; }
  @media (min-width: 960px) {
    .wrap { max-width:1140px; padding:48px 32px 56px; }
    main > .card:not(.legal) { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:start;
      border-radius:6px; overflow:hidden; box-shadow:0 10px 40px rgba(7,7,74,.08); }
    main > .card:not(.legal) > picture { position:sticky; top:0; }
    main > .card:not(.legal) img.hero { width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
    .inner { padding:56px 60px 52px; }
    .card:not(.legal) .btn:not(.back) { display:inline-block; width:auto;
      padding:17px 24px; margin:0 8px 12px 0; letter-spacing:.3em; }
    .card:not(.legal) .btn.back { display:inline-flex; margin-top:8px; }
    .card.legal { max-width:860px; margin:0 auto; border-radius:6px; }
    .topback { margin-bottom:24px; }
  }