@font-face {
      font-family: 'Schibsted Grotesk';
      font-style: italic;
      font-weight: 400 900;
      font-display: swap;
      src: url('fonts/schibstedgrotesk-italic-400_900-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Schibsted Grotesk';
      font-style: italic;
      font-weight: 400 900;
      font-display: swap;
      src: url('fonts/schibstedgrotesk-italic-400_900-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: 'Schibsted Grotesk';
      font-style: normal;
      font-weight: 400 900;
      font-display: swap;
      src: url('fonts/schibstedgrotesk-normal-400_900-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Schibsted Grotesk';
      font-style: normal;
      font-weight: 400 900;
      font-display: swap;
      src: url('fonts/schibstedgrotesk-normal-400_900-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: 'Public Sans';
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url('fonts/publicsans-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Public Sans';
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url('fonts/publicsans-normal-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;
    }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper:      #F2F5F9;
  --paper-2:    #E7ECF3;
  --ink:        #14181F;
  --ink-2:      #434D5B;
  --rule:       #C9D2DE;
  --rule-soft:  #DBE1EA;
  --navy:       #1B3054;
  --navy-deep:  #142542;
  --gold:       #C9880A;
  --gold-ink:   #614103;
  --gold-lite:  #E8A820;
  --on-dark:    #F7F4EF;
  --on-dark-2:  #BCC7D9;

  --shell:      1240px;
  --gut:        clamp(1.25rem, 4vw, 3rem);
  --nav-h:      92px;
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Koppen in een karaktervolle grotesk: strak, eigen gezicht */
h1, h2, h3 {
  font-family: "Schibsted Grotesk", "Segoe UI", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ink);
}

a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--gold-lite); color: var(--ink); }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gut); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; }

/* Labels in klein kapitaal: de metadata-laag van een tijdschrift */
.label {
  font-family: "Public Sans", sans-serif;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2);
}
.label--gold { color: var(--gold-ink); }
.num {
  font-family: "Public Sans", sans-serif; font-variant-numeric: tabular-nums;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; color: var(--gold-ink);
}

.lnk {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: "Public Sans", sans-serif; font-size: 0.95rem; font-weight: 600;
  text-decoration: none; color: var(--ink); padding: 0.75rem 0; min-height: 44px;
  border-bottom: 1.5px solid var(--ink);
  transition: gap .25s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.lnk svg { transition: transform .25s var(--ease); }
.lnk:hover { gap: 0.9rem; color: var(--gold-ink); border-color: var(--gold); }
.lnk:hover svg { transform: translateX(3px); }
.lnk--quiet { border-bottom-color: var(--rule); color: var(--ink-2); font-weight: 500; }
.lnk--quiet:hover { color: var(--ink); border-color: var(--ink); }
.knop-goud {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--gold-lite); color: var(--navy-deep);
  font-family: "Public Sans", sans-serif; font-size: 1rem; font-weight: 700;
  padding: 1rem 1.8rem; min-height: 48px; border-bottom: 0; text-decoration: none;
  transition: background-color .2s var(--ease), transform .25s var(--ease);
}
.knop-goud:hover { background: var(--gold); color: var(--navy-deep); transform: translateY(-2px); }
.knop-goud svg { transition: transform .25s var(--ease); }
.knop-goud:hover svg { transform: translateX(3px); }
.lnk--light { color: var(--on-dark); border-bottom-color: var(--on-dark); }
.lnk--light:hover { color: var(--gold-lite); border-color: var(--gold-lite); }

