/* --- Basis: geldt voor alle pagina's (sommige hadden dit niet in hun eigen <head>) --- */
body { margin: 0; background: #e9ebf1; font-family: 'Hanken Grotesk', system-ui, sans-serif; }
a { color: #0080c6; }
::selection { background: #0080c6; color: #fff; }

/* Supply Today — meeschalen met de schermbreedte.
   Het ontwerp gebruikt inline stijlen; deze regels overschrijven die alleen
   onder 1180px. Boven 1180px verandert er niets aan het ontwerp. */

/* Pijlerkaarten op de homepage */
.st-card { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.st-card:hover { border-color:#0080c6 !important; box-shadow:0 12px 28px rgba(13,19,74,.13); transform:translateY(-2px); }
.st-card:hover .st-card-t, .st-card:hover .st-card-l { color:#e5352d !important; }

/* Links: geen onderstreping, wel kleur bij hover */
a { text-decoration:none !important; }
a:hover { color:#e5352d !important; }
a:hover [style*="border-bottom:2px solid"] { color:#e5352d !important; border-bottom-color:#e5352d !important; }

@media (max-width:1180px){
  img, video { max-width:100% !important; }
  body { overflow-x:hidden; }
  /* header: logo en menu mogen afbreken */
  div[style*="justify-content:space-between"][style*="align-items:baseline"]{
    flex-wrap:wrap !important; gap:10px 20px !important;
  }
  div[style*="gap:26px"]{ flex-wrap:wrap !important; gap:8px 18px !important; }
  /* horizontale rijen (o.a. de pijlerbalk) mogen afbreken */
  div[style*="display:flex"][style*="gap:24px"],
  div[style*="display:flex"][style*="gap:22px"],
  div[style*="display:flex"][style*="gap:20px"],
  div[style*="display:flex"][style*="gap:18px"],
  div[style*="display:flex"][style*="gap:16px"],
  div[style*="display:flex"][style*="gap:14px"],
  div[style*="display:flex"][style*="gap:12px"]{ flex-wrap:wrap !important; }
}

/* ---------- tot 1100px: ruimere marges inhouden, koppen iets kleiner ---------- */
@media (max-width:1100px){
  [style*="padding:56px 60px 44px"]{ padding:44px 36px 34px !important; }
  [style*="padding:56px 60px 40px"]{ padding:44px 36px 32px !important; }
  [style*="padding:44px 60px 36px"]{ padding:36px 36px 28px !important; }
  [style*="padding:44px 60px 56px"]{ padding:36px 36px 44px !important; }
  [style*="padding:40px 60px 48px"]{ padding:32px 36px 38px !important; }
  [style*="padding:0 60px 56px"]{ padding:0 36px 44px !important; }
  [style*="padding:0 60px 52px"]{ padding:0 36px 40px !important; }
  [style*="padding:0 60px 48px"]{ padding:0 36px 38px !important; }
  [style*="padding:0 60px 44px"]{ padding:0 36px 34px !important; }
  [style*="padding:24px 60px 18px"]{ padding:20px 36px 16px !important; }
  [style*="padding:56px 60px"]{ padding:44px 36px !important; }
  [style*="padding:52px 60px"]{ padding:42px 36px !important; }
  [style*="padding:48px 60px"]{ padding:38px 36px !important; }
  [style*="padding:44px 60px"]{ padding:36px 36px !important; }
  [style*="padding:40px 60px"]{ padding:32px 36px !important; }
  [style*="padding:13px 60px"]{ padding:13px 36px !important; }

  [style*="font-size:78px"]{ font-size:60px !important; }
  [style*="font-size:64px"]{ font-size:52px !important; }
  [style*="font-size:62px"]{ font-size:50px !important; }
  [style*="font-size:60px"]{ font-size:49px !important; }
  [style*="font-size:58px"]{ font-size:47px !important; }
  [style*="font-size:52px"]{ font-size:44px !important; }
  [style*="font-size:46px"]{ font-size:40px !important; }
  [style*="font-size:42px"]{ font-size:37px !important; }
  [style*="font-size:40px"]{ font-size:35px !important; }
  [style*="font-size:38px"]{ font-size:34px !important; }
  [style*="font-size:36px"]{ font-size:32px !important; }
  [style*="font-size:34px"]{ font-size:31px !important; }
  [style*="font-size:32px"]{ font-size:29px !important; }
  [style*="font-size:30px"]{ font-size:27px !important; }
}

/* ---------- tot 900px: brede kolommenroosters uitdunnen ---------- */
@media (max-width:900px){
  [style*="grid-template-columns:repeat(5,1fr)"]{ grid-template-columns:repeat(3,1fr) !important; }
}

/* ---------- tot 860px: alles naar één of twee kolommen ---------- */
@media (max-width:860px){
  [style*="grid-template-columns:300px 1fr"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns:320px 1fr"],
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns:240px 1fr"],
  [style*="grid-template-columns:220px 1fr 260px"],
  [style*="grid-template-columns:92px 1fr 300px"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"]{ grid-template-columns:repeat(2,1fr) !important; }

  [style*="columns:2"]{ columns:1 !important; }

  /* gaten tussen kolommen die nu rijen zijn geworden */
  [style*="gap:52px"]{ gap:28px !important; }
  [style*="gap:48px"]{ gap:26px !important; }
  [style*="gap:44px"]{ gap:26px !important; }
  [style*="gap:40px"]{ gap:24px !important; }
  [style*="gap:36px"]{ gap:24px !important; }

  /* portretten en beeldvlakken over de volle breedte */
  [style*="width:240px"][style*="height:440px"]{ width:100% !important; max-width:260px !important; height:auto !important; aspect-ratio:3/4 !important; }
  [style*="min-height:230px"]{ height:240px !important; min-height:0 !important; }
  [style*="height:400px"]{ height:240px !important; }

  [style*="font-size:78px"]{ font-size:46px !important; }
  [style*="font-size:64px"]{ font-size:42px !important; }
  [style*="font-size:62px"]{ font-size:41px !important; }
  [style*="font-size:60px"]{ font-size:40px !important; }
  [style*="font-size:58px"]{ font-size:39px !important; }
  [style*="font-size:52px"]{ font-size:37px !important; }
  [style*="font-size:46px"]{ font-size:35px !important; }
  [style*="font-size:42px"]{ font-size:33px !important; }
  [style*="font-size:40px"]{ font-size:32px !important; }
  [style*="font-size:38px"]{ font-size:31px !important; }
  [style*="font-size:36px"]{ font-size:30px !important; }
  [style*="font-size:34px"]{ font-size:29px !important; }
  [style*="font-size:32px"]{ font-size:28px !important; }
  [style*="font-size:30px"]{ font-size:26px !important; }
  [style*="font-size:28px"]{ font-size:25px !important; }
  [style*="font-size:27px"]{ font-size:24px !important; }
  [style*="font-size:26px"]{ font-size:23px !important; }
  [style*="font-size:25px"]{ font-size:22px !important; }
  [style*="font-size:24px"]{ font-size:22px !important; }
  [style*="font-size:23px"]{ font-size:21px !important; }
  [style*="font-size:22px"]{ font-size:20px !important; }
  [style*="font-size:21px"]{ font-size:20px !important; }
  [style*="font-size:20px"]{ font-size:19px !important; }
  [style*="font-size:19px"]{ font-size:18px !important; }
}

/* ---------- tot 620px: telefoon ---------- */
@media (max-width:620px){
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"]{ grid-template-columns:1fr !important; }

  [style*="padding:56px 60px 44px"]{ padding:34px 20px 26px !important; }
  [style*="padding:56px 60px 40px"]{ padding:34px 20px 26px !important; }
  [style*="padding:44px 60px 36px"]{ padding:28px 20px 22px !important; }
  [style*="padding:44px 60px 56px"]{ padding:28px 20px 34px !important; }
  [style*="padding:40px 60px 48px"]{ padding:26px 20px 30px !important; }
  [style*="padding:0 60px 56px"]{ padding:0 20px 34px !important; }
  [style*="padding:0 60px 52px"]{ padding:0 20px 32px !important; }
  [style*="padding:0 60px 48px"]{ padding:0 20px 30px !important; }
  [style*="padding:0 60px 44px"]{ padding:0 20px 28px !important; }
  [style*="padding:24px 60px 18px"]{ padding:16px 20px 14px !important; }
  [style*="padding:56px 60px"]{ padding:34px 20px !important; }
  [style*="padding:52px 60px"]{ padding:32px 20px !important; }
  [style*="padding:48px 60px"]{ padding:30px 20px !important; }
  [style*="padding:44px 60px"]{ padding:28px 20px !important; }
  [style*="padding:40px 60px"]{ padding:26px 20px !important; }
  [style*="padding:13px 60px"]{ padding:12px 20px !important; }
  [style*="padding:32px 36px"]{ padding:22px 20px !important; }

  [style*="gap:52px"], [style*="gap:48px"], [style*="gap:44px"],
  [style*="gap:40px"], [style*="gap:36px"], [style*="gap:32px"]{ gap:20px !important; }
  [style*="gap:0 44px"], [style*="gap:0 48px"], [style*="gap:0 36px"]{ gap:0 !important; }

  [style*="grid-template-columns:44px 1fr"]{ grid-template-columns:32px 1fr !important; }
  [style*="grid-template-columns:150px 1fr"]{ grid-template-columns:1fr !important; gap:8px !important; }
  [style*="height:400px"]{ height:190px !important; }
  [style*="min-height:230px"]{ height:200px !important; }
  [style*="height:190px"]{ height:200px !important; }
  [style*="height:150px"]{ height:190px !important; }
  [style*="width:240px"][style*="height:440px"]{ aspect-ratio:4/5 !important; }
  [style*="border-left:1px solid #c4d9ec"]{ border-left:none !important; padding-left:0 !important; }

  [style*="font-size:78px"]{ font-size:34px !important; }
  [style*="font-size:64px"]{ font-size:31px !important; }
  [style*="font-size:62px"]{ font-size:30px !important; }
  [style*="font-size:60px"]{ font-size:30px !important; }
  [style*="font-size:58px"]{ font-size:29px !important; }
  [style*="font-size:52px"]{ font-size:28px !important; }
  [style*="font-size:46px"]{ font-size:27px !important; }
  [style*="font-size:42px"]{ font-size:26px !important; }
  [style*="font-size:40px"]{ font-size:25px !important; }
  [style*="font-size:38px"]{ font-size:25px !important; }
  [style*="font-size:36px"]{ font-size:24px !important; }
  [style*="font-size:34px"]{ font-size:23px !important; }
  [style*="font-size:32px"]{ font-size:23px !important; }
  [style*="font-size:30px"]{ font-size:22px !important; }
  [style*="font-size:28px"]{ font-size:21px !important; }
  [style*="font-size:27px"]{ font-size:21px !important; }
  [style*="font-size:26px"]{ font-size:20px !important; }
  [style*="font-size:25px"]{ font-size:20px !important; }
  [style*="font-size:24px"]{ font-size:19px !important; }
  [style*="font-size:23px"]{ font-size:19px !important; }
  [style*="font-size:22px"]{ font-size:19px !important; }
  [style*="font-size:21px"]{ font-size:18px !important; }
  [style*="font-size:20px"]{ font-size:18px !important; }
  [style*="font-size:19px"]{ font-size:17px !important; }
  [style*="font-size:18px"]{ font-size:17px !important; }
  [style*="font-size:17px"]{ font-size:16px !important; }
}

/* --- Doorkliktekstje verschijnt bij hover; blok is volledig klikbaar --- */
.st-h { position: relative; }
.st-hit { position: absolute; inset: 0; z-index: 2; border: 0; }
.st-hl { opacity: 0; transition: opacity .18s ease, color .18s ease; }
.st-h:hover .st-hl { opacity: 1; color: #e5352d !important; border-bottom-color: #e5352d !important; }
.st-h:focus-within .st-hl { opacity: 1; }
@media (hover: none), (max-width: 860px) {
  .st-hl { opacity: 1 !important; }
}

/* --- Pijlerblokken: om en om donkerblauw --- */
.st-dark { background: #0d134a !important; }
.st-dark [style*="color:#0080c6"] { color: #7fc4ec !important; }
.st-dark [style*="color:#0073b4"] { color: #7fc4ec !important; }
.st-dark [style*="color:#0d134a"] { color: #ffffff !important; }
.st-dark [style*="color:#2a2d38"] { color: #c6cbe0 !important; }
.st-dark [style*="background:#e8eff7"] { background: #182055 !important; }
.st-dark [style*="color:#5b6070"] { color: #9aa3ce !important; }

/* --- Vier gebieden op de pijlerpagina: klikbaar, rood bij hover --- */
.st-vier { display: block; color: inherit; text-decoration: none; }
.st-vier:hover [style*="color:#0d134a"],
.st-vier:hover [style*="color:#3a3d49"] { color: #e5352d !important; }
.st-vier:hover > [style*="border-top:1px solid #0d134a"] { border-top-color: #e5352d !important; }

/* --- Hover op een donker blok: rood is daar te donker --- */
.st-dark.st-h:hover .st-hl { color: #ff8079 !important; border-bottom-color: #ff8079 !important; }

/* --- Animatiekaders: op kleine schermen meer breedte voor de tekening --- */
@media (max-width:860px){
  [style*="border:1px solid #c4d9ec"][style*="background:#fff"][style*="padding:26px"]{ padding:10px !important; }
}