/* SHOUT Media brandbook
   Indeling naar brand.ventionteams.com, vormgeving volledig uit brandbook V4.
   Alleen Inter (titels) en Manrope (al het andere). Geen derde font. */
:root{
  --lime:#e1ee9c; --forest:#2e4c18; --shout:#ff7400; --clean:#ffffff; --accent:#1a1a1a;
  --lijn:#2e4c1826; --lijn-licht:#ffffff2e;
  --ft:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fb:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --zij:310px; --gut:clamp(22px,3vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--clean);color:var(--forest);font-family:var(--fb);
  font-size:19px;line-height:1.5;letter-spacing:-.02em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
p{margin:0}
img{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-family:var(--ft);font-weight:700;letter-spacing:-.035em;line-height:1.02;
  text-transform:lowercase}

/* label: geen mono, gewoon Manrope */
.label{font-family:var(--fb);font-weight:600;font-size:14px;letter-spacing:.12em;
  text-transform:uppercase}

/* ---------- kop ---------- */
.kop{position:fixed;top:0;left:0;right:0;height:66px;z-index:60;background:var(--clean);
  border-bottom:1px solid var(--lijn);display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gut)}
.kop img{height:24px;width:auto}
.kop__rechts{display:flex;align-items:center;gap:20px}
.menuknop{display:none;background:var(--forest);color:var(--lime);border:0;cursor:pointer;
  font-family:var(--fb);font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  border-radius:999px;padding:10px 18px}

/* ---------- zijbalk ---------- */
.zij{position:fixed;top:66px;bottom:0;left:0;width:var(--zij);overflow-y:auto;z-index:50;
  border-right:1px solid var(--lijn);background:var(--clean);padding:16px 0 60px}
.zij ol{list-style:none;margin:0;padding:0}
.zij>ol>li{border-bottom:1px solid var(--lijn)}
.zij a.hoofd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:16px var(--gut);font-family:var(--ft);font-weight:700;font-size:19px;
  letter-spacing:-.035em;text-transform:lowercase}
.zij a.hoofd em{font-style:normal;font-family:var(--fb);font-weight:600;font-size:13px;
  letter-spacing:.08em;opacity:.45}
.zij li.nu{background:var(--lime)}
.zij li.nu>a.hoofd{color:var(--forest)}
.zij .sub{padding:0 var(--gut) 16px}
.zij .sub li a{display:block;padding:5px 0;font-size:15px;font-weight:500;opacity:.75}
.zij .sub li a:hover{opacity:1}
.zij li:not(.nu) .sub{display:none}

/* ---------- inhoud ---------- */
.inhoud{margin-left:var(--zij);padding-top:66px}

/* hoofdstukband: vol in de hoofdstukkleur */
.band{padding:clamp(54px,7vw,110px) var(--gut) clamp(40px,5vw,80px)}
.band .nr{display:block;font-family:var(--ft);font-weight:700;font-size:clamp(74px,13vw,190px);
  line-height:.82;letter-spacing:-.055em;margin-bottom:8px}
.band h1{font-size:clamp(38px,6.4vw,96px)}

/* sectie in de opbouw van /diensten/: groot nummer + naam, lijn, tekst eronder */
.sectie{padding:clamp(44px,5.4vw,92px) var(--gut)}
.sectie--lime{background:var(--lime);color:var(--forest)}
.sectie--forest{background:var(--forest);color:var(--lime)}
.sectie__kop{display:flex;align-items:baseline;gap:clamp(16px,2.6vw,42px);flex-wrap:wrap}
.sectie__nr{font-family:var(--ft);font-weight:700;font-size:clamp(56px,9vw,132px);line-height:.84;
  letter-spacing:-.055em;color:var(--shout)}
.sectie--forest .sectie__nr{color:var(--lime)}
.sectie--lime .sectie__nr{color:var(--forest)}
.sectie__naam{font-family:var(--ft);font-weight:700;font-size:clamp(26px,3.6vw,56px);
  letter-spacing:-.035em;text-transform:lowercase;line-height:1}
