/* Lettertypen op de eigen server (2026-09-29), bestanden van Fontsource (latin-subset) */
@font-face{font-family:"Big Shoulders Display"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/big-shoulders-display-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Big Shoulders Display"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/big-shoulders-display-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:"Big Shoulders Display"; font-style:normal; font-weight:800; font-display:swap; src:url("/assets/fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2");}
@font-face{font-family:"Big Shoulders Display"; font-style:normal; font-weight:900; font-display:swap; src:url("/assets/fonts/big-shoulders-display-latin-900-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans"; font-style:italic; font-weight:400; font-display:swap; src:url("/assets/fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");}

/* Esrocom, herbouwde site. Huisstijl-tokens 1-op-1 gelijk aan het Werkplekken-rapport
   (.claude/skills/workstation-report/template.html), op verzoek van Mark 2026-09-29. */
:root{
  --bg:#eef1f7;
  --surface:#ffffff;
  --surface-2:#e4e9f2;
  --ink:#14284c;
  --ink-soft:#4a5a76;
  --ink-faint:#6b7690;
  --line:#ccd4e2;
  --line-strong:#a1acbf;
  --accent:#e07f00;
  --accent-strong:#c96e00;
  --accent-ink:#3a2400;
  --accent-soft:#fbe1bb;
  --ok:#1f7a44;
  --ok-soft:#e2f5e7;
  --slate:#6b7690;
  --navy:#14284c;
  --navy-deep:#0f294c;
  --hero-bg-1:#14284c;
  --hero-bg-2:#0f294c;
  --hero-fg:#eef1f6;
  --hero-muted:#a1acbf;
  --hero-line:rgba(238,241,246,.16);
  --tier-good-bg:#e2f5e7; --tier-good-ink:#1f7a44;
  --tier-mid-bg:#fbf1cf; --tier-mid-ink:#8a6c09;
  --tier-bad-bg:#fae2e0; --tier-bad-ink:#a5352a;
  --shadow: 0 1px 2px rgba(15,41,76,.06), 0 8px 24px rgba(15,41,76,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a1220; --surface:#101c30; --surface-2:#16233a; --line:#29395a; --line-strong:#3a4966;
    --ink:#eef1f6; --ink-soft:#a9b4c9; --ink-faint:#8592ac;
    --accent:#ffab3d; --accent-strong:#ffc169; --accent-ink:#fbe1bb; --accent-soft:#3a2400;
    --ok:#74d99b; --ok-soft:#163828; --slate:#8592ac;
    --navy:#0c1830; --navy-deep:#08101f; --hero-bg-1:#0c1830; --hero-bg-2:#08101f; --hero-muted:#93a0b8;
    --tier-good-bg:#163828; --tier-good-ink:#74d99b; --tier-mid-bg:#33280c; --tier-mid-ink:#f0c86f; --tier-bad-bg:#341712; --tier-bad-ink:#f4a99c;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0a1220; --surface:#101c30; --surface-2:#16233a; --line:#29395a; --line-strong:#3a4966;
  --ink:#eef1f6; --ink-soft:#a9b4c9; --ink-faint:#8592ac;
  --accent:#ffab3d; --accent-strong:#ffc169; --accent-ink:#fbe1bb; --accent-soft:#3a2400;
  --ok:#74d99b; --ok-soft:#163828; --slate:#8592ac;
  --navy:#0c1830; --navy-deep:#08101f; --hero-bg-1:#0c1830; --hero-bg-2:#08101f; --hero-muted:#93a0b8;
  --tier-good-bg:#163828; --tier-good-ink:#74d99b; --tier-mid-bg:#33280c; --tier-mid-ink:#f0c86f; --tier-bad-bg:#341712; --tier-bad-ink:#f4a99c;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink-soft);
  font-family:"IBM Plex Sans", Arial, sans-serif; font-size:16px; line-height:1.65;
}
h1,h2,h3,h4{font-family:"Big Shoulders Display", Arial, sans-serif; color:var(--ink); text-wrap:balance; font-weight:800; line-height:1.08; margin:0 0 .4em;}
h1{font-size:clamp(2rem,5vw,3.1rem);}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1em; max-width:70ch;}
a{color:var(--accent-ink); text-decoration-color:var(--accent);}
code,.mono{font-family:"IBM Plex Mono",monospace;}
img{max-width:100%; height:auto; display:block;}
.tabnum{font-variant-numeric:tabular-nums;}

.shell{max-width:1120px; margin:0 auto; padding-inline:20px;}

/* Topbar */
.topbar{background:var(--ink); color:var(--hero-muted); font-size:.85rem;}
.topbar .shell{display:flex; flex-wrap:wrap; gap:6px 22px; padding-block:8px;}
.topbar a{color:var(--hero-fg); text-decoration:none;}
.topbar a:hover{color:var(--accent);}
.topbar-wa{display:inline-flex; align-items:center; gap:6px;}
.topbar-wa img{display:inline-block;}

/* Header / nav */
/* Blauwe en witte balk samen vast bovenaan, zodat de contactgegevens altijd in beeld zijn (Mark 2026-09-29) */
.site-head{position:sticky; top:0; z-index:40; box-shadow:0 2px 10px rgba(15,41,76,.08);}
header.site{background:var(--surface); border-bottom:1px solid var(--line);}
/* ankers (bv. #bestellen) niet onder de vaste kop laten verdwijnen */
[id]{scroll-margin-top:130px;}
.topbar .sm{display:none;}
header.site .shell{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:12px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{height:34px; width:auto;}
nav.mainnav{display:flex; gap:4px; flex-wrap:wrap; align-items:center;}
nav.mainnav > .nav-item{position:relative;}
nav.mainnav .top-link{
  display:inline-block; padding:10px 14px; color:var(--ink); text-decoration:none;
  font-weight:600; font-size:.94rem; font-family:inherit; border-radius:6px;
  background:none; border:none; margin:0; cursor:pointer; appearance:none; -webkit-appearance:none;
  line-height:inherit;
}
nav.mainnav .top-link:hover, nav.mainnav .top-link.active{color:var(--accent-ink); background:var(--accent-soft);}
nav.mainnav .dropdown{
  /* GEEN margin-top: dat maakt een onzichtbaar "gat" tussen de knop en het menu waar de muis
     even over niets zweeft, waardoor :hover wegvalt vlak vóórdat je het submenu bereikt.
     De optische ruimte komt nu uit padding-top, dat wél bij de hoverbare doos hoort. */
  display:none; position:absolute; top:100%; left:0; margin-top:0; padding-top:14px;
  background:transparent; z-index:50;
}
nav.mainnav .dropdown-inner{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); padding:8px; min-width:260px;
}
/* Desktop met muis: open gewoon op hover, zoals een gewoon menu hoort te doen. */
@media (hover:hover) and (pointer:fine) and (min-width:1001px){
  nav.mainnav .nav-item:hover .dropdown{display:block;}
}
/* Touchscreens (geen echte hover): klik/tik opent, zie site.js - voorkomt de dubbele-tik-bug van hover-only menu's. */
nav.mainnav .nav-item.open .dropdown{display:block;}
nav.mainnav .dropdown a{display:block; padding:8px 12px; border-radius:6px; color:var(--ink-soft); text-decoration:none; font-size:.9rem;}
nav.mainnav .dropdown a:hover{background:var(--surface-2); color:var(--ink);}
.btn{
  display:inline-block; background:var(--accent); color:#fff; font-weight:700; text-decoration:none;
  padding:10px 20px; border-radius:8px; font-size:.92rem; border:1px solid transparent;
}
.btn:hover{filter:brightness(1.05);}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line-strong);}

