/* Fonts: lokaal gehost (fonts/) in plaats van via fonts.googleapis.com, zodat er geen
   verzoeken/IP-adressen naar Google gaan. IBM Plex Sans is een variabel lettertype: één bestand
   per subset dekt de gewichten 400/500/600. */
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/ibm-plex-sans-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:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/ibm-plex-sans-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/space-mono-400-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:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/space-mono-400-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/space-mono-700-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:'Space Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/space-mono-700-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Layout: vertrekbord als hero; daaronder diensten in een 2x2-raster, het verhaal en contact. Eén kolom, max 1080px. */
:root{
  --paper:#F6F4EF; --surface:#EDEAE2; --ink:#0B1F3A; --muted:#55657D; --line:#D8D4C9;
  --accent:#00BEA6; --accent-ink:#00796B;
  --board:#0B1F3A; --flap:#15304F; --flap-ink:#F6F4EF; --board-label:#9FB0C8;
  --mark-tile:#0B1F3A; --mark-t:#F6F4EF; --mark-face:#1B375E; --mark-pin:#55657D;
  --btn-ink:#F6F4EF; --on-accent:#0B1F3A;
  --font-display:'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-body:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0A1A30; --surface:#0F2340; --ink:#F6F4EF; --muted:#9FB0C8; --line:#22385A;
  --accent-ink:#00BEA6; --board:#050F1D; --flap:#122843; --board-label:#9FB0C8;
  --mark-tile:#F6F4EF; --mark-t:#0B1F3A; --mark-face:#DCD8CD; --mark-pin:#9FB0C8;
  --btn-ink:#0B1F3A; color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#0A1A30; --surface:#0F2340; --ink:#F6F4EF; --muted:#9FB0C8; --line:#22385A;
  --accent-ink:#00BEA6; --board:#050F1D; --flap:#122843; --board-label:#9FB0C8;
  --mark-tile:#F6F4EF; --mark-t:#0B1F3A; --mark-face:#DCD8CD; --mark-pin:#9FB0C8;
  --btn-ink:#0B1F3A; color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--font-body);padding-inline:20px}
.wrap{max-width:1080px;margin-inline:auto}
a{color:var(--accent-ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Woordmerk met de klapbordnaad als echte opening (werkt op elke achtergrond) */
.seam{-webkit-mask-image:linear-gradient(to bottom,#000 calc(52% - .045em),transparent calc(52% - .045em),transparent calc(52% + .03em),#000 calc(52% + .03em));
      mask-image:linear-gradient(to bottom,#000 calc(52% - .045em),transparent calc(52% - .045em),transparent calc(52% + .03em),#000 calc(52% + .03em))}
.mark .tile,.mark .stack{fill:var(--mark-tile)} .mark .t{fill:var(--mark-t)}
.mark .face{fill:var(--mark-face);stroke:var(--mark-face)} .mark .pin{fill:var(--mark-pin)} .mark .stem{fill:var(--accent)}

/* Kop */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);border-bottom:1px solid var(--line);margin-inline:-20px;padding:12px 20px}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand svg{width:34px;height:40px;flex:none}
.brand span{font:700 19px/1 var(--font-display);letter-spacing:.02em;text-transform:uppercase}
nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
nav a{display:inline-block;padding:10px 12px;font:400 15px/1 var(--font-display);color:var(--ink);text-decoration:none;border-radius:6px}
nav a:hover{background:var(--surface)}
@media (max-width:480px){header.site{position:static;padding-block:10px}.brand span{font-size:16px}nav a{padding:10px 10px;font-size:14px}}

/* Hero */
.hero{padding-block:72px 56px;display:grid;gap:36px}
.eyebrow{font:400 14px/1.4 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
h1{font:700 clamp(40px,7vw,76px)/1.02 var(--font-display);letter-spacing:-.01em;margin:0;text-wrap:balance;max-width:16ch}
.lead{font-size:20px;color:var(--muted);max-width:52ch;margin:18px 0 0}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 20px;border-radius:8px;font:700 15px/1 var(--font-display);text-decoration:none;letter-spacing:.02em;cursor:pointer;border:2px solid var(--ink)}
.btn.primary{background:var(--ink);color:var(--btn-ink)}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--surface)}

/* Vertrekbord */
.board{--cw:24px;background:var(--board);border-radius:14px;padding:22px 22px 26px;color:var(--board-label);overflow:hidden}
.board-head,.row{display:grid;grid-template-columns:auto auto 1fr;column-gap:22px;align-items:center}
.board-head{font:400 12px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;padding-bottom:14px;border-bottom:1px solid #ffffff1f;margin-bottom:14px}
.board-head span:nth-child(1){width:calc(6 * (var(--cw) + 3px))}
.board-head span:nth-child(2){width:calc(10 * (var(--cw) + 3px))}
.rows{display:grid;gap:10px}
.cells{display:flex;gap:3px}
.cell{position:relative;display:grid;place-items:center;width:var(--cw);height:calc(var(--cw) * 1.42);background:var(--flap);color:var(--flap-ink);border-radius:3px;font:700 calc(var(--cw) * .82)/1 var(--font-display);overflow:hidden}
.cell::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;background:var(--board);opacity:.9}
.cell.flip::before{content:"";position:absolute;inset:0 0 50% 0;background:var(--flap);transform-origin:50% 100%;animation:flap 90ms ease-in forwards;z-index:1}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(0)}}
.cells.dest .cell{color:var(--flap-ink)} .cells.status .cell{color:var(--accent)}
.board-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;font:400 12px/1.4 var(--font-display);letter-spacing:.1em;text-transform:uppercase}
.board-foot b{color:var(--accent);font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:820px){.board{--cw:19px}}
@media (max-width:660px){
  .board{--cw:clamp(18px, calc((100vw - 40px - 44px - 30px) / 11), 26px);padding:18px}
  .board-head{display:none}
  .row{grid-template-columns:1fr;row-gap:6px;padding-bottom:12px;border-bottom:1px solid #ffffff1f}
  .row:last-child{border-bottom:0;padding-bottom:0}
  .cells.time{display:none}
}

/* Secties */
section{padding-block:64px;border-top:1px solid var(--line)}
h2{font:700 clamp(28px,4vw,40px)/1.1 var(--font-display);margin:8px 0 0;text-wrap:balance}
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:36px}
.service{background:var(--surface);border-radius:12px;padding:26px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.service .tile{width:52px;height:60px;border-radius:8px;background:var(--ink);display:grid;place-items:center;position:relative}
.service .tile::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;background:var(--surface)}
.service .tile svg{width:28px;height:28px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.service h3{font:700 22px/1.2 var(--font-display);margin:2px 0 6px;letter-spacing:.01em}
.service p{margin:0;color:var(--muted)}
@media (max-width:720px){.services{grid-template-columns:1fr}}

.intro{margin:14px 0 0;max-width:62ch;color:var(--muted);font-size:18px}
/* Werkwijze als treinroute: vier haltes op één lijn */
.route{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;position:relative}
.route::before{content:"";position:absolute;left:7px;right:7px;top:7px;height:2px;background:var(--line)}
.stop{position:relative;padding-top:34px;min-width:0}
.stop::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--paper);border:3px solid var(--ink)}
.stop:last-child::before{background:var(--accent);border-color:var(--accent)}
.stop .cells{--cw:19px;margin-bottom:14px}
.stop .cell{background:var(--ink);color:var(--paper)}
.stop .cell::after{background:var(--paper);height:1px;top:calc(50% - .5px)}
.stop:last-child .cell{background:var(--accent);color:var(--on-accent)}
.stop:last-child .cell::after{background:var(--on-accent);opacity:.35}
.stop h3{font:700 19px/1.25 var(--font-display);margin:0 0 6px}
.stop p{margin:0;color:var(--muted);font-size:16px}
@media (max-width:900px){.route{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}.route::before{display:none}}
@media (max-width:560px){
  .route{grid-template-columns:1fr;row-gap:28px;padding-left:30px}
  .route::before{display:block;left:7px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
  .stop{padding-top:0}.stop::before{left:-30px;top:2px}
}

.contact{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:start;margin-top:8px}
.contact .intro{margin-top:14px}
.contact-card{background:var(--board);color:var(--board-label);border-radius:14px;padding:26px 26px 28px;display:grid;gap:16px}
.contact-card .label{font:400 12px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.contact-card .cells{--cw:30px}
.contact-card .cell{color:var(--accent)}
.contact-card p{margin:0;color:var(--flap-ink);font-size:17px}
.contact-card .btn{justify-self:start;margin-top:6px;background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.contact-card .btn:hover{background:var(--flap-ink);border-color:var(--flap-ink)}
@media (max-width:760px){.contact{grid-template-columns:1fr;gap:24px}}

footer{border-top:1px solid var(--line);padding-block:28px 40px;font:400 13px/1.6 var(--font-display);color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}