/* Atelier only: retain approved composition; extend secondary service surfaces. */
@media(max-width:400px){body[data-design='01'] .review-request dl>div{flex-direction:column;gap:5px}body[data-design='01'] .review-request dd{text-align:left;max-width:100%}body[data-design='01'] .dialog-actions{flex-direction:column}body[data-design='01'] .dialog-actions .button{width:100%;justify-content:center}}
.request-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.request-error{padding:16px;border:1px solid #a33225;border-radius:6px;color:#8b241b;background:#fff5f3;font-size:16px;line-height:1.5}.review-request dd{min-width:0;overflow-wrap:anywhere}.review-request dt{flex-shrink:0}.dialog-actions button:disabled{opacity:.65;cursor:wait}
body[data-design='01'] .dialog-preview{font-size:12px!important}body[data-design='01'] .service-options small{font-size:14px}body[data-design='01'] .dialog-intro{font-size:16px}
@media(max-width:650px){body[data-design='01'] .request-progress{gap:8px;padding-right:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}body[data-design='01'] .request-progress li{flex-wrap:wrap;font-size:14px}body[data-design='01'] .field-pair{grid-template-columns:1fr;gap:0}body[data-design='01'] .dialog-actions .button{font-size:14px}body[data-design='01'] .field-pair label{font-size:14px!important}}
.atelier-brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;white-space:nowrap}.atelier-brand .brand-symbol{display:block;width:40px;height:40px;flex:0 0 40px;object-fit:contain}.atelier-brand .brand-name{color:var(--petrol)}
body[data-design='01'] .search{border:2px solid var(--petrol);box-shadow:0 3px 12px #0f5c6e0d}body[data-design='01'] .search:focus-within{outline:3px solid var(--yellow);outline-offset:3px}
@media(max-width:650px){.atelier-brand{gap:8px;font-size:30px}.atelier-brand .brand-symbol{width:34px;height:34px;flex-basis:34px}}@media(max-width:360px){.nav .atelier-brand{font-size:27px;gap:6px}.nav .atelier-brand .brand-symbol{width:30px;height:30px;flex-basis:30px}.nav-inner{column-gap:10px}}
.service-option{border:1px solid var(--line,#dbe4e6);border-radius:8px;overflow:hidden}.service-options .service-option button{border:0;border-radius:0;width:100%;display:flex;align-items:center;gap:16px}.service-info-link{display:block;padding:8px 16px 12px;color:var(--petrol,#0f5c6e);font-size:14px;text-decoration:underline;text-underline-offset:3px}.service-option button>span:nth-child(2){flex:1;min-width:0}.dialog-language{display:flex;align-items:center;gap:8px;margin-bottom:22px;max-width:120px}.dialog-language button{font:inherit;font-size:14px;background:none;border:0;padding:6px;min-height:36px;color:var(--petrol,#0f5c6e);cursor:pointer}.dialog-language button[aria-pressed=true]{font-weight:800;text-decoration:underline;text-underline-offset:5px}.result-filters{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.result-filters button{border:1px solid #bdcccf;border-radius:30px;background:white;padding:10px 14px;min-height:44px;color:#0f5c6e;font:inherit;font-size:14px;cursor:pointer}.result-filters button[aria-pressed=true]{background:#0f5c6e;color:white}.search-result{border:1px solid #dbe4e6;border-radius:8px;overflow:hidden}.results-grid .search-result button{width:100%;border:0;gap:14px}.search-result button>span:nth-child(2){flex:1;min-width:0}.atelier-service{padding-block:35px 0}.service-back{display:inline-flex;margin-bottom:30px}.service-detail-hero{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.service-detail-hero h1{font-size:clamp(38px,5vw,70px);line-height:1.06;letter-spacing:-.055em;margin:20px 0}.service-detail-hero p{font-size:18px;line-height:1.65;max-width:520px}.service-detail-hero .detail-price{font-size:16px;padding-block:24px}.service-detail-hero figure{height:480px;border-radius:100px 0 0 0;overflow:hidden}.service-detail-hero img{width:100%;height:100%;object-fit:cover}.service-detail-copy{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;padding-block:60px}.service-detail-copy h2{font-size:30px;line-height:1.15;margin-bottom:22px}.service-detail-copy p{font-size:16px;line-height:1.8;margin-bottom:20px}.service-detail-copy aside{padding:28px;background:#f0f5f6}.service-detail-copy aside a{display:block;padding:14px 0;border-bottom:1px solid #cddbdd;font-size:16px}.atelier-service .faq,.atelier-service .closing .shell,.atelier-service footer .shell{width:100%}.service-option button,.search-result button{transition:background .16s}.service-option button:hover,.search-result button:hover{background:#f0f5f6}@view-transition{navigation:auto}::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}dialog[open]{animation:atelier-dialog-in .16s ease-out}@keyframes atelier-dialog-in{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:650px){.service-options .service-option button{gap:12px}.service-detail-hero,.service-detail-copy{grid-template-columns:1fr;gap:30px}.service-detail-hero figure{height:320px;order:-1;border-radius:60px 0 0 0}.service-detail-copy{padding-block:35px}.service-detail-hero h1{font-size:clamp(30px,8.5vw,40px);overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}.service-detail-hero .button{width:100%}.result-filters button{font-size:14px}.service-info-link{min-height:40px}.atelier-service{padding-top:22px}}
@media(prefers-reduced-motion:reduce){dialog[open]{animation:none}::view-transition-old(root),::view-transition-new(root){animation:none!important}}
.dialog-language button{min-width:44px;min-height:44px}
.field-error{color:#8b241b;font-size:14px;line-height:1.5;margin:6px 0 16px;overflow-wrap:anywhere}
#sample-form [aria-invalid="true"]{border-color:#8b241b}
/* Vitrin mode: pre-opening notice, "coming soon" badges, closed panel and footer links. */
.vitrin-notice{background:var(--paper);border-block:1px solid var(--line)}
.vitrin-notice p{padding-block:10px;font-size:.875rem;line-height:1.55;color:var(--ink)}
.vitrin-notice a{color:var(--petrol);font-weight:650;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.soon-badge{display:inline-block;vertical-align:middle;margin-left:10px;padding:1px 9px;border-radius:30px;background:var(--yellow);color:var(--dark);font-size:.6875rem;font-weight:700;letter-spacing:.06em;line-height:1.7;text-transform:uppercase;white-space:nowrap}
body[data-design='01'] .category-grid .category{position:relative}
.category-grid .category>.soon-badge{position:absolute;top:16px;right:16px;margin:0}
@media(max-width:650px){.category-grid .category>.soon-badge{top:10px;right:10px}}
.results-grid small .soon-badge,.result-filters .soon-badge{margin-left:8px}
#request-dialog.closed-panel{width:min(540px,calc(100% - 24px))}
.closed-panel h2{padding-right:44px}
.footer-links{display:flex;flex-wrap:wrap;gap:0 28px;padding-bottom:14px}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem;font-weight:600;color:var(--petrol)}
.footer-links a:hover{text-decoration:underline;text-underline-offset:4px}
/* Company line above the footer links (9 Oct 2026): KvK, btw-id, place and email. */
.footer-company{padding-top:6px;font-size:.8125rem;line-height:1.6;color:var(--muted,#596e73);overflow-wrap:anywhere}
.footer-company a{display:inline-block;padding-block:12px;margin-block:-12px;color:var(--petrol);text-decoration:underline;text-underline-offset:3px}
.not-found-page .footer-company{padding-top:24px}

.not-found{display:grid;grid-template-columns:1fr 1fr;gap:40px 64px;padding-block:80px 90px}
.not-found h1,.not-found h2{font-size:clamp(34px,4.4vw,56px);line-height:1.08;margin-bottom:18px}
.not-found p{font-size:17px;line-height:1.7;margin-bottom:30px}
.not-found section[lang=en]{padding-left:64px;border-left:1px solid var(--line)}
.not-found-page .vitrin-notice+div>.vitrin-notice{border-top:0}
.not-found-page .footer-bottom{margin-bottom:34px}
@media(max-width:650px){.not-found{grid-template-columns:1fr;padding-block:40px 50px}.not-found section[lang=en]{padding:40px 0 0;border-left:0;border-top:1px solid var(--line)}.not-found .button{width:100%}}
/* Accessibility on top of the pinned common.css/revision.css. Buttons draw their focus ring inside
   (offset -3px), so a petrol ring vanishes on a petrol button: those get a yellow ring (5.25:1). */
button.petrol:focus-visible,button.nav-request:focus-visible,.result-filters button[aria-pressed=true]:focus-visible{outline-color:var(--yellow)}
/* 44px touch targets: menu toggle, open menu links, the notice link (padding without moving the text) and "back to top". */
.mobile-menu{width:44px;height:44px}
@media(max-width:650px){.nav.menu-open nav a{min-height:44px;display:flex;align-items:center}}
.vitrin-notice a{display:inline-block;padding-block:12px;margin-block:-12px}
.footer-top>a:last-child{display:inline-flex;align-items:center;min-height:44px}
/* Long Dutch compounds (Kantoorschoonmaak, Verhuisschoonmaak) break at a hyphenation point, not mid-syllable. */
.category h3{-webkit-hyphens:auto;hyphens:auto}
/* Per-task guidance on service pages and in the request dialog: the task's own questions as a short
   list, then its photo tip and the one line of exclusions (public/catalog.js). */
.service-questions{margin:0 0 20px;padding-left:20px;list-style:disc}
.service-questions li{font-size:16px;line-height:1.6;margin-bottom:8px}
.service-detail-copy h3{font-size:18px;margin:28px 0 8px}
#request-dialog .service-questions li{font-size:15px;margin-bottom:6px}
/* Long task names in search results and the dialog (Eenmalige kantoorschoonmaak) wrap inside their box at 320px. */
.search-result b,.service-option b{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
/* Vitrin browse view of the dialog: one line that Doenzo is building its network (requests follow later), and each service
   links to its own page (styled like the request-flow buttons it replaces). */
.browse-note{margin-bottom:22px;padding:10px 14px;border-radius:5px;background:var(--paper);color:var(--ink);font-size:.875rem;line-height:1.55}
.service-options .service-link{display:flex;align-items:center;gap:16px;min-height:80px;padding:17px 20px;text-align:left;transition:background .16s}
.service-options .service-link:hover{background:#f0f5f6}
.service-options .service-link:focus-visible{outline-offset:-3px}
.service-link>span:nth-child(2){flex:1;min-width:0}
@media(max-width:650px){.service-options .service-link{gap:12px;padding:18px 16px}}
/* A single-service area is a link (catalogue of 4 Oct 2026): same look as the area buttons. */
.category-grid a.category{display:block;color:inherit;text-decoration:none}
.dialog-categories a{border:1px solid var(--line);background:var(--paper);padding:18px 13px;text-align:left;display:flex;align-items:center;gap:12px;border-radius:5px;min-height:76px;color:inherit;text-decoration:none}
.dialog-categories a>span{font-size:14px;font-weight:550;line-height:1.3;flex:1}
.dialog-categories a>svg:last-child{width:16px;height:16px}
.dialog-categories a:hover{border-color:var(--petrol)}
@media(max-width:650px){.dialog-categories a{min-height:65px;padding:14px}.dialog-categories a>span{font-size:15px}}
/* Five menu links since "Over Doenzo" (7 Oct 2026). Where they do not fit on one line between the logo and the
   actions, they wrap inside the menu, centred, so the header keeps its height instead of breaking into rows. */
@media(min-width:651px){.nav #site-nav{flex:1 1 0;justify-content:center;flex-wrap:wrap;row-gap:2px}.nav #site-nav a{white-space:nowrap}}
/* Above 1150px the page margins grow, so at common laptop widths (1280, 1300) the five links took two rows; slightly
   tighter links keep them on one row there (NL from 1151px, EN from about 1260px). */
@media(min-width:1151px) and (max-width:1360px){.nav .nav-inner{column-gap:20px}.nav #site-nav{column-gap:16px}.nav #site-nav a{font-size:15px}}
/* Pionier-tegoed bar above the navigation (26 Oct 2026): one link to the professional registration form. */
.pionier-bar{display:block;background:var(--yellow);color:var(--dark)}
.pionier-bar>span{display:block;padding-block:10px;font-size:.875rem;line-height:1.5;text-align:center}
.pionier-bar u{font-weight:700;text-underline-offset:3px;white-space:nowrap}
.pionier-bar:hover u{text-decoration-thickness:2px}
.pionier-bar:focus-visible{outline:3px solid var(--petrol);outline-offset:-3px}
@media(max-width:650px){.pionier-bar>span{font-size:.8125rem;text-align:left}}