/* Hero (fixed dark navy panel, brand-locked, not theme-dependent) */
.hero{background:linear-gradient(155deg,var(--hero-bg-1) 0%,var(--hero-bg-2) 100%); color:var(--hero-fg);}
.hero.hero-image{
  background-image:linear-gradient(100deg, rgba(15,41,76,.94) 0%, rgba(15,41,76,.75) 45%, rgba(15,41,76,.35) 100%), url("/assets/hero-home.jpg");
  background-size:cover; background-position:center;
}
.hero .shell{padding-block:56px 60px;}
.hero .eyebrow{font-family:"IBM Plex Mono",monospace; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:#ffab3d; margin:0 0 12px;}
.hero h1{color:#fff;}
.hero p.lede{color:var(--hero-muted); font-size:1.08rem; max-width:60ch;}
.hero .cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px;}
.hero .btn.ghost, .page-hero .btn.ghost{color:var(--hero-fg); border-color:var(--hero-line);}

.page-hero{background:linear-gradient(155deg,var(--hero-bg-1) 0%,var(--hero-bg-2) 100%); color:var(--hero-fg);}
.page-hero .shell{padding-block:38px;}
.page-hero h1{color:#fff; font-size:clamp(1.8rem,4vw,2.6rem);}
.page-hero .eyebrow{font-family:"IBM Plex Mono",monospace; font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; color:#ffab3d; margin:0 0 8px;}

/* Content sections */
main{padding-block:44px 60px;}
.content{max-width:760px;}
.content h2{margin-top:1.5em;}
.content ul, .content ol{padding-left:1.3em;}
.content li{margin-bottom:0; line-height:1.4;} /* regelafstand in lijsten 1,5x kleiner (was ca. 33px, nu ca. 22px per regel), Mark 2026-09-29 */
.content table{border-collapse:collapse; width:100%; margin:1.2em 0; font-size:.92rem;}
.content th,.content td{border:1px solid var(--line); padding:8px 12px; text-align:left;}
.content th{background:var(--surface-2);}
.content blockquote{border-left:3px solid var(--accent); margin:1.2em 0; padding:.4em 0 .4em 1em; color:var(--ink-soft); font-style:italic;}
.content iframe{max-width:100%;}

/* Card grid (homepage services, product overview) */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin:24px 0;}

/* Homepage-intro met chatbot-blok rechtsboven: zelfde kolommen/gap als de tegels (.grid), zodat het
   blok precies boven de laatste tegelkolom staat. 4 kolommen vanaf 1008px, 3 vanaf 762px (net als
   auto-fit minmax(230px) bij de tegels), daaronder onder elkaar. */
.home-intro .bot-note{margin:0 0 24px; align-self:start;}
@media (min-width:762px){
  .home-intro{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start;}
  .home-intro-text{grid-column:1 / -2;}
  .home-intro .bot-note{grid-column:-2 / -1; margin:0;}
}
@media (min-width:1008px){
  .home-intro{grid-template-columns:repeat(4,1fr);}
}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px;
  box-shadow:var(--shadow); text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:8px;
}
.card:hover{border-color:var(--accent);}
/* Vaste voetregel (bv. nacalculatietarief) blijft onderaan zitten, ongeacht hoeveel tekst
   erboven staat in naburige kaarten - voorkomt ongelijke kaarten in een rij (feedback 2026-09-23). */
.card .tier-stats{margin-top:auto; padding-top:12px;}
.card h3{margin:0; font-size:1.1rem;}
.card p{margin:0; font-size:.9rem; color:var(--ink-faint);}
.card .tag{font-family:"IBM Plex Mono",monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-ink); background:var(--accent-soft); padding:3px 8px; border-radius:5px; align-self:flex-start;}

