/* Diensten delen Signal met de homepage; lange uitleg krijgt een eigen leesritme. */
.service-page .wrap{max-width:1340px}
.breadcrumbs{display:flex;gap:12px;flex-wrap:wrap;padding-top:18px;font-size:12px;color:var(--muted)}
.breadcrumbs a{text-decoration:underline;text-underline-offset:4px}
.service-hero{padding:58px 0 70px}
.service-hero .eyebrow{color:var(--orange);margin-bottom:24px}
.service-hero h1{font-size:clamp(48px,7.8vw,108px);line-height:1.03;max-width:1050px;letter-spacing:-.065em;text-wrap:balance}
.service-hero h1 span{color:var(--orange)}
.service-hero-bottom{display:grid;grid-template-columns:1.25fr .75fr;gap:9%;align-items:end;margin-top:40px}
.service-hero .lead{font-size:clamp(19px,2vw,25px);max-width:740px;color:#d2d3cb}
.service-hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:26px}
.service-fact{border-top:1px solid var(--line);padding-top:22px;font-size:14px;color:var(--muted)}
.service-fact strong{display:block;color:var(--text);font-size:26px;font-weight:500;letter-spacing:-.035em;margin:6px 0}
.service-toc{display:flex;gap:10px 25px;flex-wrap:wrap;margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:13px}
.service-toc a{padding:6px 0;min-height:36px;text-decoration:underline;text-underline-offset:5px}
.service-section{padding:84px 0;scroll-margin-top:20px}
.service-section h2{font-size:clamp(34px,4.1vw,54px);max-width:800px;line-height:1.12}
.service-section h3{font-size:24px;line-height:1.3;letter-spacing:-.035em;margin-bottom:12px}
.service-split{display:grid;grid-template-columns:.85fr 1.25fr;gap:9%}
.service-copy{max-width:760px;min-width:0;font-size:17px}
.service-section h2+.service-copy,.service-table-wrap+.service-copy,.route-example+.service-copy,.service-example+.service-copy{margin-top:28px}
.service-copy p+p{margin-top:18px}
.service-copy a,.service-note a,.service-sources a,.service-faq p a{text-decoration:underline;text-underline-offset:4px}
.service-copy h3{margin-top:32px}
.service-copy h3:first-child{margin-top:0}
.service-copy ul,.service-copy ol{padding-left:21px;margin-block:22px}
.service-copy li{padding-left:4px;margin-bottom:12px}
.service-note{font-size:13px;color:var(--muted);margin-top:24px;max-width:850px}
.section-light .service-note{color:var(--ink-muted)}
.route-example{padding:46px 0 0;margin:34px 0 0;border-top:1px solid var(--line)}
.route-example ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin:0}
.route-example li{position:relative;padding-top:18px;border-top:1px solid var(--line)}
.route-example li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--orange)}
.route-example strong{display:block;font-size:18px;font-weight:500;margin:5px 0}
.route-example p{font-size:14px;color:var(--muted)}
.route-example .mono{color:var(--orange)}
.route-example figcaption{font-size:12px;color:var(--muted);margin-top:22px}
.service-example{margin-top:36px;padding-top:30px;border-top:1px solid var(--paper-line);display:grid;grid-template-columns:1fr 1fr;gap:9%}
.service-example p{font-size:17px;max-width:640px}
.service-example .example-label{font:12px Mono,monospace;color:var(--ink-muted);margin-bottom:14px}
.service-table-wrap{margin-top:32px;overflow:auto}
.service-table{border-collapse:collapse;width:100%;text-align:left;font-size:15px;line-height:1.65}
.service-table caption{text-align:left;font-size:14px;margin-bottom:16px;color:var(--muted)}
.service-table th,.service-table td{vertical-align:top;padding:20px 22px 20px 0;border-bottom:1px solid var(--line)}
.service-table thead th{font-size:12px;letter-spacing:.02em;color:var(--muted);font-weight:500}
.service-table th[scope=row]{font-weight:600;min-width:150px}
.section-light .service-table th,.section-light .service-table td{border-color:var(--paper-line)}
.section-light .service-table caption,.section-light .service-table thead th{color:var(--ink-muted)}
.service-steps{list-style:none;padding:0;margin:35px 0 0;counter-reset:service-step}
.service-steps li{counter-increment:service-step;display:grid;grid-template-columns:60px .8fr 1.2fr;gap:24px;padding:26px 0;border-top:1px solid var(--line)}
.service-steps li::before{content:"0" counter(service-step);font:13px Mono,monospace;color:var(--orange);padding-top:6px}
.service-steps h3{margin:0}
.service-steps p{max-width:670px;color:var(--muted);font-size:16px}
.service-pricing{background:var(--orange);color:var(--ink)}
.service-price{font-size:clamp(38px,5vw,64px);line-height:1.1;letter-spacing:-.055em;margin-block:26px 12px}
.service-pricing .service-note{color:var(--ink)}
.service-pricing .service-copy a:focus-visible,.service-pricing a:focus-visible{outline-color:var(--ink)}
.service-pricing .button{background:var(--ink);color:var(--paper);margin-top:24px}
.service-pricing .button:hover{background:#343b34}
.service-pricing dl{margin:0}
.service-pricing dl div{padding:18px 0;border-bottom:1px solid #1b211e55}
.service-pricing dt{font-weight:600}
.service-pricing dd{margin:5px 0 0;font-size:16px}
.service-faq{margin-top:28px;max-width:900px}
.service-faq details{border-top:1px solid var(--line)}
.service-faq summary{cursor:pointer;font-size:19px;line-height:1.5;padding:23px 32px 23px 0;position:relative;list-style:none}
.service-faq summary::-webkit-details-marker{display:none}
.service-faq summary::after{content:"+";position:absolute;right:0;color:var(--orange);font-size:24px;top:18px}
.service-faq details[open] summary::after{content:"−"}
.service-faq p{padding:0 32px 25px 0;max-width:760px;color:var(--muted)}
.service-person{display:flex;align-items:center;gap:16px;font-size:14px;margin-bottom:30px}
.service-person img{border-radius:50%;object-fit:cover;width:52px;height:52px}
.service-person span{display:block;color:var(--muted);font-size:12px}
.service-contact{border-top:1px solid var(--line)}
.service-contact h2{margin-bottom:25px}
.service-contact .actions{display:flex;flex-wrap:wrap;gap:16px 28px;margin-top:28px}
.service-related{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:48px;padding-top:25px;border-top:1px solid var(--line)}
.service-related a{font-size:20px;text-decoration:underline;text-underline-offset:6px}
.service-related p{margin-top:9px;font-size:14px;color:var(--muted)}
@media(min-width:901px){.service-related:has(>:nth-child(3)){grid-template-columns:repeat(3,1fr)}}
.cost-list{margin:24px 0 0}.cost-list div{padding:18px 0;border-bottom:1px solid var(--line)}.cost-list dt{font-weight:600}.cost-list dd{margin:5px 0 0;font-size:16px;color:var(--muted)}
.pricing-note a,.pricing-more a{text-decoration:underline;text-underline-offset:4px}
.service-sources{border-top:1px solid var(--line);padding-top:20px;margin-top:34px;font-size:12px;color:var(--muted)}
.service-sources summary{cursor:pointer;min-height:40px}
.service-sources ul{padding-left:20px}
.service-sources li{padding:5px 0}
.service-directory{list-style:none;margin:36px 0 0;padding:0}
.service-directory li{border-top:1px solid var(--line)}
.service-directory a{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:24px 0;min-height:70px}
.service-directory strong{font-weight:500;font-size:clamp(23px,2.6vw,38px);letter-spacing:-.045em}
.service-directory span{color:var(--muted);font-size:14px}
.service-directory a:hover strong{text-decoration:underline;text-underline-offset:7px}
.footer-services{display:flex;flex-wrap:wrap;gap:12px 28px;padding-block:24px;border-top:1px solid var(--line);font-size:13px}
.footer-services a{display:inline-flex;align-items:center;min-height:36px;text-decoration:underline;text-underline-offset:5px}
@media(max-width:900px){.service-hero-bottom,.service-split{grid-template-columns:1fr;gap:32px}.service-hero h1{font-size:clamp(46px,8.5vw,76px)}.service-fact{max-width:480px}.service-section{padding-block:60px}.service-split h2{max-width:700px}.service-steps li{grid-template-columns:40px 1fr;gap:16px}.service-steps p{grid-column:2}.route-example ol{grid-template-columns:1fr 1fr;gap:28px}.service-toc{gap:8px 20px}.service-hero{padding-block:38px 50px}}
@media(max-width:560px){.service-hero h1{font-size:46px;letter-spacing:-.06em;overflow-wrap:break-word}.service-hero-bottom{margin-top:26px}.service-example,.service-related{grid-template-columns:1fr;gap:28px}.service-section h2{font-size:36px}.service-table{font-size:13px}.service-table th,.service-table td{padding:16px 14px 16px 0}.service-table th[scope=row]{min-width:100px}.service-table-wrap{outline-offset:3px}.route-example ol{gap:26px 18px}.route-example strong{font-size:17px}.service-directory a{align-items:flex-start;flex-direction:column;gap:8px}.service-person{gap:12px}.service-contact .button{width:100%}.breadcrumbs{font-size:11px}.service-toc{font-size:12px}.service-pricing .service-price{font-size:50px}}
@media(prefers-reduced-motion:reduce){.service-page{scroll-behavior:auto}}
/* Nieuwe pagina's, 20 oktober 2026: over Joost, gratis workflowontwerp, voorbeelden, prijzen. */
.about-hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:8%;align-items:end}
.about-hero-grid .lead{margin-top:28px;max-width:720px;color:#d2d3cb;font-size:clamp(18px,1.8vw,22px)}.about-hero-grid .actions{margin-top:26px}
.about-hero .portrait-frame{max-width:360px}.about-hero .portrait-frame img{height:auto;aspect-ratio:1/1.12}.about-hero .portrait-caption{color:var(--muted)}
.training-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:40px}
.training-grid article{border-top:1px solid var(--line);padding-top:20px}.training-grid .mini-label{color:var(--orange)}
.training-grid h3{margin:10px 0 14px}.training-grid ul{list-style:none;padding:0;margin:0 0 16px}
.training-grid li{padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.training-grid p:not(.mini-label){font-size:14px;line-height:1.75;color:var(--muted)}
.example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 48px}
.example-grid article{border-top:1px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;align-items:flex-start;scroll-margin-top:20px}
.example-grid .mini-label{color:var(--ink-muted)}.example-grid h3{font-size:23px;margin:10px 0 10px}
.example-grid p:not(.mini-label){font-size:15px;line-height:1.75;color:var(--ink-muted)}
.example-grid .example-step{color:var(--ink)!important;font-weight:600;font-size:14px!important;margin-top:10px}
.example-grid .text-link{margin-top:6px}
.design-sample{margin:34px 0 0;padding-top:30px;border-top:1px solid var(--line)}
.design-sample svg{width:100%;max-width:980px;overflow:visible}
.sample-label{fill:var(--muted);font:11px Mono,monospace;letter-spacing:.015em}.sample-label text:last-child{fill:var(--orange)}
.sample-box rect{fill:none;stroke:#7d837a;stroke-width:1}.sample-step rect{fill:#1e211f;stroke:#4a4f47;stroke-width:1}
.sample-text{fill:var(--text);font:15px Manrope,Arial,sans-serif}
.design-sample figcaption{font-size:13px;color:var(--muted);margin-top:18px;max-width:640px}
.route-light{border-top-color:var(--paper-line)}.route-light li{border-top-color:var(--paper-line)}.route-light p,.route-light figcaption{color:var(--ink-muted)}.route-light .mono{color:#a94e26}
.prices-page{padding-block:64px}
@media(max-width:900px){.about-hero-grid,.training-grid,.example-grid{grid-template-columns:1fr}.about-hero .portrait-frame{max-width:220px}.training-grid{gap:28px}}
@media(max-width:580px){.design-sample svg{min-width:640px}.design-sample{overflow-x:auto}.example-grid h3{font-size:21px}}
.service-section{padding:56px 0}.service-hero{padding:48px 0 56px}
.service-hero h1{font-size:clamp(44px,6.2vw,88px)}.service-hero-bottom{margin-top:30px}.service-toc{margin-top:32px}
.section-light .service-steps p,.section-light .service-faq p{color:var(--ink-muted)}.section-light .service-steps li{border-top-color:var(--paper-line)}.section-light .service-fact{color:var(--ink-muted)}
@media(max-width:900px){.service-section{padding-block:56px}.service-hero{padding-block:38px 50px}.service-hero h1{font-size:clamp(46px,8.5vw,76px)}}
@media(max-width:560px){.service-hero h1{font-size:46px}.service-hero-bottom{margin-top:26px}}