@font-face{font-family:Jura;src:url('/assets/jura.woff2') format('woff2');font-style:normal;font-weight:300 700;font-display:swap}
@font-face{font-family:Montserrat;src:url('/assets/montserrat.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
/* Metric-matched fallback for body text. Both webfonts use font-display:swap, so Arial
   paints first; Montserrat then arrives ~14% wider and the whole page reflows. Scaling
   the fallback up closes that gap so the swap is nearly invisible.
   size-adjust is measured from rendered text, not from the font's xAvgCharWidth: that
   proxy was wrong here and made things worse when tried. No ascent/descent overrides —
   every line-height in this stylesheet is an explicit number, so they would change the
   baseline without fixing anything. Jura gets no fallback face: at 5% it is close enough
   that the correction cost more than it saved. */
@font-face{font-family:"Montserrat fallback";src:local("Arial");size-adjust:113.7%}
:root{--navy:#0b0832;--teal:#6fe7dd;--blue:#3490de;--magenta:#ce3cc5;--white:#fff;--muted:#45435c;--line:#d8d7df;--pale:#f4f4f7;--link:#2a73b2;--space:clamp(3.5rem,7.5vw,7rem)}
*{box-sizing:border-box}html{scroll-padding-top:2rem;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}body{margin:0;font-family:Montserrat,"Montserrat fallback",Arial,sans-serif;font-size:1.0625rem;line-height:1.7;color:var(--navy);background:var(--navy);font-synthesis:none}h1,h2,h3,p,figure{margin:0}h1,h2{font-family:Jura,Arial,sans-serif;font-weight:600;line-height:1.13;letter-spacing:-.035em}h1{font-size:clamp(2.3rem,4.1vw,3.75rem);text-wrap:balance}h2{font-size:clamp(2rem,3.15vw,2.75rem);text-wrap:balance}h3{font-size:clamp(1.25rem,2vw,1.5rem);font-weight:600;line-height:1.35;letter-spacing:-.025em}
/* Safety net for long Dutch compounds. "zichtbaarheidsbasis" is 360px wide at the mobile
   h1 size and the column is 335px, so without this it pushes the page sideways. It only
   takes effect when a single word cannot fit, so no heading that already fits moves. */
h1,h2,h3{overflow-wrap:break-word}a{color:inherit;text-underline-offset:.25em;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}img{display:block;max-width:100%;height:auto}::selection{background:var(--teal);color:var(--navy)}:focus-visible{outline:3px solid var(--blue);outline-offset:5px}.opening :is(.site-header,.hero,.hero-foot,.contact,.site-footer) :focus-visible{outline-color:var(--teal)}.wrap{width:min(1160px,calc(100% - 80px));margin-inline:auto}.opening{color:var(--white)}.light-section{background:var(--white);color:var(--navy)}.eyebrow{font-size:.875rem;font-weight:600;line-height:1.5;letter-spacing:.055em;margin-bottom:1.25rem}.site-header{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding-block:1.85rem;border-bottom:1px solid #ffffff24}.wordmark{text-decoration:none;font-family:Jura,Arial,sans-serif;font-size:1.625rem;font-weight:600;line-height:1.2;letter-spacing:-.035em;white-space:nowrap}.wordmark span{font-weight:400}.wordmark .wordmark-dot{font-weight:700;color:var(--teal)}.header-end{display:flex;align-items:center;gap:2.1rem}
.site-header nav{display:flex;align-items:center;gap:2.1rem}
/* Language link. Separated from the main nav by a rule so it does not read as a sixth
   destination; full language name on wide screens, two-letter code where space is tight. */
.lang-switch{margin:0;display:flex;align-items:center;gap:1rem;padding-left:2.1rem;border-left:1px solid #ffffff30}
/* Underlined on purpose. Without it this is grey text in a corner with no affordance: an
   audit of every link on the page flagged it and the wordmark as the only two with nothing
   marking them as clickable, and unlike a wordmark a language name is not a convention
   people already know to click. Hover cannot carry the job on a touch screen. */
.lang-switch a{display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;color:#c5c3d3}
.lang-switch a:hover{color:#fff;text-decoration-thickness:2px}
.light-section .lang-switch{border-left-color:var(--line)}.site-header nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:.9375rem;font-weight:500}.site-header nav a:hover{text-decoration:underline}.site-header nav .nav-contact{color:var(--teal);gap:.6rem}.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,5rem);padding-top:4.5rem;padding-bottom:3.5rem;align-items:center}.hero .eyebrow{color:var(--teal)}.hero h1 span{color:var(--teal)}.hero-intro{margin-top:1.7rem;font-size:1.0625rem;line-height:1.75;color:#e4e3ec;max-width:56ch}.hero-actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:2rem}.button{display:inline-flex;align-items:center;justify-content:center;gap:1.3rem;min-height:54px;padding:.8rem 1.15rem;background:var(--teal);color:var(--navy);text-decoration:none;font-size:.9375rem;font-weight:600;border:1px solid transparent;transition:background .15s}.button:hover{background:white}.quiet-link{font-size:.875rem;padding-block:.7rem}.response-note{font-size:.875rem;color:#c5c3d3;margin-top:.9rem}.hero-email{display:inline-block;font-size:.875rem;padding-block:.3rem;color:#e4e3ec}.portrait{position:relative;margin-top:.5rem;padding-bottom:1.5rem}.portrait:after{content:'';position:absolute;width:3px;right:-14px;top:0;bottom:3.75rem;background:linear-gradient(180deg,var(--teal),var(--blue),var(--magenta))}/* <picture> is inline by default; without this the portrait box collapses and the image
   lands in a different place once it loads. */
.portrait picture{display:block}
.portrait img{width:100%;aspect-ratio:1;object-fit:cover}.portrait figcaption{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;font-size:.875rem;color:#cfcedb}.portrait figcaption span:first-child{font-weight:600;color:white}.hero-foot{display:flex;align-items:center;gap:1.5rem;padding-bottom:3.5rem;color:#c5c3d3}.hero-foot p{font-size:.9375rem;max-width:72ch}.fine-rule{flex:0 0 40px;height:2px;background:var(--teal)}.split-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(3rem,8vw,7.5rem)}.approach{padding-block:var(--space)}.prose p+p{margin-top:1.35rem}.prose{max-width:65ch}.accent-dot{color:var(--link)}.services{padding-bottom:var(--space)}.section-heading{margin-bottom:3rem}.section-heading .eyebrow{color:var(--muted);margin-bottom:.7rem}.service-row{display:grid;grid-template-columns:3rem minmax(0,.8fr) minmax(0,1.3fr);gap:2rem;padding-block:2.2rem;border-top:1px solid var(--line)}.service-row:last-child{border-bottom:1px solid var(--line)}.service-row h3{padding-top:.2rem;overflow-wrap:break-word}.service-row p{color:var(--muted);max-width:60ch}.service-number{font-family:Jura,Arial,sans-serif;font-size:1.625rem;font-weight:500;color:var(--link);line-height:1.35}.about{padding-block:var(--space);background:var(--pale);color:var(--navy)}.about .questions{font-family:Jura,Arial,sans-serif;font-size:1.75rem;line-height:1.4;font-weight:600;letter-spacing:-.025em;margin-bottom:1.5rem}.partner{padding-block:3rem}.partner-inner{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(3rem,8vw,7.5rem);align-items:center}.partner-label{display:flex;gap:2rem;align-items:center}.partner-label .eyebrow{margin:0;color:var(--muted)}.partner-label p{line-height:1.6}.partner-detail{font-size:.875rem;line-height:1.7;color:var(--muted)}.partner-detail a{display:inline-block;color:var(--link);margin-top:.6rem;padding-block:.3rem}.contact{padding-block:var(--space);border-top:2px solid var(--teal)}.contact .eyebrow{color:var(--teal)}.contact h2{font-size:clamp(2.25rem,3.5vw,3.15rem)}.contact-details>p{color:#e4e3ec}.contact-email{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.75rem;padding-block:.65rem;border-bottom:1px solid #ffffff50;text-decoration:none;font-family:Jura,Arial,sans-serif;font-weight:600;font-size:clamp(1.25rem,2.15vw,1.9rem);overflow-wrap:anywhere}.contact-email:hover{color:var(--teal);border-color:var(--teal)}.contact-details .phone{font-size:.9375rem;margin-top:1.25rem}.phone a{display:inline-block;padding-block:.4rem;margin-left:.5rem}.site-footer{border-top:1px solid #ffffff24;display:flex;justify-content:space-between;align-items:center;gap:2rem;padding-block:2.5rem}.site-footer p{font-size:.875rem;color:#c5c3d3;margin-top:.75rem}.company-link{display:flex;flex-direction:column;align-items:flex-end;gap:.8rem;text-decoration:none;font-size:.8125rem;color:#c5c3d3}.company-link:hover span{text-decoration:underline}.company-link img{width:120px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;z-index:10;left:1rem;top:-10rem;background:var(--teal);color:var(--navy);padding:1rem}.skip-link:focus{top:1rem}
.partner-badge{display:inline-block;flex:none;padding:.9rem;background:#fff;border:1px solid var(--line);line-height:0;transition:border-color .15s}
.partner-badge img{width:132px;height:auto}
.partner-badge:hover{border-color:var(--link)}
@media (max-width:620px){.partner-badge img{width:112px}}
/* Diensten page, CRO pass. Scoped to [data-page="services"] where a rule is shared with
   other pages, so Home and the detail pages keep their accepted design. */

/* Three services side by side so they can be compared, not read in sequence. Square and
   line-based, per DESIGN-BRIEF: no rounded cards, no shadows, no gradients. */
.choices{padding-block:var(--space)}
.service-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line);margin-inline:-1.75rem}
.service-choice{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;padding:2.25rem 1.75rem}
.service-choice+.service-choice{border-left:1px solid var(--line)}
.service-choice p{color:var(--muted);margin:0}
/* Push the link to the bottom so the three read as equal-weight options. */
.service-choice .text-link{margin-top:auto;padding-top:.5rem;display:inline-flex;align-items:center;min-height:44px}
/* Stretched link: the whole block is the click target, but there is still exactly one
   tabstop and one descriptive link text, per NL-CONTENT-PLAN section 7. */
.service-choice .text-link::after{content:'';position:absolute;inset:0}
.service-choice:hover{background:var(--pale)}
.service-choice:hover .text-link{text-decoration-thickness:2px}
.service-choice:focus-within{background:var(--pale)}
/* The number is decoration; it must not outrank the service name. */
.service-choice .service-number{font-size:.9375rem;font-weight:700;letter-spacing:.09em;line-height:1}
/* The self-selection line: the first thing read after the name, so it stays close to it. */
.service-choice .choice-for{color:var(--navy);font-weight:600;margin-top:-.2rem}

/* Proof at the decision point. Stars are our own shapes in the brand accent, never
   Google's asset, and always next to a link to the source so the claim is checkable.
   No Review/AggregateRating markup: self-serving reviews earn no rich result and the
   markup would be pure risk. check.py blocks those fields. */
/* Stacked on purpose: side by side depended on a few pixels of available width. */
.proof{display:flex;flex-direction:column;align-items:flex-start;gap:.85rem;margin-top:2.25rem;padding-bottom:2.25rem;border-bottom:1px solid var(--line)}
.proof-score{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;text-decoration:none;font-size:.9375rem;color:var(--navy);flex:none}
.proof-score .stars{fill:var(--magenta);flex:none}
.proof-score strong{font-weight:700}
.proof-score span{text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.proof-score:hover span{text-decoration-thickness:2px}
.proof-quote{margin:0;max-width:62ch}
.proof-quote blockquote{margin:0}
.proof-quote p{margin:0;color:var(--navy);font-size:1.0625rem}
.proof-quote p::before{content:'\201C'}
.proof-quote p::after{content:'\201D'}
.proof-quote figcaption{margin-top:.35rem;font-size:.875rem;color:var(--muted)}
@media (max-width:760px){.proof{gap:1rem;margin-top:1.75rem;padding-bottom:1.75rem}}

/* Catches the visitor who cannot choose, at the moment the choice is asked. */
.choice-help{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2.5rem;margin-top:2.5rem}
.choice-help p{color:var(--muted);max-width:52ch;margin:0}
/* Teal fill with navy text stays the only primary action (BRAND.md); on a white surface
   it needs a defined edge to still read as a button. */
.choice-help .button{border-color:var(--navy)}
/* Inside an article the help block sits within .prose, whose `a` rule is more specific
   than `.button` and was repainting the button's label link-blue and underlining it. */
.prose .button{color:var(--navy);text-decoration:none}

/* Engagement models are decision information: give each option its own scannable block. */
.engagement-list{list-style:none;padding:0;margin:0 0 1.35rem}
.engagement-list li{padding-block:1.05rem;border-top:1px solid var(--line)}
.engagement-list li:last-child{border-bottom:1px solid var(--line)}
.engagement-list strong{display:block;margin-bottom:.1rem}

/* The left column of a split section is otherwise 76-81% empty on this page; keeping the
   heading in view gives that space a job while the reader scans the text beside it. */
@media (min-width:1001px){
  [data-page="services"] .content-section .split-section>:first-child{position:sticky;top:2rem;align-self:start}
}
@media (max-width:1000px){
  .service-choices{grid-template-columns:minmax(0,1fr);margin-inline:0}
  .service-choice{padding-inline:0;padding-block:1.9rem}
  .service-choice+.service-choice{border-left:0;border-top:1px solid var(--line)}
  .service-choice:hover,.service-choice:focus-within{background:none}
}
/* Tap targets are handled for every page at the end of this file, not here: the rule that
   used to sit at this point covered the Diensten page only, and inline-flex on a link in
   running text stops that link wrapping. */

.facts{display:grid;gap:.95rem;margin:0}
.facts>div{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:.4rem 1.75rem;padding-bottom:.95rem;border-bottom:1px solid var(--line)}
.facts>div:last-child{padding-bottom:0;border-bottom:0}
.facts dt{font-weight:600}
.facts dd{margin:0;color:var(--muted)}
@media (max-width:620px){.facts>div{grid-template-columns:minmax(0,1fr);gap:.15rem}}
@media(min-width:1300px){body{font-size:1.125rem}.hero-intro{font-size:1.125rem}}
@media(max-width:1000px){.wrap{width:calc(100% - 48px)}.hero{gap:2rem;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.site-header nav{gap:1.3rem}.hero-actions{gap:.6rem 1rem}.portrait figcaption{flex-direction:column;gap:0}.split-section,.partner-inner{gap:3rem}.service-row{grid-template-columns:2rem minmax(0,.85fr) minmax(0,1.25fr);gap:1.5rem}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}
/* Mobile navigation. Deliberately still visible rather than behind a hamburger: hidden
   navigation is found and used about 1.5x less on mobile, discoverability drops over 20%
   and people are measurably slower (NN/g, 179 participants). With four destinations there
   is no space argument for hiding them.
   The old layout put the four links and the language link on one row, which squeezed the
   gaps between tap targets down to 6px and pushed the language link onto an orphaned row
   of its own. Now the header is a two-row grid: identity and language on the first row,
   the nav spanning the full width on the second, so the links can spread out. display:
   contents dissolves the .header-end wrapper so its children join the header's grid; it is
   a plain div with no semantics of its own, so nothing is lost from the accessibility
   tree. */
.site-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.85rem 1rem;padding-block:1.25rem}
.wordmark{font-size:1.5rem;grid-column:1;grid-row:1}
.header-end{display:contents}
.site-header nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:1.6rem}
.site-header nav a{font-size:.875rem;white-space:nowrap}
/* No dividing rule on narrow screens: the language link may wrap onto its own line, where
   a left border would sit orphaned. */
.lang-switch{grid-column:2;grid-row:1;justify-self:end;padding-left:0;gap:.6rem;border-left:0;margin-left:0}.lang-switch a{font-size:.875rem;min-width:44px;justify-content:flex-end}.hero{grid-template-columns:minmax(0,1fr);padding-top:2.75rem;padding-bottom:2rem;gap:2.5rem}.hero h1{font-size:clamp(2.35rem,7.9vw,3.65rem);max-width:18ch}.hero-intro{max-width:60ch}.hero-actions{margin-top:1.65rem}.portrait{width:min(100%,480px);margin:0;padding-bottom:0}.portrait:after{right:-9px;bottom:2.4rem}.portrait figcaption{flex-direction:row;gap:.5rem}.hero-foot{align-items:flex-start;gap:1rem;padding-bottom:2.75rem}.fine-rule{flex-basis:22px;margin-top:.75rem}.hero-foot p{font-size:.875rem}.split-section,.partner-inner{grid-template-columns:minmax(0,1fr);gap:2rem}.section-heading{margin-bottom:2rem}.service-row{grid-template-columns:2rem minmax(0,1fr);gap:.75rem 1rem;padding-block:1.75rem}.service-row p{grid-column:2}.desktop-break{display:none}.service-number{font-size:1.4rem}.service-row h3{font-size:1.35rem}.partner-label{gap:1.5rem}.partner-inner{gap:1rem}.partner{padding-block:2.25rem}.site-footer{flex-direction:column;align-items:flex-start;padding-block:2rem}.company-link{align-items:flex-start}.contact-email{font-size:clamp(1.15rem,4.9vw,1.8rem)}.contact h2{max-width:18ch}.about .questions{font-size:1.625rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Magenta marks the personal voice; teal remains the primary action colour. */
.wordmark .wordmark-dot,
.accent-dot,
.service-number{color:var(--magenta)}
.service-number{font-weight:700;font-size:1.625rem}
.hero .eyebrow{display:flex;align-items:center;gap:.8rem}
.hero .eyebrow::before{content:'';flex:0 0 28px;height:3px;background:var(--magenta)}
.fine-rule{background:var(--magenta)}
.quiet-link{text-decoration-color:var(--magenta);text-decoration-thickness:2px}
.about .questions{border-left:3px solid var(--magenta);padding-left:1.25rem}
.contact{border-top-color:var(--magenta)}
:focus-visible{outline-color:var(--magenta)}
.opening :is(.site-header,.hero,.hero-foot,.contact,.site-footer) :focus-visible{outline-color:var(--magenta)}
@media(max-width:760px){.service-number{font-size:1.5rem}}

/* A reversible editorial treatment of the original photograph, not a generated face. */
.portrait{padding-bottom:0}
.portrait::after{display:none}
.portrait-stage{position:relative;isolation:isolate;background:var(--navy)}
.portrait-stage::before{content:'';position:absolute;z-index:2;right:-10px;bottom:0;width:24%;height:24%;border-right:3px solid var(--magenta);border-bottom:3px solid var(--magenta);pointer-events:none}
.portrait-stage img{position:relative;z-index:1;filter:grayscale(1) contrast(1.08);mix-blend-mode:screen;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 82%,transparent);mask-composite:intersect}
.portrait figcaption{margin-top:.4rem;padding-top:.8rem;border-top:1px solid #ffffff24}
@media(forced-colors:active){.portrait-stage img{filter:none;mix-blend-mode:normal;mask-image:none}.portrait-stage::before{display:none}}

/* Shared Dutch pages: extend the restored homepage's typography and colours. */
.site-header nav a[aria-current="page"],
.site-header nav a.section-active{text-decoration:underline;text-decoration-color:var(--magenta);text-decoration-thickness:2px;text-underline-offset:.5rem}
.breadcrumbs{padding-top:1.75rem;font-size:.8125rem;color:#c5c3d3}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.2rem .7rem;list-style:none;padding:0;margin:0}
.breadcrumbs li{display:flex;align-items:center;gap:.7rem;min-height:32px}
.breadcrumbs li+li::before{content:'›';color:var(--teal)}
.breadcrumbs a{padding-block:.25rem}
.breadcrumbs [aria-current="page"]{color:var(--white)}
.page-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(3rem,8vw,7.5rem);align-items:start;padding-block:clamp(3.5rem,7vw,6rem)}
.breadcrumbs+.page-hero{padding-top:2.75rem}
.page-hero h1{font-size:clamp(2.3rem,4.1vw,3.75rem)}
.page-hero .eyebrow{display:flex;gap:.8rem;align-items:center;color:var(--teal)}
.page-hero .eyebrow::before{content:'';flex:0 0 28px;height:3px;background:var(--magenta)}
.page-intro{padding-top:.1rem;color:#e4e3ec}
.page-hero:not(.page-hero-personal) .page-intro{padding-top:2.7rem}
.page-hero-personal{grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);align-items:center}
.page-hero-personal .page-intro{margin-top:1.75rem}
.page-hero-personal .portrait{max-width:400px;justify-self:end}
.content-section{padding-block:clamp(3.5rem,6.5vw,6rem);border-bottom:1px solid var(--line)}
.subpage .services{padding-top:clamp(3.5rem,6.5vw,6rem)}
.content-section .eyebrow{color:var(--muted)}
.soft-section{background:var(--pale)}
.content-section .prose{color:var(--muted)}
.prose a,.text-link{color:var(--link);text-decoration:underline;text-underline-offset:.3em}
.text-link{display:inline-block;padding-block:.5rem;font-size:.9375rem;font-weight:500;line-height:1.6}
.text-link span[aria-hidden]{display:inline-block;margin-left:.3rem}
.service-description .text-link{margin-top:.85rem}
.service-description{min-width:0}
.prose ul{padding-left:1.25rem;margin-block:1.5rem}
.prose li+li{margin-top:.9rem}
.prose li::marker{color:var(--link)}
.prose li strong{color:var(--navy);font-weight:600}
.prose .language-pairs{list-style:none;padding:0;margin-top:0}
.language-pairs li{padding-block:1.25rem;border-block-start:1px solid var(--line)}
.prose .language-pairs li+li{margin-top:0}
.language-pairs li:last-child{border-bottom:1px solid var(--line)}
.language-pairs strong,.language-pairs span{display:block}
.language-pairs span{margin-top:.35rem;font-size:.9375rem}
.prose .question-list{padding-left:1.5rem;border-left:3px solid var(--magenta);list-style:none}
.phone-inline{white-space:nowrap;font-weight:600}
.contact-page-link{display:inline-block;margin-top:.85rem;color:#e4e3ec}
.site-footer{display:block}
.footer-grid{display:grid;grid-template-columns:1.2fr .7fr 1fr;gap:3rem;padding-bottom:3rem}
.site-footer .footer-label{font-size:.875rem;letter-spacing:.04em;font-weight:600;color:var(--teal);margin:0 0 .7rem}
.footer-nav{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.footer-nav a,.footer-email,.footer-phone{display:inline-block;padding-block:.55rem;color:#e4e3ec;font-size:.875rem;line-height:1.6}
.footer-email{overflow-wrap:anywhere}
.footer-phone{display:block;width:fit-content}
.footer-base{border-top:1px solid #ffffff24;display:flex;justify-content:space-between;align-items:center;gap:2rem;padding-top:2.5rem}
@media(max-width:1000px){.page-hero{gap:3rem}.footer-grid{gap:2rem;grid-template-columns:1fr .65fr 1fr}}
@media(max-width:760px){
  .page-hero,.page-hero-personal{grid-template-columns:minmax(0,1fr);gap:1.75rem;padding-block:2.75rem}
  .breadcrumbs+.page-hero{padding-top:1.75rem}
  .page-hero h1{font-size:clamp(2.35rem,7.9vw,3.65rem);max-width:22ch}
  .page-hero:not(.page-hero-personal) .page-intro{padding-top:0}
  .page-hero-personal .portrait{width:min(100%,400px);justify-self:start;margin-top:.75rem}
  .service-description{grid-column:2}
  .content-section{padding-block:3.5rem}
  .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 1rem;padding-bottom:2rem}
  .footer-grid>div:last-child{grid-column:1/-1}
  .footer-base{flex-direction:column;align-items:flex-start;padding-top:2rem}
  .footer-nav a{overflow-wrap:anywhere}
}
/* The nav now has a row to itself, so the links no longer need shrinking on small phones.
   Below 400px a fixed 1.6rem gap no longer fits, so the row switches to space-between and
   spends whatever is left on the gaps instead: that yields about 14px at 320px, against
   the 6px the old single-row header produced. Above 400px it stays left-aligned and
   grouped, because spreading four links across a 720px tablet row reads as four unrelated
   items rather than as a menu. */
@media(max-width:400px){.site-header nav{justify-content:space-between;gap:.25rem}.site-header nav .nav-contact{gap:.3rem}.footer-grid{grid-template-columns:minmax(0,1fr)}.footer-grid>div:last-child{grid-column:auto}}

/* Editorial pages (pillar and articles). Byline and dates replace the mail button under
   the intro: someone who came to read should not be sold to before the first paragraph.
   The contents list is generated at build time from the h2 ids, because the site ships no
   browser JavaScript. Both sit on the navy opening, so the colours are the light set. */
/* Editorial pages carry long compound nouns in their headings, which is exactly where a
   mid-syllable break looks wrong. Dutch hyphenation gives "zichtbaarheids-basis" instead.
   Scoped to these pages so the marketing headings keep the line breaks they were written
   for; the break-word rule above still catches anything hyphenation cannot solve. */
[data-kind] h1,[data-kind] h2{hyphens:auto}
.article-meta{display:flex;flex-wrap:wrap;gap:.2rem 1.5rem;margin-top:1.6rem;font-size:.875rem;color:#c5c3d3}
.article-meta a,.article-meta time{color:#e4e3ec}
.toc{padding-bottom:2.75rem}
.toc-title{margin:0 0 .8rem;font-size:.875rem;font-weight:600;letter-spacing:.055em;color:var(--teal)}
.toc ol{margin:0;padding-left:1.3rem;display:grid;gap:.1rem;max-width:60ch}
.toc li::marker{color:var(--magenta)}
.toc a{display:inline-block;padding-block:.45rem;font-size:.9375rem;color:#e4e3ec}

/* ---------------------------------------------------------------------------
   Long-form reading.

   Measured before changing anything: the reading column was 552px at 18px, about 61
   characters per line. Research settles on 45-75 characters with roughly 66 as the
   optimum, and WCAG 1.4.8 caps it at 80. So the text column was already fine, and
   widening it to fill the page would have made reading worse, not better.

   The actual problem was that 42% of the content width held one heading and nothing
   else. Two changes follow from that: the heading column is given a job by sticking
   while its section is read, and the reading column is nudged from 61 towards 66
   characters instead of being stretched. */
@media (min-width:1001px){
  [data-kind] .content-section .split-section{grid-template-columns:minmax(0,1fr) minmax(0,1.32fr)}
  [data-kind] .content-section .split-section>:first-child{position:sticky;top:2rem;align-self:start}
}
/* These sections are read in sequence, not scanned as separate offers, so the gaps
   between them are tighter than on a service page. On the longest article this removes
   around 500px of pure scrolling without crowding anything. */
[data-kind] .content-section{padding-block:clamp(2.75rem,4.5vw,4.25rem)}
/* Avoids a last line with a single word on it. Ignored where unsupported. */
[data-kind] .prose p,[data-kind] .page-intro p{text-wrap:pretty}
/* A deep link, from the contents list or from an AI answer, should land somewhere
   obvious rather than leaving the reader to guess which heading was meant. */
[data-kind] h2:target::after{content:'';display:block;width:2.25rem;height:3px;margin-top:.75rem;background:var(--magenta)}

/* Data tables. Rules only: no cards, no fills, no shadows, no rounding, per DESIGN-BRIEF
   ("Do not turn every paragraph into a rounded card"). The caption sits under the table
   and carries the source, so a figure lifted out of context still says where it came from.
   Padding is left-aligned to the text column, so the first column lines up with the prose
   above it rather than floating in its own box. */
.data-table{width:100%;border-collapse:collapse;margin:1.75rem 0 0;font-size:.9375rem;line-height:1.55;text-align:left}
.data-table caption{caption-side:bottom;margin-top:.9rem;font-size:.8125rem;line-height:1.6;color:var(--muted);text-align:left}
.data-table th,.data-table td{padding:.7rem .9rem .7rem 0;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:break-word}
.data-table th:last-child,.data-table td:last-child{padding-right:0}
.data-table thead th{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--navy);border-bottom:2px solid var(--navy)}
.data-table tbody th{font-weight:600;color:var(--navy)}
.data-table td{color:var(--muted)}
.data-table tbody tr:last-child>*{border-bottom:0}
.data-table code{font-size:.875em;overflow-wrap:anywhere}

/* Tables whose cells hold sentences. A prose column in a third of a 320px screen is not
   readable, so the row becomes a block with the column name above each value. */
@media (max-width:620px){
  /* Flex, not block: caption-side only applies to a real table box, so once the table is
     flattened the caption would jump to the top and the source note would sit above the
     data it describes. Ordering the children puts it back underneath. */
  .data-table[data-stack]{display:flex;flex-direction:column}
  .data-table[data-stack] tbody{order:2}
  .data-table[data-stack] caption{display:block;order:3;margin-top:1rem}
  .data-table[data-stack] tbody,
  .data-table[data-stack] tr,.data-table[data-stack] th,.data-table[data-stack] td{display:block}
  .data-table[data-stack] thead{order:1;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .data-table[data-stack] tr{padding-block:1.15rem;border-bottom:1px solid var(--line)}
  .data-table[data-stack] tr:last-child{border-bottom:0}
  .data-table[data-stack] th,.data-table[data-stack] td{padding:0;border-bottom:0}
  .data-table[data-stack] tbody th{font-size:1rem}
  .data-table[data-stack] td{margin-top:.6rem}
  .data-table[data-stack] td::before{content:attr(data-label);display:block;margin-bottom:.1rem;font-size:.6875rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--navy)}
}

/* ---------------------------------------------------------------------------
   Touch targets.

   Measured on all sixteen pages at 320, 375, 390 and 430px: nothing overflows
   the viewport, but almost every link came in between 20 and 40px tall, under
   the 44px that is comfortable to hit with a thumb. Two mechanisms, because
   the links are not one kind of thing:

   - Links that stand on their own line, or are a flex item, get more
     padding-block. They are inline-block or blockified, so the box and its
     line box both grow; a few pixels of extra rhythm is the price.
   - Links inside running text keep display:inline. Vertical padding on an
     inline box grows the hit area but not the line box, so paragraph leading
     is untouched and nothing moves. These links carry no background or border,
     so the padding that overflows the line is invisible. This is why the old
     Diensten-only rule above was dropped: it used inline-flex, which would
     stop a mid-sentence link wrapping onto the next line.

   Gated on pointer:coarse so a mouse-driven desktop is never affected at any
   window width. The width half of the query reuses the existing 1000px
   breakpoint rather than inventing another one, and covers touch devices and
   emulators that report pointer:fine.

   Deliberately left alone: .wordmark is 206x29, which clears the 24px WCAG
   2.5.8 minimum and is an easy target because it is wide -- raising it to 44
   would add 15px to the header on every page for no real gain. The header nav
   items are 41px wide by 44 tall, which passes for the same reason. */
@media (pointer:coarse),(max-width:1000px){
  /* Standalone links. */
  .text-link{padding-block:.65rem}
  .hero-email,.partner-detail a{padding-block:.65rem}
  .phone a{padding-block:.6rem}
  .footer-nav a,.footer-email,.footer-phone{padding-block:.7rem}
  .breadcrumbs li{min-height:44px}
  .breadcrumbs a{padding-block:.7rem}
  .toc a{padding-block:.6rem}
  .article-meta a{display:inline-block;padding-block:.65rem}
  /* Links in running text: hit area only, no layout change. */
  .prose p a,.prose li a,.prose dd a{padding-block:.75rem}
}