/* ===== Header ===== */
.head {
  position: sticky; top: 0; z-index: 100; background: var(--paper);
  border-bottom: 1px solid transparent; transition: border-color .2s var(--ease);
}
.head.stuck { border-bottom-color: var(--rule); }
.head-in {
  max-width: var(--shell); margin: 0 auto; padding-inline: var(--gut);
  height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.head-in .mark img { height: 72px; width: auto; }
.nav { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav a {
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; padding: 0.6rem 0; display: inline-block;
  transition: color .2s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav .now { color: var(--ink); border-bottom: 1.5px solid var(--gold); }
.burger {
  display: none; width: 44px; height: 44px; border: 1px solid var(--rule); background: none;
  cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span { width: 18px; height: 1.5px; background: var(--ink); transition: transform .25s var(--ease), opacity .2s; }
.burger.on span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.on span:nth-child(2) { opacity: 0; }
.burger.on span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.sheet {
  position: fixed; inset: var(--nav-h) 0 0 0; background: var(--paper); z-index: 99;
  padding: 2rem var(--gut); display: none; flex-direction: column;
}
.sheet.on { display: flex; }
.sheet a {
  font-family: "Schibsted Grotesk", "Segoe UI", Arial, sans-serif; font-size: 1.75rem; font-weight: 600; text-decoration: none;
  padding: 1rem 0; border-bottom: 1px solid var(--rule-soft);
}

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 0; top: 0; z-index: 200; background: var(--navy); color: #fff; padding: 1rem; }

/* ===== Hero ===== */
.hero { padding: clamp(3.5rem, 9vw, 8rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero-tag { grid-column: 1 / span 4; display: flex; align-items: flex-end; }
.hero-tag p { max-width: 24ch; font-size: 0.98rem; color: var(--ink-2); line-height: 1.5; }
.hero-main { grid-column: 6 / span 7; }
.hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.5rem);
  line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--navy); }
.hero-desc { margin-top: 1.75rem; max-width: 52ch; font-size: 1.1rem; color: var(--ink-2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; margin-top: 2rem; }

/* Masthead-strook: vervangt het beeld uit de editorial-opzet */
.masthead { background: var(--navy); color: var(--on-dark-2); }
.masthead-in {
  max-width: var(--shell); margin: 0 auto; padding: 1.6rem var(--gut);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem;
}
.masthead dt { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #B9C5D8; }
.masthead dd {
  font-family: "Schibsted Grotesk", "Segoe UI", Arial, sans-serif; font-size: 1.15rem; font-weight: 600;
  color: var(--on-dark); margin-top: 0.3rem;
}
.masthead dd a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.35); }
.masthead dd a:hover { border-color: var(--gold-lite); color: var(--gold-lite); }

/* ===== Secties ===== */
.sec { padding: clamp(4rem, 9vw, 7rem) 0; }
section[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.sec-open {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem 2.5rem;
  align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sec-open .who { grid-column: 1 / span 3; }
.sec-open .what { grid-column: 5 / span 8; }
.sec-open h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); text-wrap: balance; }
.sec-open .sub { margin-top: 1rem; max-width: 50ch; color: var(--ink-2); }

/* Diensten als redactionele lijst, geen kaarten */
.work { border-top: 1px solid var(--rule); }
.row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.75rem 2.5rem;
  align-items: baseline; padding: clamp(1.6rem, 3vw, 2.2rem) 0;
  border-bottom: 1px solid var(--rule-soft); position: relative;
}
.row::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 1px;
  background: var(--gold); transition: right .45s var(--ease);
}
.row:hover::after { right: 0; }
.row .n { grid-column: 1 / span 1; }
.row .t { grid-column: 2 / span 4; font-size: clamp(1.4rem, 2.4vw, 1.95rem); transition: transform .3s var(--ease); }
.row:hover .t { transform: translateX(6px); }
.row .d { grid-column: 7 / span 6; color: var(--ink-2); font-size: 1rem; max-width: 54ch; }
.dienst-q {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  display: inline-flex; align-items: center; gap: 0.9rem;
}
.dienst-q .sign { font-family: "Public Sans", sans-serif; font-size: 1.4rem; font-weight: 400; color: var(--gold-ink); transition: transform .3s var(--ease); line-height: 1; }
.dienst-i.on .dienst-q .sign { transform: rotate(45deg); }
.dienst-a { grid-column: 2 / span 11; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.dienst-i.on .dienst-a { grid-template-rows: 1fr; }
.dienst-a > div { overflow: hidden; }
.dienst-a .sub { display: grid; grid-template-columns: 11rem 1fr; gap: 2.5rem; padding: 0.9rem 0; border-top: 1px solid var(--rule-soft); }
.dienst-a .sub:first-child { margin-top: 0.5rem; }
.dienst-a .sub b { color: var(--ink); font-family: "Public Sans", sans-serif; font-size: 0.95rem; }
.dienst-a .sub p { color: var(--ink-2); font-size: 0.95rem; max-width: 54ch; }
.dienst-link { padding: 1.1rem 0 0.4rem; }
.tijdwinst { list-style: none; margin: 1.4rem 0 1.6rem; padding: 0; display: grid; gap: 1.1rem; }
.tijdwinst li { display: flex; gap: 0.9rem; align-items: flex-start; }
.tw-icoon {
  flex: none; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(232, 168, 32, 0.18); color: var(--gold-ink);
}
.tw-tekst { display: block; font-size: 0.95rem; color: var(--ink-2); }
.tw-tekst b { display: block; color: var(--ink); font-size: 1.02rem; margin-bottom: 0.1rem; }

/* Werkwijze */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.step { }
.step:last-child { border-right: 0; }
.step .sn { font-family: "Schibsted Grotesk", "Segoe UI", Arial, sans-serif; font-size: 2.1rem; font-weight: 700; line-height: 1; }
.step h3 { font-size: 1.22rem; margin: 0.9rem 0 0.5rem; }
.step p { font-size: 0.97rem; color: var(--ink-2); }

/* Pull quote */
.quote { background: var(--navy-deep); color: var(--on-dark); padding: clamp(4rem, 9vw, 7rem) 0; }
.quote blockquote { 
  font-family: "Schibsted Grotesk", "Segoe UI", Arial, sans-serif; font-weight: 700; font-style: normal;
  font-size: clamp(1.8rem, 4.4vw, 3.2rem); line-height: 1.12; letter-spacing: -0.025em;
  max-width: 20ch; color: var(--on-dark);
}
.quote .cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; }

/* Over */
.about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem 2.5rem; }
.about .col-a { grid-column: 1 / span 6; }
.about .col-b { grid-column: 8 / span 5; }
.about .col-a > p { font-size: 1.1rem; }
.about .col-a > p + p { margin-top: 1.1rem; }
/* De drop-cap is vervallen; die hoorde bij het serif-tijdschriftbeeld. */
.drop { font-size: 1.1rem; }
.facts { margin-top: 2.5rem; border-top: 1px solid var(--rule); }
/* Staat de lijst bovenaan een eigen kolom, dan hoort die marge er niet; hij is bedoeld
   voor de afstand tot de tekst erboven. Zonder dit begint de rechterkolom 2,5rem lager
   dan de linker. */
.facts:first-child { margin-top: 0; }
.facts div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.5rem; padding: 0.95rem 0; border-bottom: 1px solid var(--rule-soft); }
.facts dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); padding-top: 0.28rem; }
.facts dd { font-size: 1rem; }
.portret { background: var(--paper-2); border: 1px solid var(--rule); padding: 2rem; }
.portret img { height: 92px; width: auto; margin-bottom: 1.75rem; }
.portret .who { font-family: "Schibsted Grotesk", "Segoe UI", Arial, sans-serif; font-size: 1.45rem; font-weight: 600; }
.portret .role { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; margin-top: 0.4rem; }
.portret p { font-size: 0.98rem; color: var(--ink-2); margin-top: 1.25rem; }
.portret .tarief { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: 0.98rem; }
.portret .tarief b { font-family: "Schibsted Grotesk", "Segoe UI", Arial, sans-serif; font-size: 1.25rem; font-weight: 600; }

/* Klanten */

