/* Service pages and practical guides: paragraphs retain a comfortable measure. */
.service-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(2rem,5vw,5rem);padding-block:clamp(2.5rem,6vw,6rem)}
.service-hero h1{font-size:clamp(2.3rem,4.7vw,4.6rem);max-width:15ch;line-height:1.08;letter-spacing:-.045em;margin-block:1rem 1.5rem;hyphens:none}
.service-hero .lead{max-width:53ch}
.service-hero p+p{margin-top:1rem}
.service-hero figure{margin:0;min-width:0}
.service-hero img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:50% 50% .3rem .3rem;border:1px solid var(--line)}
.service-hero figcaption{font-size:.8rem;margin-top:.8rem;color:var(--muted)}
.service-nav{display:flex;flex-wrap:wrap;gap:.65rem 1.5rem;padding-block:1.2rem;border-block:1px solid var(--line);font-weight:600}
.service-nav a{text-underline-offset:.3em}
.service-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);align-items:end;margin-bottom:2.5rem}
.service-heading h2{font-size:clamp(1.9rem,3.2vw,3rem);line-height:1.15;max-width:23ch;margin:0}
.service-heading p{max-width:58ch;margin:0}
.service-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem)}
.service-card{min-width:0;padding:clamp(1.3rem,3vw,2.5rem);border:1px solid var(--line);border-radius:.3rem;background:var(--soft)}
.service-card h3{font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.3;margin:.9rem 0 1rem}
.service-card p{max-width:61ch;margin-block:.7rem;line-height:1.75}
.service-number{display:block;font-size:.85rem;font-weight:700;letter-spacing:.12em;color:var(--accent)}
.service-note{background:var(--tint);border-inline-start:.25rem solid var(--accent);padding:clamp(1.3rem,3vw,2.5rem);margin-top:2rem}
.service-note p{max-width:80ch}.service-note h3{margin-top:0}
.service-process{list-style:none;padding:0;margin:0;counter-reset:process}
.service-process li{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1fr);gap:clamp(1rem,5vw,5rem);padding-block:1.7rem;border-top:1px solid var(--line)}
.service-process h3{font-size:1.25rem;margin:0}.service-process h3::before{counter-increment:process;content:counter(process,decimal-leading-zero) " / ";color:var(--accent);font-size:.85rem}
.service-process p{margin:0;max-width:66ch;line-height:1.75}
.service-reading{max-width:76ch;margin-inline:auto}.service-reading h2{font-size:clamp(1.7rem,3vw,2.5rem);margin-top:2.2rem}.service-reading p{line-height:1.8}
.service-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem;margin-block:2rem}
.service-related a{display:flex;flex-direction:column;gap:.8rem;padding:1.5rem;border:1px solid var(--line);border-radius:.25rem;text-decoration:none;background:var(--soft);transition:transform .2s,border-color .2s,background .2s}
.service-related strong{font-size:1.1rem;color:var(--heading)}.service-related span{color:var(--muted)}
.service-related a:hover,.service-related a:focus-visible{transform:translateY(-.2rem);border-color:var(--accent);background:var(--tint)}
.service-sources{font-size:.85rem;color:var(--muted);line-height:1.8}.service-sources a{text-underline-offset:.2em}
@media(max-width:900px){.service-hero,.service-heading,.service-process li{grid-template-columns:minmax(0,1fr)}.service-hero figure{max-width:32rem;justify-self:center}.service-cards{grid-template-columns:minmax(0,1fr)}.service-hero h1{max-width:19ch}.service-process li{gap:.8rem}}
@media(prefers-reduced-motion:reduce){.service-related a{transition:none}.service-related a:hover,.service-related a:focus-visible{transform:none}}

/* Offices: show the whole building and its shared systems, without cropping. */
.office-hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,4rem)}
.office-hero h1{font-size:clamp(2.3rem,4.2vw,4rem)}
html[lang="nl-BE"] .office-hero h1{hyphens:none}
.office-building{width:100%;align-self:center}
.office-building-art{background:#fff;border:1px solid var(--line);border-radius:.4rem;overflow:hidden}
.office-hero .office-building img{aspect-ratio:3/2;object-fit:contain;border:0;border-radius:0}
.office-hero .office-building figcaption{margin-top:1rem;font-size:.8rem;line-height:1.65}
.office-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin:0 0 .65rem;padding:0;list-style:none;color:var(--heading);font-size:.8rem;font-weight:600}
.office-legend li{display:flex;align-items:center;gap:.45rem}
.office-legend li::before{content:"";width:.35rem;height:.35rem;flex-shrink:0;background:var(--accent)}
.office-card-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.office-icon{display:block;width:3.5rem;height:3.5rem;color:var(--accent);transition:transform .3s var(--ease)}
.office-cards .service-card{border-top:3px solid var(--accent)}
.office-meeting{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.office-meeting-visual{margin:0;min-width:0}
.office-meeting-visual img{width:100%;aspect-ratio:3/2;object-fit:contain;border:1px solid var(--line);border-radius:.4rem}
.office-meeting-visual figcaption{font-size:.8rem;line-height:1.65;color:var(--muted);margin-top:.8rem}
.office-meeting .service-reading{margin:0;max-width:62ch}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.office-cards .service-card:hover .office-icon{transform:translateY(-.2rem)}}
@media(max-width:900px){.office-hero,.office-meeting{grid-template-columns:minmax(0,1fr)}.office-hero .office-building{max-width:44rem}.office-meeting-visual{width:min(100%,44rem);justify-self:center}}
@media(prefers-reduced-motion:reduce){.office-icon{transition:none}}