.lijn{border:0;border-top:1px solid currentColor;opacity:.28;margin:clamp(22px,2.8vw,44px) 0}
.sectie__body{max-width:42ch;margin-left:auto;font-size:clamp(19px,1.5vw,24px);line-height:1.45}
.sectie__body.breed{max-width:52ch}
.sectie__body p+p{margin-top:.9em}
.sectie__body .uit{color:var(--shout)}
.sectie--forest .sectie__body .uit,.sectie--lime .sectie__body .uit{color:inherit;
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.sectie__body h2{display:none}

/* ---------- kleurvlakken ---------- */
.kleuren{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.kleur{padding:26px 24px 30px;min-height:300px;display:flex;flex-direction:column;
  justify-content:space-between}
.kleur b{font-family:var(--ft);font-weight:700;font-size:32px;letter-spacing:-.04em;
  text-transform:lowercase}
.kleur dl{margin:0;font-size:15px;line-height:1.8;font-weight:500}
.kleur dt{display:none}
.kleur dd{margin:0}

/* ---------- letterproef ---------- */
.proef{padding:clamp(34px,4vw,64px) var(--gut);border-top:1px solid var(--lijn)}
.proef .label{display:block;margin-bottom:16px;opacity:.65}
.proef .glyf{font-size:clamp(34px,7.4vw,104px);line-height:1.04;letter-spacing:-.035em;word-break:break-word}
.proef .glyf.titel{font-family:var(--ft);font-weight:700}
.proef .glyf.body{font-family:var(--fb);font-weight:500}
.schaal{width:100%;border-collapse:collapse;font-size:17px}
.schaal th,.schaal td{text-align:left;padding:15px 18px 15px 0;border-bottom:1px solid currentColor;
  vertical-align:baseline}
.schaal th{font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;opacity:.6;
  border-bottom-width:1px}
.schaal td{font-weight:500}
.schaal tr{opacity:1}
.schaal td:first-child{font-family:var(--ft);font-weight:700;letter-spacing:-.03em;text-transform:lowercase;
  font-size:19px}

/* ---------- vormen ---------- */
.vormrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.vormvak{padding:36px 26px 30px;display:flex;flex-direction:column;align-items:center;gap:20px;
  background:var(--clean)}
.vormvak .label{opacity:.55;font-size:13px}
.vormrij--lime .vormvak{background:var(--lime);color:var(--forest)}

/* ---------- lijsten ---------- */
.pijlers{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.pijler{padding:34px 28px 40px}
.pijler:nth-child(1){background:var(--lime);color:var(--forest)}
.pijler:nth-child(2){background:var(--forest);color:var(--lime)}
.pijler:nth-child(3){background:var(--shout);color:var(--clean)}
.pijler h3{font-size:clamp(24px,2.4vw,34px);margin-bottom:18px}
.pijler ul{list-style:none;margin:0;padding:0;font-size:18px;font-weight:500}
.pijler li{padding:9px 0;border-bottom:1px solid currentColor}
.pijler li:last-child{border-bottom:0}

.woorden{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.woorden b{font-family:var(--fb);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(17px,1.5vw,22px);border:1px solid currentColor;border-radius:999px;padding:11px 26px}

.zinnen{display:grid}
.zinnen--wel{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.zinnen--niet{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}
.zin{padding:32px 28px 38px}
.zin.wel{background:var(--forest);color:var(--lime)}
.zin.niet{background:var(--accent);color:var(--clean)}
.zin.wel .label{color:var(--lime);opacity:.7}
.zin .label{display:block;margin-bottom:16px}
.zin.niet .label{color:var(--shout)}
.zin p{font-size:20px;line-height:1.35;font-weight:500}

/* ---------- tegels ---------- */
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  border-top:1px solid var(--lijn)}
.tegel{padding:34px var(--gut);display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--ft);font-weight:700;font-size:clamp(21px,2.1vw,30px);letter-spacing:-.035em;
  text-transform:lowercase;background:var(--lime);color:var(--forest);
  border-right:1px solid #2e4c1826;transition:background .3s,color .3s}
.tegel:last-child{border-right:0}
.tegel:hover{background:var(--forest);color:var(--lime)}
.tegel .pijl{width:44px;height:44px;flex:0 0 auto;transition:transform .3s}
.tegel:hover .pijl{transform:translate(4px,-4px)}
.tegel--stil{background:var(--clean);color:var(--forest);font-family:var(--fb);font-weight:600;
  font-size:15px;letter-spacing:.1em;text-transform:uppercase}
.tegel--stil:hover{background:var(--clean);color:var(--forest)}

.statement{padding:clamp(56px,7vw,120px) var(--gut);font-family:var(--ft);font-weight:700;
  font-size:clamp(34px,6.6vw,104px);line-height:.98;letter-spacing:-.045em;text-transform:lowercase;
  background:var(--forest);color:var(--lime)}
.statement .uit{color:var(--shout)}

/* ---------- volgende hoofdstuk ---------- */
.volgend{display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:clamp(40px,5vw,82px) var(--gut);background:var(--shout);color:var(--clean)}
.volgend small{display:block;font-family:var(--fb);font-weight:600;font-size:15px;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:10px;opacity:.85}
.volgend b{font-family:var(--ft);font-weight:700;font-size:clamp(30px,4.6vw,68px);letter-spacing:-.04em;
  text-transform:lowercase;line-height:1}
.volgend .pijl{width:62px;height:62px;flex:0 0 auto;transition:transform .3s}
.volgend:hover .pijl{transform:translateX(10px)}

/* ---------- voet ---------- */
.voet{background:var(--forest);color:var(--lime);padding:clamp(44px,5vw,80px) var(--gut) 30px}
.voet__boven{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:34px;
  padding-bottom:46px;border-bottom:1px solid var(--lijn-licht)}
.voet h3{font-size:clamp(26px,2.6vw,38px);margin-bottom:14px}
.voet a{text-decoration:underline;text-underline-offset:4px}
.voet__links{display:flex;flex-direction:column;gap:10px;font-family:var(--ft);font-weight:700;
  font-size:clamp(21px,2vw,28px);letter-spacing:-.035em;text-transform:lowercase}
.voet__links a{text-decoration:none}
.voet__links a:hover{color:var(--shout)}
.voet__onder{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;
  padding-top:34px;align-items:end;font-size:16px;font-weight:500}
.voet__onder img{height:54px;width:auto}

@media(max-width:960px){
  :root{--zij:0px}
  body{font-size:18px}
  .zij{transform:translateX(-100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);width:290px}
  .zij.open{transform:none;box-shadow:0 0 0 100vmax #1a1a1a55}
  .inhoud{margin-left:0}
  .menuknop{display:block}
  .sectie__body{max-width:none;margin-left:0}
}