/* FAQ */
.faq { border-top: 1px solid var(--rule); }
.faq-i { border-bottom: 1px solid var(--rule-soft); }
.faq-q {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left; color: var(--ink);
  display: grid; grid-template-columns: 3rem 1fr auto; gap: 1rem; align-items: baseline;
  padding: 1.5rem 0; min-height: 48px;
  font-family: "Schibsted Grotesk", "Segoe UI", Arial, sans-serif; font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 600;
}
.faq-q .sign { font-family: "Public Sans", sans-serif; font-size: 1.4rem; color: var(--gold-ink); transition: transform .3s var(--ease); line-height: 1; }
.faq-i.on .sign { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq-i.on .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 0 1.75rem 4rem; max-width: 62ch; color: var(--ink-2); }

/* Contact */
.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem 2.5rem; }
.contact .col-a { grid-column: 1 / span 5; }
.contact .col-b { grid-column: 7 / span 6; }
.field { margin-bottom: 1.75rem; }
.field label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.5rem; }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1.05rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--rule);
  padding: 0.6rem 0; min-height: 46px; border-radius: 0;
  transition: border-color .2s var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); border-bottom-width: 2px; }
.field input::placeholder, .field textarea::placeholder { color: #434D5B; font-style: italic; }
.field .err { display: none; font-size: 0.88rem; color: #A3261C; margin-top: 0.45rem; }
.field.bad input, .field.bad textarea { border-color: #A3261C; }
.field.bad .err { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.send {
  margin-top: 0.5rem; background: var(--navy); color: #fff; border: 0; cursor: pointer;
  font-family: "Public Sans", sans-serif; font-size: 0.95rem; font-weight: 600;
  padding: 1.05rem 2rem; min-height: 48px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  transition: background-color .2s var(--ease);
}
.send:hover { background: var(--navy-deep); }
.send:disabled { opacity: .6; cursor: default; }
.hint { margin-top: 1rem; font-size: 0.88rem; color: var(--ink-2); }
.ok { display: none; border: 1px solid var(--rule); background: var(--paper-2); padding: 1.75rem; }
.ok.on { display: block; }
.ok b { font-family: "Schibsted Grotesk", "Segoe UI", Arial, sans-serif; font-size: 1.2rem; font-weight: 600; display: block; margin-bottom: 0.4rem; }

/* Footer */
.foot { background: var(--navy-deep); color: var(--on-dark-2); padding-top: clamp(3rem, 6vw, 4.5rem); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.foot img { height: 68px; width: auto; }
.foot .foot-kop { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark); margin-bottom: 1rem; font-family: "Public Sans", sans-serif; }
.foot ul { list-style: none; }
.foot ul a { display: inline-block; padding: 0.3rem 0; font-size: 0.95rem; text-decoration: none; color: var(--on-dark-2); }
.foot ul a:hover { color: var(--gold-lite); }
.foot .tag { font-family: "Schibsted Grotesk", "Segoe UI", Arial, sans-serif; font-style: italic; font-size: 1.05rem; color: var(--on-dark); margin-top: 1.25rem; }
.foot-bot { border-top: 1px solid rgba(255,255,255,0.14); padding: 1.4rem 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1.5rem; font-size: 0.85rem; }
.foot-bot a { color: var(--on-dark-2); text-decoration: none; display: inline-block; padding: 0.3rem 0; }
.foot-bot a:hover { color: #fff; }
.foot-bot .legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }

.rev { opacity: 0; transform: translateY(10px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.rev.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rev { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1024px) {
  .hero-tag { grid-column: 1 / -1; }
  .hero-main { grid-column: 1 / -1; }
  .hero-tag p { max-width: 44ch; }
  .sec-open .who, .sec-open .what { grid-column: 1 / -1; }
  .row .t { grid-column: 2 / span 11; }
  .row .d { grid-column: 2 / span 11; }
  .dienst-a { grid-column: 2 / span 11; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step { border-bottom: 1px solid var(--rule-soft); padding-right: 1.5rem; }
  .step:nth-child(2n) { border-right: 0; }
  .about .col-a, .about .col-b, .contact .col-a, .contact .col-b { grid-column: 1 / -1; }
  .masthead-in { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav { display: none; }
  .burger { display: flex; }
  .grid12 { gap: 1.5rem; }
  .row { padding: 1.4rem 0; gap: 0.5rem; }
  .dienst-a { grid-column: 1 / -1; }
  .dienst-a .sub { grid-template-columns: 1fr; gap: 0.3rem; }
  .row .n, .row .t, .row .d { grid-column: 1 / -1; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; padding-right: 0; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .facts div { grid-template-columns: 1fr; gap: 0.2rem; }
  .faq-q { grid-template-columns: 2rem 1fr auto; gap: 0.75rem; }
  .faq-a p { padding-left: 2.75rem; }
  .foot-grid { grid-template-columns: 1fr; gap: 2rem; }
  .masthead-in { grid-template-columns: 1fr; }
}

    /* ===== Aanpassingen ronde 3 ===== */

    /* Gouden merkbalk bovenaan de pagina */
    .brandbar { height: 4px; background: linear-gradient(90deg, var(--gold) 0%, var(--gold-lite) 45%, var(--gold) 100%); }
    .head { top: 0; }

    /* Hero: linkerkolom vult nu de volle hoogte */
    .hero-tag { flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 2.5rem; }
    .hero-tag .top { display: block; }
    .hero-tag p { margin-top: auto; }
    .hero h1 { position: relative; }
    .hero h1::after {
      content: ""; display: block; width: 84px; height: 3px; background: var(--gold); margin-top: 2rem;
    }
    .hero-cta .lnk { border-bottom-color: var(--gold); }
    .hero-cta .lnk svg { color: var(--gold-ink); }

    /* Klantenbalk: in kleur, groter, eigen band */
    .refs { border-top: 2px solid var(--gold); background: var(--paper-2); }
    .refs-in {
      max-width: var(--shell); margin: 0 auto; padding: 1.75rem var(--gut);
      display: flex; align-items: center; gap: clamp(1.5rem, 5vw, 4rem); flex-wrap: wrap;
    }
    .refs .label { flex: none; }
    .refs .logos { display: flex; align-items: center; gap: clamp(2rem, 6vw, 4.5rem); flex-wrap: wrap; }
    .refs .logos a { display: block; transition: transform .25s var(--ease); }
    .refs .logos a:hover { transform: translateY(-2px); }
    .refs img { height: 44px; width: auto; }
    .refs .tall img { height: 56px; }
    .refs .taller img { height: 72px; }
    @media (max-width: 720px) {
      .refs-in { gap: 1.25rem; }
      .refs img { height: 32px; }
      .refs .tall img { height: 41px; }
      .refs .taller img { height: 52px; }
    }

    /* Meer goud in de rest van de pagina */
    .step .sn { color: var(--gold); opacity: .55; }
    .step:first-child { }
    .portret { border-left: 3px solid var(--gold); }
    .sec-open .who .label--gold { display: inline-block; border-bottom: 2px solid var(--gold); padding-bottom: 0.5rem; }
    .send { border-bottom: 3px solid var(--gold); }
    .facts dd a { border-bottom: 1px solid var(--gold); text-decoration: none; }
    .facts dd a:hover { color: var(--gold-ink); }

    /* WhatsApp: zwevende knop met uitleg-ballon */
    .wa { position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 300; display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; }
    .wa-bubble {
 position: relative; background: var(--paper); border: 1px solid var(--rule); 
 padding: 1.1rem 2.9rem 1.1rem 1.2rem; max-width: 15rem;
 box-shadow: 0 12px 32px rgba(20,24,31,0.16);
 opacity: 0; transform: translateY(8px) scale(.97); pointer-events: none;
 transition: opacity .3s var(--ease), transform .3s var(--ease);
 }
    .wa-bubble.on { opacity: 1; transform: none; pointer-events: auto; }
    .wa-bubble p { font-family: "Schibsted Grotesk", "Segoe UI", Arial, sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
    .wa-bubble a { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; font-size: 0.9rem; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid #25D366; padding-bottom: 2px; }
    .wa-bubble a:hover { color: #1B7F45; }
    .wa-x {
 position: absolute; top: 0.4rem; right: 0.4rem; 
 background: none; border: 0; cursor: pointer; color: var(--ink-2); font-size: 1.2rem; line-height: 1;
 }
    .wa-x:hover { color: var(--ink); }
    .wa-btn {
      width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: grid; place-items: center;
      box-shadow: 0 10px 26px rgba(18,44,28,0.3); transition: transform .2s var(--ease);
    }
    .wa-btn:hover { transform: scale(1.06); }
    @media (prefers-reduced-motion: reduce) { .wa-bubble { transition: none; } }
    /* Tactiele terugkoppeling bij indrukken */
    .lnk:active, .wa-bubble a:active { transform: translateY(1px); }
    .send:active { transform: scale(.99); }
    .refs .logos a:active { transform: translateY(0); }

    /* ===== Werk / case ===== */
    .case { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem 2.5rem; align-items: start; }
    .case-txt { grid-column: 1 / span 5; }
    .case-vis { grid-column: 7 / span 6; }
    .case-txt h2, .case-txt h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 1.25rem; }
    .case-txt p + p { margin-top: 1rem; }
    .case-meta { margin-top: 2rem; border-top: 1px solid var(--rule); }
    .case-meta div { display: grid; grid-template-columns: 9rem 1fr; gap: 1.25rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule-soft); }
    .case-meta dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); padding-top: 0.25rem; }
    .case-meta dd { font-size: 0.98rem; }

    /* Nagebouwde interface, twee huisstijlen */
    .ui-stack { position: relative; }
    .ui {
      --ui-bar: #1B3054; --ui-accent: #C9880A; --ui-paper: #FFFFFF; --ui-line: #E4E8EE;
      --ui-ink: #16233A; --ui-mute: #5C6B80; --ui-font: "Public Sans", sans-serif;
      background: var(--ui-paper); border: 1px solid var(--rule); box-shadow: 0 18px 44px rgba(20,24,31,0.10);
      display: grid; grid-template-columns: 8.5rem 1fr; overflow: hidden; font-family: var(--ui-font);
    }
    .ui--alt {
      --ui-bar: #2F4A17; --ui-accent: #FFCE39; --ui-paper: #FDFDFB; --ui-line: #E6E9E0; --ui-ink: #1B2412;
      position: absolute; right: -1.5rem; bottom: -3.5rem; width: 62%; z-index: 2;
      box-shadow: 0 22px 50px rgba(20,24,31,0.18);
    }
    .ui-side { background: var(--ui-bar); padding: 0.9rem 0.75rem; }
    .ui-brand { height: 8px; width: 62%; background: rgba(255,255,255,0.85); border-radius: 2px; margin-bottom: 1rem; }
    .ui-nav { display: flex; flex-direction: column; gap: 0.5rem; }
    .ui-nav span { font-size: 0.6rem; color: rgba(255,255,255,0.72); letter-spacing: 0.03em; }
    .ui-nav span.on { color: #fff; font-weight: 600; border-left: 2px solid var(--ui-accent); padding-left: 0.4rem; margin-left: -0.4rem; }
    .ui-main { padding: 0.9rem 1rem 1.1rem; }
    .ui-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
    .ui-h b { font-size: 0.78rem; color: var(--ui-ink); font-weight: 600; }
    .ui-btn { font-size: 0.58rem; font-weight: 700; color: var(--ui-ink); background: var(--ui-accent); padding: 0.25rem 0.5rem; border-radius: 3px; }
    .ui-tot { display: flex; gap: 0.5rem; margin-bottom: 0.85rem; }
    .ui-tot div { flex: 1; border: 1px solid var(--ui-line); padding: 0.45rem 0.5rem; }
    .ui-tot i { display: block; font-style: normal; font-size: 0.52rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-mute); }
    .ui-tot b { font-size: 0.8rem; color: var(--ui-ink); }
    .ui table { width: 100%; border-collapse: collapse; font-size: 0.6rem; }
    .ui th { text-align: left; font-size: 0.52rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-mute); font-weight: 600; padding-bottom: 0.35rem; border-bottom: 1px solid var(--ui-line); }
    .ui td { padding: 0.42rem 0; border-bottom: 1px solid var(--ui-line); color: var(--ui-ink); }
    .ui td:last-child, .ui th:last-child { text-align: right; }
    .ui .pill { font-size: 0.5rem; font-weight: 700; padding: 0.1rem 0.35rem; border-radius: 2px; }
    .ui .pill-ok { background: #E6F4EC; color: #1B5E38; }
    .ui .pill-wait { background: #FBF0DA; color: #7A5205; }
    .ui-cap { margin-top: 4.5rem; font-size: 0.9rem; color: var(--ink-2); display: flex; gap: 0.75rem; align-items: flex-start; }

    @media (max-width: 1024px) {
      .case-txt, .case-vis { grid-column: 1 / -1; }
      .ui--alt { position: static; width: 100%; margin-top: 1.5rem; }
      .ui-cap { margin-top: 1.5rem; }
    }
    @media (max-width: 720px) {
      .case-meta div { grid-template-columns: 1fr; gap: 0.2rem; }
      .ui { grid-template-columns: 6rem 1fr; }
      .ui-nav span { font-size: 0.55rem; }
    }

    /* ===== Correctie werkwijze en sectiekoppen ===== */
    .sec-open { align-items: start; }
    .sec-open .who { padding-top: 0.7rem; }

    .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2.5rem; }
    .step { position: relative; padding: 2.25rem 0 2rem; border-right: 0; }
    .step::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.25rem; height: 2px; background: var(--gold); }
    .step:not(:last-child)::after { content: ""; position: absolute; top: 2rem; bottom: 0.75rem; right: -1.25rem; width: 1px; background: var(--rule-soft); }
    .step:first-child { border-left: 0; padding-left: 0; }
    .step .sn { opacity: 1; color: #8F6205; }

    @media (max-width: 1024px) {
      .step { padding-bottom: 1.75rem; border-bottom: 1px solid var(--rule-soft); }
      .step:not(:last-child)::after { display: none; }
    }

    .hero .hero-desc { margin-top: 1.4rem; }

    /* ===== Weggehaalde AI-kenmerken ===== */

    /* a. streepje voor een label in klein kapitaal */
    .ui-cap { display: block; }

    /* b. gekleurde randstrip aan de linkerkant */
    .portret { border-left: 1px solid var(--rule); border-top: 3px solid var(--ink); }
    .wa-bubble { border-left: 1px solid var(--rule); }

    /* c. losse accentrand onder een knop */
    .send { border-bottom: 0; }

    /* d. verloop in de merkbalk */
    .brandbar { background: var(--gold); }

    /* Goud als tekst op het middenblauw van de masthead: extra licht voor 7:1 */
    .masthead dd a:hover { color: #F2C46A; border-color: #F2C46A; }

/* ===== Kruimelpad ===== */
.kruimel { border-bottom: 1px solid var(--rule-soft); }
.kruimel .shell { display: flex; align-items: center; gap: 0.6rem; padding-block: 0.9rem; font-size: 0.82rem; color: var(--ink-2); }
.kruimel a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; padding: 0.25rem 0; }
.kruimel a:hover { color: var(--ink); border-bottom-color: var(--gold); }
.kruimel span[aria-hidden] { color: var(--rule); }
.kruimel span[aria-current] { color: var(--ink); font-weight: 500; }

/* Dienstpagina: kop in de sectie-opener krijgt de h1-maat */
.sec-open h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); text-wrap: balance; }
.portret .lnk { margin-top: 0.5rem; }
.work .row .t a { color: inherit; }
.work .row:hover .t a { color: var(--gold-ink); }

/* ===== Extra bouwsels in de werksectie =====
   Deze twee stonden naast elkaar. De ene heeft een nagebouwd schermpje, de andere twee
   echte schermafdrukken, dus de kolommen liepen ver uit elkaar en de afdrukken waren te
   klein om er iets op te zien. Ze staan nu onder elkaar over de volle breedte, met de
   tekst in een smalle kolom en het beeld in een brede: hetzelfde patroon als de case
   hierboven, zodat de hele sectie dezelfde opbouw houdt. */
.bouwsels { display: grid; grid-template-columns: 1fr; gap: clamp(3rem, 6vw, 5rem); margin-top: clamp(3rem, 6vw, 4.5rem); }
.bouwsel {
  border-top: 2px solid var(--gold); padding-top: 1.5rem;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem 2.5rem; align-items: start;
}
.bouwsel-txt { grid-column: 1 / span 5; }
.bouwsel-vis { grid-column: 7 / span 6; }
.bouwsel-vis .mini { margin-top: 0; }
.bouwsel-vis .app-schot:last-of-type { margin-bottom: 0; }
.bouwsel-cta { margin-top: 1.5rem; }
.bouwsel h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-bottom: 0.9rem; }
.bouwsel p { color: var(--ink-2); font-size: 1rem; }
.bouwsel p + p { margin-top: 0.85rem; }
.bouwsel dl { margin-top: 1.5rem; border-top: 1px solid var(--rule-soft); }
.bouwsel dl div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule-soft); }
.bouwsel dt { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); padding-top: 0.25rem; }
.bouwsel dd { font-size: 0.95rem; }
@media (max-width: 1024px) {
  .bouwsel { grid-template-columns: 1fr; gap: 1.75rem; }
  .bouwsel-txt, .bouwsel-vis { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .bouwsel dl div { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ===== Compacte nagebouwde interfaces bij de bouwsels ===== */
.mini {
  --m-bar: #1B3054; --m-accent: #C9880A;
  margin-top: 1.75rem; background: #fff; border: 1px solid var(--rule);
  box-shadow: 0 14px 34px rgba(20,24,31,0.10); font-family: "Public Sans", sans-serif; overflow: hidden;
}
.mini--funnel { --m-bar: #24406F; --m-accent: #3F7D52; }
.mini-kop { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.8rem; background: var(--m-bar); }
.mini-kop b { font-size: 0.85rem; color: #fff; font-weight: 600; }
.mini-kop span { font-size: 0.66rem; color: rgba(255,255,255,0.72); letter-spacing: 0.08em; text-transform: uppercase; }
.mini-kpi { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #E3E6EB; }
.mini-kpi div { padding: 0.55rem 0.7rem; border-right: 1px solid #E3E6EB; }
.mini-kpi div:last-child { border-right: 0; }
.mini-kpi i { display: block; font-style: normal; font-size: 0.5rem; letter-spacing: 0.09em; text-transform: uppercase; color: #6B7484; }
.mini-kpi b { font-size: 0.82rem; color: #16233A; }
.mini-body { padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.45rem; }
.mini-rij { border: 1px solid #E3E6EB; border-left: 2px solid var(--m-accent); padding: 0.45rem 0.6rem; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.mini-rij .l { min-width: 0; }
.mini-naam { font-size: 0.72rem; font-weight: 600; color: #16233A; }
.mini-sub { font-size: 0.6rem; color: #5B6270; margin-top: 0.1rem; }
.mini-pill { flex: none; font-size: 0.5rem; font-weight: 700; padding: 0.14rem 0.4rem; letter-spacing: 0.03em; }
.p-ok { background: #E6F4EC; color: #1B5E38; }
.p-wacht { background: #FBF0DA; color: #7A5205; }
.p-let { background: #FBE6E2; color: #8C2A1E; }
.mini-let { padding: 0.55rem 0.8rem; background: #FDF6E6; border-top: 1px solid #F0E3C6; font-size: 0.7rem; color: #6B4A05; }
.mini-cap { margin-top: 0.9rem; font-size: 0.85rem; color: var(--ink-2); }

/* ===== Ronde 4: eigen gezicht (Schibsted Grotesk, koel wit) en gevulde hero-kolom ===== */

/* Dienstenindex in de linkerkolom van de hero, in plaats van de geplande foto */
.hero-index { width: 100%; margin-top: 2.25rem; border-top: 1px solid var(--rule); }
.hero-index a {
  display: flex; align-items: baseline; gap: 0.9rem;
  padding: 0.9rem 0; min-height: 44px; border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  font-family: "Schibsted Grotesk", "Segoe UI", Arial, sans-serif;
  font-size: 1.05rem; font-weight: 600; color: var(--ink);
  transition: color .2s var(--ease), padding-left .25s var(--ease);
}
.hero-index a:hover { color: var(--gold-ink); padding-left: 0.4rem; }
@media (max-width: 1024px) {
  /* Op smalle schermen is er geen lege kolom; daar volstaat de dienstenlijst verderop */
  .hero-index { display: none; }
}

/* ===== Twee eigen gezichten voor de mini-interfaces ===== */

/* Planbord: weekraster met ordervakken per dag */
.mini-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: #E3E6EB; }
.mini-dag { background: #FDFDFE; min-height: 8rem; padding: 0.4rem 0.35rem; display: flex; flex-direction: column; gap: 0.35rem; }
.mini-dag.dag-nu { background: #F3F6FB; }
.mini-dag > i { font-style: normal; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6B7484; }
.mini-dag.dag-nu > i { color: #24406F; font-weight: 700; }
.mini-leeg { font-size: 0.68rem; color: #AEB6C2; }
.mini-order { border: 1px solid #E3E6EB; border-left: 2px solid var(--m-accent); background: #FFFFFF; padding: 0.32rem 0.38rem; }
.mini-order b { display: block; font-size: 0.72rem; font-weight: 600; color: #16233A; line-height: 1.25; }
.mini-order span { display: block; font-size: 0.62rem; color: #5B6270; margin-top: 0.12rem; line-height: 1.3; }
.mini-order.o-ok { border-left-color: #3F7D52; }
.mini-order.o-wacht { border-left-color: #C9880A; }
.mini-order.o-let { border-left-color: #A3392B; background: #FDF3F1; }

/* Belwachtrij: voortgang, afgevinkte nummers en de actieve beller uitgeklapt */
.mini-balk { height: 3px; background: #E3E6EB; }
.mini-balk span { display: block; height: 100%; background: var(--m-accent); }
.mini-lijst { display: flex; flex-direction: column; }
.mini-beller { display: flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.8rem; border-bottom: 1px solid #E3E6EB; font-size: 0.6rem; color: #5B6270; }
.mini-beller:last-child { border-bottom: 0; }
.mini-beller b { font-weight: 600; color: #16233A; }
.mini-beller .mr { margin-left: auto; font-size: 0.5rem; text-align: right; }
.mini-beller .mk { flex: none; width: 1rem; height: 1rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.5rem; border: 1px solid #C9CFD8; color: #6B7484; }
.mini-beller.klaar b { font-weight: 500; }
.mini-beller.klaar .mk { background: #E6F4EC; border-color: #BFE3CC; color: #1B5E38; }
.mini-actief { border-left: 3px solid var(--m-accent); background: #F4F8F5; padding: 0.55rem 0.8rem 0.65rem; border-bottom: 1px solid #E3E6EB; }
.ma-kop { display: flex; align-items: center; gap: 0.5rem; }
.ma-kop b { font-size: 0.68rem; font-weight: 700; color: #16233A; }
.ma-nu { font-size: 0.48rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #1B5E38; background: #E6F4EC; padding: 0.12rem 0.4rem; }
.ma-feit { font-size: 0.55rem; color: #445062; margin-top: 0.3rem; line-height: 1.4; }
.ma-advies { color: #1B5E38; font-weight: 600; }
.mini-knoppen { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.mini-knop { font-size: 0.5rem; font-weight: 700; padding: 0.24rem 0.5rem; border: 1px solid #C9CFD8; color: #445062; background: #fff; }
.mini-knop.aan { background: #24406F; border-color: #24406F; color: #fff; }

/* ===== Juridische pagina's (voorwaarden, privacy) ===== */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin: 2.5rem 0 0.8rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-2); margin-bottom: 0.9rem; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }
.prose a:hover { color: var(--gold-ink); }

    /* ===== Mobiele correcties: geen horizontale scroll, stappen netjes stapelen ===== */
    @media (max-width: 1024px) {
      .steps { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
    }
    @media (max-width: 720px) {
      .sec-open, .about, .contact, .case { grid-template-columns: 1fr; gap: 1.5rem; }
      .sec-open .who, .sec-open .what, .about .col-a, .about .col-b,
      .contact .col-a, .contact .col-b, .case .case-txt, .case .case-vis { grid-column: 1 / -1; }
      .steps { grid-template-columns: 1fr; column-gap: 0; }
      .step:not(:last-child)::after { display: none; }
    }


/* ===== Voor en na: wat repeterend werk kost en wat ervoor in de plaats komt ===== */
.vn-wrap { grid-column: 1 / -1; margin-top: 3rem; }
.vn-wrap h2, .vn-wrap h3 { font-size: clamp(1.3rem, 2.2vw, 1.85rem); margin-bottom: 0.5rem; }
.vn-sub { color: var(--ink-2); max-width: 62ch; margin-bottom: 1.5rem; }
.vn { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); }
.vn-hd {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); padding: 1rem 1.6rem; border-bottom: 1px solid var(--rule);
}
.vn-hd.na { color: var(--gold-ink); }
.vn-c { padding: 1.2rem 1.6rem; border-bottom: 1px solid var(--rule-soft); }
.vn-c b {
  display: block; font-family: "Schibsted Grotesk", "Segoe UI", Arial, sans-serif;
  font-size: 1.08rem; font-weight: 600; margin-bottom: 0.2rem;
}
.vn-c span { display: block; font-size: 0.95rem; color: var(--ink-2); }
.vn .voor { background: var(--paper-2); border-right: 1px solid var(--rule); }
.vn .na b { color: var(--gold-ink); }
.vn > .vn-c:nth-last-child(-n+2) { border-bottom: 0; }
.vn-cta { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }

@media (max-width: 720px) {
  .vn { grid-template-columns: 1fr; }
  .vn-hd { display: none; }
  .vn .voor { border-right: 0; }
  .vn-c::before {
    display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.4rem;
  }
  .vn-c.voor::before { content: "Zoals het ging"; }
  .vn-c.na::before { content: "Zoals het nu gaat"; color: var(--gold-ink); }
  .vn > .vn-c { border-bottom: 1px solid var(--rule-soft); }
  .vn > .vn-c.na { border-bottom: 2px solid var(--rule); }
  .vn > .vn-c:last-child { border-bottom: 0; }
}

/* Brede variant van de tijdwinst-lijst, voor de voorbeeldenblokken */
.tijdwinst--breed { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
@media (max-width: 720px) { .tijdwinst--breed { grid-template-columns: 1fr; } }

/* Strook met beeldvarianten onder een case */
.beeldstrook { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.25rem; }
.beeldstrook img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); }
@media (max-width: 720px) { .beeldstrook { grid-template-columns: 1fr 1fr; gap: 0.75rem; } }

/* Smallere tekstkolom waar de rechterkolom veel langer is (marketing, praktische hulp) */
@media (min-width: 721px) {
  .about--smal .col-a { grid-column: 1 / span 5; }
  .about--smal .col-b { grid-column: 7 / span 6; }
}

/* Link midden in lopende tekst; .lnk is een losse call-to-action en breekt in een zin lelijk af */
.tekst-lnk { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold); }
.tekst-lnk:hover { color: var(--gold-ink); border-bottom-color: var(--gold-ink); }

.beeldstrook--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .beeldstrook--2 { grid-template-columns: 1fr 1fr; } }

/* ===== Mobiel: tapdoelen, leesbaarheid en de nagebouwde schermen (bewust achteraan) ===== */
@media (max-width: 720px) {
  /* accordeons waren 24 px hoog; een vinger heeft 44 px nodig */
  .dienst-q { min-height: 44px; padding: 0.5rem 0; }
  .faq-q { min-height: 44px; }

  /* losse links in de contactlijst, de footer en de onderbalk krijgen tapruimte */
  .facts dd a { display: inline-block; padding: 0.5rem 0; }
  .foot ul a { padding: 0.6rem 0; }
  .foot-bot a { padding: 0.5rem 0; }

  /* labels in de lijsten stonden op 11 px; dat leest niet op een telefoon */
  .facts dt, .case-meta dt { font-size: 0.78rem; }
  .label, .top { font-size: 0.75rem; }

  /* de twee nagebouwde schermen niet over elkaar, maar onder elkaar op volle breedte */
  .ui--alt { position: static; width: 100%; margin-top: 1.25rem; right: auto; bottom: auto; }

  /* telefoonnummer in de kerngegevens, de kaarten onder "Verder kijken" en het kruimelpad */
  .masthead-in dd a { display: inline-block; padding: 0.5rem 0; }
  .work .t a { display: inline-block; padding: 0.4rem 0; }
  .kruimel a { display: inline-block; padding: 0.7rem 0; }
}

/* ===== Hero omgedraaid: de kop links, de dienstenlijst rechts ===== */
@media (min-width: 721px) {
  /* grid-row expliciet: de tag staat eerst in de html, zonder dit belandt de kop op een tweede rij */
  .hero-main { grid-column: 1 / span 7; grid-row: 1; }
  .hero-tag  { grid-column: 9 / span 4; grid-row: 1; }
}

/* ===== Batch uit de audit van 28 augustus (bewust achteraan) ===== */

/* De focusrand was donkerblauw op donkerblauwe vlakken, dus onzichtbaar bij tabben. */
.masthead :focus-visible,
.quote :focus-visible,
.foot :focus-visible,
.rvd-ck :focus-visible { outline-color: var(--gold-lite); }
.quote .knop-goud:focus-visible { outline-color: var(--on-dark); }

/* Dichtgeklapte panelen mogen niet in de tabvolgorde blijven staan. */
.dienst-a, .faq-a { visibility: hidden; transition: grid-template-rows .35s var(--ease), visibility 0s linear .35s; }
.dienst-i.on .dienst-a, .faq-i.on .faq-a { visibility: visible; transition: grid-template-rows .35s var(--ease), visibility 0s; }

/* Tapdoelen die nog onder de 44 px zaten. */
.foot-bot a { padding: 0.7rem 0; }
.work .t a { display: inline-block; padding: 0.55rem 0; }
.wa-x { width: 44px; height: 44px; }
.refs .logos a { padding: 0.5rem 0; }

/* Beweging beperken werd maar op drie plekken gerespecteerd, van de 22. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* De zwevende WhatsApp-knop lag op mobiel over de verzendknop van het formulier. */
@media (max-width: 720px) {
  .p-contact .wa { display: none; }
}

/* Foutmelding bij het versturen, los van de veldvalidatie. */
.send-fout { margin-bottom: 0.9rem; color: #A3261C; font-size: 0.95rem; font-weight: 500; }
.send-fout[hidden] { display: none; }

/* Kop die de structuur klopt maar visueel niet nodig is (404-pagina). */
.sr-kop {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===== Nagebouwde schermen op een telefoon =====
   Op 375 px stonden het planbord en de belwachtrij nog in hun desktopvorm: vijf dagkolommen
   van 65 px met tekst vanaf 7,7 px. Dat zijn juist de beelden die laten zien dat die systemen
   echt bestaan, dus daar moet je op een telefoon iets van kunnen lezen. */
@media (max-width: 720px) {
  /* het weekraster wordt een lijst: dag links, wat er die dag speelt rechts */
  .mini-week { grid-template-columns: 1fr; }
  .mini-dag {
    min-height: 0; flex-direction: row; align-items: flex-start;
    gap: 0.6rem; padding: 0.55rem 0.7rem;
  }
  .mini-dag > i { flex: none; width: 3.4rem; font-size: 0.66rem; padding-top: 0.1rem; }
  .mini-dag > :not(i) { flex: 1; min-width: 0; }
  .mini-order { padding: 0.4rem 0.5rem; }
  .mini-order b { font-size: 0.76rem; }
  .mini-order span { font-size: 0.7rem; }
  .mini-leeg { font-size: 0.7rem; padding-top: 0.1rem; }

  /* de belwachtrij en de kop- en kengetallen mee omhoog */
  .mini-kop b { font-size: 0.82rem; }
  .mini-kop span { font-size: 0.66rem; }
  .mini-kpi i { font-size: 0.62rem; }
  .mini-kpi b { font-size: 0.9rem; }
  .mini-naam { font-size: 0.8rem; }
  .mini-sub, .mini-let { font-size: 0.7rem; }
  .mini-pill { font-size: 0.62rem; padding: 0.18rem 0.45rem; }
  .mini-beller { font-size: 0.72rem; gap: 0.6rem; padding: 0.5rem 0.8rem; }
  .mini-beller .mr { font-size: 0.7rem; }
  .mini-beller .mk { width: 1.3rem; height: 1.3rem; font-size: 0.7rem; }

  /* het uitgeklapte gesprek in de belwachtrij */
  .ma-kop b { font-size: 0.78rem; }
  .ma-nu { font-size: 0.62rem; }
  .ma-feit { font-size: 0.7rem; }
  .mini-kop span, .mini-dag > i { font-size: 0.72rem; }
}

/* Twee kleuren haalden ook op desktop de contrastnorm niet. */
.mini-leeg { color: #6B7484; }
.mini-beller.klaar b { color: #5B6270; }

/* De klantnamen ook in lopende tekst, zodat ze te citeren zijn en niet alleen een logo zijn. */
.refs-tekst {
  margin-top: 1.1rem; max-width: 78ch; font-size: 0.95rem; line-height: 1.6; color: var(--ink-2);
}
.refs-tekst p + p { margin-top: 0.45rem; }
@media (max-width: 720px) { .refs-tekst { font-size: 0.92rem; margin-top: 0.9rem; } }

/* Tussenkoppen binnen de contactkolommen; buiten de kolom zouden ze het raster breken. */
.kolom-kop {
  font-size: 1.15rem; font-weight: 600; margin-bottom: 1.25rem;
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule);
}

/* Echte schermafdrukken uit een app, in plaats van een nagebouwd schermpje. */
.app-schot { margin: 0 0 1.5rem; }
.app-schot img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); }
.app-schot figcaption { margin-top: 0.7rem; }

/* Merkteken in de blauwe blokken; het logo voor donkere ondergrond, rustig gehouden.
   Het citaat is bewust smal (20ch), dus het logo staat rechts naast de tekst en vult
   de ruimte die daardoor overblijft. Onder 900px past dat niet meer naast elkaar en
   gaat het logo terug naar boven de tekst. */
.quote { position: relative; }
.quote .shell {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; column-gap: clamp(2rem, 5vw, 4.5rem);
}
.quote blockquote { grid-column: 1; grid-row: 1; }
.quote .cta { grid-column: 1; grid-row: 2; }
.quote-logo {
  grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center;
  width: 220px; height: auto; opacity: 0.9;
}
@media (max-width: 900px) {
  .quote .shell { grid-template-columns: 1fr; }
  .quote-logo { grid-column: 1; grid-row: 1; justify-self: start; width: 88px; margin-bottom: 1.75rem; }
  .quote blockquote { grid-row: 2; }
  .quote .cta { grid-row: 3; }
}
@media (max-width: 720px) { .quote-logo { width: 72px; margin-bottom: 1.25rem; } }