/* Sitemap footer columns */
footer.site{background:var(--ink); color:var(--hero-muted); margin-top:40px;}
footer.site .shell{padding-block:36px 26px;}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:24px; margin-bottom:26px;}
.foot-grid h4{color:#fff; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; font-family:"IBM Plex Mono",monospace; font-weight:600; margin:0 0 10px;}
.foot-grid a{display:block; color:var(--hero-muted); text-decoration:none; font-size:.88rem; padding:3px 0;}
.foot-grid a:hover{color:#fff;}
.foot-bottom{border-top:1px solid var(--hero-line); padding-top:18px; display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; font-size:.82rem;}
.foot-bottom a{color:var(--hero-muted); text-decoration:none;}

.notice{background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent-ink); border-radius:8px; padding:12px 16px; font-size:.88rem; margin-bottom:24px;}

/* Jargon-tooltips ("i"-icoontje en onderstippelde term, zoals in de SLA-brochure) */
.term{
  border-bottom:1px dotted var(--ink-faint); cursor:help; position:relative;
  font-weight:600; color:var(--ink);
}
.term .term-tip{
  display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  width:max-content; max-width:260px; background:var(--ink); color:var(--on-navy,#f4f1ea);
  font-size:.8rem; font-weight:400; line-height:1.4; padding:10px 12px; border-radius:8px;
  box-shadow:var(--shadow); z-index:60; text-align:left;
}
.term:hover .term-tip, .term:focus .term-tip, .term:focus-within .term-tip{display:block;}
.info-trigger{
  display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  border-radius:50%; background:var(--surface-2); color:var(--ink-faint); font-size:.7rem; font-style:italic;
  font-family:Georgia, serif; margin-left:4px; cursor:help; position:relative; vertical-align:middle;
}
.info-trigger .term-tip{
  display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  width:max-content; max-width:260px; background:var(--ink); color:#f4f1ea; font-size:.8rem; font-weight:400;
  line-height:1.4; padding:10px 12px; border-radius:8px; box-shadow:var(--shadow); z-index:60; text-align:left;
}
.info-trigger:hover .term-tip, .info-trigger:focus .term-tip{display:block;}

/* Contactpagina */
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:32px;}
.contact-grid .btn img{display:inline;}


/* Hamburgermenu (zichtbaar onder 1000px, anders springt het menu met Home erbij onder het logo) */
.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; padding:0; background:none; border:1px solid var(--line-strong);
  border-radius:8px; cursor:pointer; appearance:none; -webkit-appearance:none;
}
.hamburger span{display:block; width:20px; height:2px; background:var(--ink); margin:0 auto; transition:transform .15s, opacity .15s;}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:1000px){
  .hamburger{display:flex;}
  header.site .shell{flex-wrap:wrap;}
  nav.mainnav{
    display:none; width:100%; order:10; flex-direction:column; align-items:stretch; gap:0;
    border-top:1px solid var(--line); margin-top:12px; padding-top:6px;
  }
  nav.mainnav.mobile-open{display:flex;}
  nav.mainnav .nav-item{width:100%;}
  nav.mainnav .top-link{width:100%; text-align:left; border-radius:0; padding:13px 4px; border-bottom:1px solid var(--line);}
  nav.mainnav .dropdown{
    position:static; margin:0; padding:0; min-width:0;
  }
  nav.mainnav .dropdown-inner{
    background:none; box-shadow:none; border:none; border-radius:0; padding:0 0 4px 14px; min-width:0;
  }
  /* open menu scrollt binnen het scherm, ook met de vaste kop */
  nav.mainnav.mobile-open{max-height:calc(100dvh - 110px); overflow-y:auto; overscroll-behavior:contain;}
  nav.mainnav .dropdown a{padding:11px 12px; font-size:.95rem;}
}
@media (max-width:760px){
  .hero .shell{padding-block:40px;}
  /* blauwe balk op één regel: korte labels */
  .topbar{font-size:.82rem;}
  .topbar .shell{flex-wrap:nowrap; justify-content:space-between; gap:10px; padding-block:7px;}
  .topbar a{white-space:nowrap; padding-block:4px;}
  .topbar .lg{display:none;}
  .topbar .sm{display:inline;}
  header.site .shell{padding-block:9px;}
  .brand img{height:30px;}
  [id]{scroll-margin-top:110px;}
  /* tekst en koppen */
  main{padding-block:28px 40px;}
  .page-hero .shell{padding-block:26px;}
  .hero .eyebrow{font-size:.72rem;}
  .content h2{margin-top:1.3em;}
  .content li{margin-bottom:.35em;}
  /* footer in twee kolommen, grotere tikvlakken */
  .foot-grid{grid-template-columns:1fr 1fr; gap:18px 16px;}
  .foot-grid a{padding:6px 0;}
  .foot-bottom{flex-direction:column; gap:8px;}
  /* tooltips binnen het scherm houden */
  .term .term-tip, .info-trigger .term-tip{max-width:min(260px, 80vw);}
  /* knoppen makkelijker aan te tikken */
  .btn{padding:12px 20px;}
  .order-frame{min-height:1100px;}
}
@media (max-width:360px){
  .topbar .shell{gap:6px; font-size:.76rem;}
  .topbar-wa img{display:none;}
}

