/* ═══════════════════════════════════════════════════════
   DCS-huisstijl op de elementen van Flatsome

   Voor secties die met echte Flatsome-elementen zijn opgebouwd, zodat een
   kolom, knop of kop dezelfde uitstraling heeft als het ontwerp. Alles staat
   binnen .dcs-fl, zodat het de rest van de site niet raakt.
   ═══════════════════════════════════════════════════════ */

.dcs-fl {
  --dcs-ink: #211C16;
  --dcs-ink-2: #6B655B;
  --dcs-ink-3: #A49C8E;
  --dcs-orange: #E8971E;
  --dcs-orange-d: #C97E10;
  --dcs-bg: #FAF8F3;
  --dcs-grey: #F3F0E9;
  --dcs-line: #EAE6DD;
  --dcs-dark: #211C16;
  --dcs-t: 240ms cubic-bezier(.32, .72, 0, 1);
}

/* --- Typografie ------------------------------------------------------- */

.dcs-fl,
.dcs-fl p,
.dcs-fl li {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--dcs-ink-2);
}

/* Alle koppen dragen het sloganlettertype, net als "We Handle Your Challenge"
   op de homepage. */
.dcs-fl h1,
.dcs-fl h2,
.dcs-fl h3,
.dcs-fl h4 {
  font-family: 'Big Shoulders Display', 'Bricolage Grotesque', sans-serif;
  letter-spacing: .005em;
  line-height: 1.04;
  font-weight: 800;
  color: var(--dcs-ink);
  margin-bottom: .5em;
}

.dcs-fl h1 {
  font-size: clamp(42px, 6vw, 86px);
  line-height: 1.02;
}

.dcs-fl h2 { font-size: clamp(32px, 3.8vw, 54px); }
.dcs-fl h3 { font-size: clamp(22px, 2.2vw, 30px); }

.dcs-fl p {
  font-size: 16.5px;
  line-height: 1.72;
  margin-bottom: 1.1em;
}

.dcs-fl a { color: var(--dcs-orange); }
.dcs-fl a:hover { color: var(--dcs-orange-d); }

/* Het bovenschrift boven een kop: klein, oranje, gespatieerd. */
.dcs-fl .dcs-pre {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dcs-orange);
  margin-bottom: 14px;
}

/* Het oranje streepje onder een sectiekop. */
.dcs-fl .dcs-line::after {
  content: '';
  display: block;
  width: 52px;
  height: 3px;
  background: var(--dcs-orange);
  margin-top: 18px;
}

/* Het volgnummer bij een dienst. */
.dcs-fl .dcs-num {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--dcs-ink-3);
  margin-bottom: 8px;
}

/* Kruimelpad. */
.dcs-fl .dcs-crumbs {
  font-size: 13px;
  color: var(--dcs-ink-3);
  margin-bottom: 22px;
}

.dcs-fl .dcs-crumbs a { color: var(--dcs-ink-3); }
.dcs-fl .dcs-crumbs a:hover { color: var(--dcs-orange); }

/* --- Knoppen ---------------------------------------------------------- */

/* Het ontwerp zet alle afrondingen op nul en gebruikt een technische
   letter voor de knoppen. */
.dcs-fl .button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  min-height: 50px;
  padding: 0 28px;
  margin: 0 10px 10px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 0;
  border: 1.5px solid transparent;
  box-shadow: none;
  transition: background var(--dcs-t), color var(--dcs-t), border-color var(--dcs-t);
}

.dcs-fl .button.primary {
  background: var(--dcs-orange);
  border-color: var(--dcs-orange);
  color: #fff;
}

.dcs-fl .button.primary:hover {
  background: var(--dcs-ink);
  border-color: var(--dcs-ink);
  color: #fff;
}

.dcs-fl .button.is-outline {
  background: transparent;
  border-color: var(--dcs-ink);
  color: var(--dcs-ink);
}

.dcs-fl .button.is-outline:hover {
  background: var(--dcs-ink);
  border-color: var(--dcs-ink);
  color: #fff;
}

/* Op een donkere ondergrond. */
.dcs-fl.dcs-op-donker .button.is-outline {
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}

.dcs-fl.dcs-op-donker .button.is-outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

/* --- Secties ---------------------------------------------------------- */

.dcs-fl.dcs-op-donker,
.dcs-fl.dcs-op-donker p,
.dcs-fl.dcs-op-donker li {
  color: rgba(255, 255, 255, .72);
}

.dcs-fl.dcs-op-donker h1,
.dcs-fl.dcs-op-donker h2,
.dcs-fl.dcs-op-donker h3,
.dcs-fl.dcs-op-donker h4 {
  color: #fff;
}

/* Beelden in het ontwerp hebben geen ronding. */
.dcs-fl .ux-image img,
.dcs-fl img {
  border-radius: 0;
}

/* De rij van Flatsome houdt dezelfde maximale breedte aan als het ontwerp. */
.dcs-fl .row:not(.row-full-width) {
  max-width: 1180px;
}

/* Het icoon bij een dienst, zoals in het ontwerp. */
.dcs-fl .dcs-ic {
  width: 58px;
  height: 58px;
  border-radius: 0;
  background: var(--dcs-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.dcs-fl .dcs-ic svg {
  width: 28px;
  height: 28px;
  color: #fff;
}

/* Knoppen van het ontwerp binnen een tekst-element: de linkkleur van .dcs-fl a
   won van de knopkleur (oranje tekst op oranje vlak, gezien 07-10-2026). */
.dcs-fl a.btn,
.dcs-fl a.btn-primary,
.dcs-fl a.btn-dark { color: #fff; }
.dcs-fl a.btn-outline { color: var(--dcs-ink); }
.dcs-fl a.btn-outline:hover { color: #fff; }