/* ---------- Onderdelen uit het Werkplekken-rapport (Mark 2026-09-29) ---------- */
/* Panel: wit vlak met rand, 6px radius en schaduw; kop in Big Shoulders */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); margin:0 0 20px;}
.panel-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:16px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.panel-head h2,.panel-head h3{font-size:1.2rem; margin:0; letter-spacing:.01em;}
.panel-body{padding:16px 20px;}
.panel-body ul{margin:0; padding-left:1.2em;}
.panels-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin:24px 0;}
/* Label in monospace-hoofdletters (eyebrow) */
.label{font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:500; color:var(--ink-faint);}
/* Pills (good/mid/bad) */
.pill{display:inline-block; padding:2px 9px; border-radius:20px; font-weight:600; font-size:.8rem; white-space:nowrap;}
.pill-good{background:var(--tier-good-bg); color:var(--tier-good-ink);}
.pill-mid{background:var(--tier-mid-bg); color:var(--tier-mid-ink);}
.pill-bad{background:var(--tier-bad-bg); color:var(--tier-bad-ink);}
/* Prijskaarten */
.price-card .price{font-family:"Big Shoulders Display",Arial,sans-serif; font-weight:800; font-size:2rem; color:var(--ink); line-height:1;}
.price-card .price small{font-family:"IBM Plex Sans",Arial,sans-serif; font-weight:500; font-size:.85rem; color:var(--ink-faint);}
.price-card ul{margin:4px 0 0; padding-left:1.1em; font-size:.9rem;}
.price-card .btn{margin-top:auto; align-self:flex-start;}
.price-card{cursor:default;}
/* Tabellen in de stijl van het rapport */
.content table{width:100%; border-collapse:collapse; font-size:.9rem; background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); margin:16px 0 24px;}
.content th{text-align:left; padding:10px 14px; font-family:"IBM Plex Mono",monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); background:var(--surface-2); border-bottom:1px solid var(--line);}
.content td{padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top;}
.content tr:last-child td{border-bottom:none;}
.content .table-scroll{overflow-x:auto;}
.footnote{font-size:.85rem; color:var(--ink-faint);}
/* Brede inhoud (pagina's in homepage-stijl, bv. datakaart) en ingebed bestelformulier */
.wide > p, .wide > ul{max-width:760px;}
.order-frame{width:100%; min-height:950px; border:1px solid var(--line); border-radius:6px; background:var(--surface); box-shadow:var(--shadow);}
.price-card .label{margin:0;}
.cta-panel{margin-top:40px;}
.cta-panel .panel-body p:last-child{margin-bottom:0;}
.panels-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin:0 0 24px;}
.panels-3 .panel{margin:0;}
.panels-2 .panel{margin:0;}
.price-card .pill{align-self:flex-start;}
.btn img{display:inline-block;}
.foot-social{display:inline-flex; gap:16px; flex-wrap:wrap;}

/* Nieuwsoverzicht: datum en korte inleiding in de tegel */
.card time{font:inherit;}
.card .tag + h3{margin-top:2px;}
.page-hero .eyebrow time{font:inherit;}