/* Hallmark · macrostructure: Shared Brand Canvas · genre: modern-minimal · design-system: design.md · designed-as-app · tone: professional · anchor hue: navy blue */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */
.business-site{color-scheme:dark}
.about-portrait{margin:0;width:min(100%,380px);justify-self:center;align-self:center}
.about-portrait img{display:block;width:100%;height:auto;aspect-ratio:1122/1402}
.company-details{margin-top:var(--space-lg);border-top:var(--rule) solid var(--color-rule);padding-top:var(--space-lg)}
.company-details h3{margin:0 0 var(--space-md)}
.company-details dl{margin:0;display:grid;gap:var(--space-sm)}
.company-details dl>div{display:grid;grid-template-columns:minmax(90px,.4fr) minmax(0,1fr);gap:var(--space-sm)}
.company-details dt{color:var(--color-light-muted)}
.company-details dd{margin:0;overflow-wrap:anywhere}
.company-details a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.company-details a:hover{text-decoration:underline}
.business-site .wrap{width:min(1440px,100%);padding-inline:var(--space-page-inset)}
.business-site h1,.business-site h2,.business-site h3{font-weight:500;letter-spacing:-.045em}
.business-header{padding-block:var(--space-lg)}
.business-header .brand{width:clamp(170px,23vw,300px);height:auto;aspect-ratio:4;min-height:44px}
.business-header .brand img{width:144%;left:-22%;top:-9%;clip-path:inset(0 0 43% 0)}
.business-header nav{gap:var(--space-md)}
.business-header nav a{color:var(--color-light-muted)}
.business-header nav a[aria-current=page]{color:var(--color-ink);border-bottom:var(--rule) solid var(--color-accent)}
.business-header nav a:hover{color:var(--color-accent)}
.business-site .button,.light-section .button{background:var(--color-ink);color:var(--color-paper);border-radius:0;font-weight:500;padding:var(--space-sm) var(--space-md)}
.business-site .button:hover,.light-section .button:hover{background:var(--color-accent);color:var(--color-paper)}
.business-hero h1{line-height:1.08;max-width:20ch}
.business-site .hero-lead{font-size:var(--text-body);max-width:52ch;color:var(--color-light-muted)}
.business-site .eyebrow{font-weight:400;letter-spacing:.08em;color:var(--color-light-muted)}
.business-site .business-hero .eyebrow{letter-spacing:0;text-transform:none}
.home-example{background:var(--color-transparent);border:0;border-left:var(--rule) solid var(--color-rule);border-radius:0;padding:var(--space-lg)}
.home-example h2{font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.25}
.mini-flow{margin-block:var(--space-lg)}
.mini-flow li{padding-block:var(--space-md)}
.home-example .example-label{flex-direction:column;align-items:flex-start;gap:var(--space-xs)}
.home-routes,.solution-directory,.solution-detail,.order-pilot,.contact-page{background:var(--color-paper)}
.home-routes,.responsibility,.order-value,.exceptions,.page-cta{border-top:var(--rule) solid var(--color-rule)}
.business-section-head{gap:var(--space-lg)}
.business-section-head>p{color:var(--color-light-muted);align-self:center}
.route-list>a{padding-block:var(--space-lg)}
.route-list h3{font-size:clamp(1.1rem,2vw,1.5rem)}
.route-list p{max-width:65ch}
.case-grid{column-gap:var(--space-xl);row-gap:0}
.solution-link{background:var(--color-transparent);border:0;border-top:var(--rule) solid var(--color-light-rule);border-radius:0;padding:var(--space-lg) 0;gap:var(--space-md)}
.solution-link h2{font-size:clamp(1.45rem,2.2vw,1.85rem);max-width:28ch}
.solution-link .text-link{margin-top:var(--space-sm)}
.page-intro h1,.multipage .method h1{font-size:var(--text-business-heading);line-height:1.1;max-width:25ch}
.page-lead{max-width:60ch;color:var(--color-light-muted);font-size:var(--text-body)}
.page-cta{padding-block:var(--space-xl)}
.page-cta h2{font-size:clamp(1.5rem,2.3vw,2rem)}
.source-document,.prepared-order{border:var(--rule) solid var(--color-light-rule);background:var(--color-light-surface)}
.source-document h3,.prepared-order h3{font-size:1.25rem}
.review-note{border-top:var(--rule) solid var(--color-light-accent)}
.fiction-label{border-left:0;padding-left:0}
.example-panel,.contact-person{background:var(--color-transparent);border:0;border-top:var(--rule) solid var(--color-light-rule);border-radius:0;padding:var(--space-lg) 0}
.human-check{background:var(--color-transparent);border-top:var(--rule) solid var(--color-light-rule);padding:var(--space-lg) 0}
.business-site .responsibility,.business-site .order-value{background:var(--color-paper)}
.business-site .related-solution .text-link{white-space:nowrap}
.business-site .site-footer{border-top:var(--rule) solid var(--color-rule);padding-block:var(--space-lg)}
.site-footer>.wrap{gap:var(--space-lg)}
.site-footer strong{font-family:var(--font-display);font-size:var(--text-body)}
a[aria-disabled=true]{opacity:.5;pointer-events:none}
@media(min-width:64rem){.business-hero{padding-block:var(--space-2xl)}.home-example{padding-left:var(--space-xl)}.business-header nav{margin-right:var(--space-md)}}
@media(max-width:63.99rem){.business-header{flex-wrap:wrap}.business-header nav{order:3;width:100%;margin:0;gap:var(--space-sm) var(--space-md)}.business-hero{grid-template-columns:minmax(0,1fr)}.home-example{border-left:0;border-top:var(--rule) solid var(--color-rule);padding:var(--space-lg) 0}.business-hero h1{max-width:22ch}}
@media(max-width:47.99rem){.business-section-head{grid-template-columns:minmax(0,1fr)}.hero-actions{align-items:flex-start;flex-direction:column}.human-check{flex-direction:column;gap:var(--space-sm)}.source-document,.prepared-order{padding:var(--space-md)}.order-comparison{gap:var(--space-lg)}.site-footer>.wrap{flex-direction:column;align-items:flex-start}}
@media(max-width:25rem){.home-example .quiet-link{font-size:.75rem;gap:var(--space-xs)}.route-list>a{gap:var(--space-sm)}.route-list>a>span:first-child{display:none}.business-site .related-solution .text-link{font-size:.78rem;gap:var(--space-xs)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.business-site *{transition:none}}

/* Visual rhythm: brand sculpture, process illustrations and distinct reading planes. */
.business-hero h1{font-size:var(--text-hero-art);line-height:1.06;max-width:15ch}
.home-example{position:relative;border:0;padding:0;background:var(--color-transparent);display:flex;flex-direction:column;align-items:flex-start}
.hero-brand-art,.about-mark{width:min(300px,80%);aspect-ratio:1.0345;position:relative;overflow:clip;margin-bottom:var(--space-lg);align-self:center;mask-image:linear-gradient(to bottom,var(--color-transparent),var(--color-ink) 10%,var(--color-ink) 90%,var(--color-transparent))}
.hero-brand-art img,.about-mark img{position:absolute;width:482.667%;max-width:none;height:auto;left:-62.222%;top:6.897%}
.home-example .example-label{flex-direction:row;justify-content:space-between;width:100%}
.home-example h2{font-size:1.3rem;margin-block:var(--space-sm)}
.mini-flow{width:100%;margin-block:var(--space-sm) var(--space-lg);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.mini-flow li{display:block;border:0;border-top:var(--rule) solid var(--color-rule);padding-block:var(--space-sm)}
.mini-flow strong{display:block;margin-top:var(--space-xs);font-size:.83rem}
.mini-flow p{font-size:.75rem;margin-top:var(--space-xs)}
.intro-composition{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl);align-items:center}
.intro-visual{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-lg);padding:var(--space-art-inset);background:var(--color-surface-deep);min-width:0;position:relative}
.intro-visual::before,.intro-visual::after{content:"";position:absolute;width:20px;height:20px;border-color:var(--color-art-rule)}
.intro-visual::before{left:0;top:0;border-left:var(--rule) solid;border-top:var(--rule) solid}
.intro-visual::after{right:0;bottom:0;border-right:var(--rule) solid;border-bottom:var(--rule) solid}
.process-art{width:64px;height:64px;color:var(--color-art-ink)}
.process-art-large{width:clamp(120px,15vw,210px);height:auto}
.visual-accent{stroke:var(--color-accent)}
.visual-flow{display:flex;gap:var(--space-md);align-items:center;color:var(--color-light-muted);font-size:.7rem;white-space:nowrap}
.visual-flow span+span::before{content:"→";color:var(--color-accent);margin-right:var(--space-md)}
.solution-art{margin-bottom:var(--space-sm)}
.solution-link{position:relative;padding-block:var(--space-xl);transition:background-color var(--dur-short) var(--ease-out)}
.solution-link h2{max-width:28ch}
.home-routes{padding-block:var(--space-2xl)}
.route-list>a>span:first-child{font-family:var(--font-display);font-size:1.3rem;color:var(--color-accent)}
.source-document,.prepared-order{padding:var(--space-lg);border:0;border-top:var(--rule) solid var(--color-art-rule)}
.prepared-order{background:var(--color-surface-deep);border-top-color:var(--color-accent)}
.source-document>.eyebrow,.prepared-order>.eyebrow{margin-bottom:var(--space-md)}
.human-check{background:var(--color-surface-deep);padding:var(--space-lg);border:0;margin-top:var(--space-lg)}
.check-step{font-family:var(--font-display);font-size:1.6rem;line-height:1}
.method-list{counter-reset:steps}
.method-list li{padding-block:var(--space-xl)}
.method-list li>span{font-family:var(--font-display);font-size:1.75rem;line-height:1}
.method-list .deliverable{padding:var(--space-sm) var(--space-md);border:var(--rule) solid var(--color-rule);background:var(--color-surface-deep)}
.page-cta{background:var(--color-surface-deep);padding-block:var(--space-2xl)}
.page-cta h2{font-size:clamp(1.8rem,3vw,2.8rem);max-width:23ch}
.exception-list summary{padding-block:var(--space-md)}
.exception-list details>div{padding-bottom:var(--space-lg)}
.contact-person{background:var(--color-surface-deep);border:0;padding:var(--space-lg)}
.contact-person h2{font-size:1.8rem}
.contact-person .contact-address{color:var(--color-accent)}
.about-mark{margin:0;justify-self:center;width:min(280px,100%)}
@media(min-width:64rem){.business-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-2xl)}.business-hero .hero-lead{max-width:48ch}.intro-composition{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}.business-hero{padding-block:var(--space-2xl)}}
@media(max-width:63.99rem){.home-example{border-top:var(--rule) solid var(--color-rule);padding-top:var(--space-xl)}.hero-brand-art{width:200px}.intro-visual{flex-direction:row;padding:var(--space-lg);justify-content:space-around}.process-art-large{width:110px}.about-mark{width:200px}}
@media(max-width:47.99rem){.mini-flow{grid-template-columns:minmax(0,1fr);gap:0}.mini-flow li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--space-sm)}.mini-flow strong{margin:0}.intro-visual{gap:var(--space-sm)}.visual-flow{flex-direction:column;gap:var(--space-xs);align-items:flex-start}.visual-flow span+span::before{margin-right:var(--space-xs)}.source-document,.prepared-order,.human-check,.contact-person{padding:var(--space-md)}.method-list li>span{font-size:1.5rem}}
@media(prefers-reduced-motion:no-preference){.business-hero>div,.intro-composition>div:first-child{animation:preview-enter var(--dur-reveal) var(--ease-out) both}.hero-brand-art,.intro-visual,.about-mark{animation:preview-enter var(--dur-reveal) var(--ease-out) 100ms both}.solution-link a span,.button span{transition:transform var(--dur-short) var(--ease-out)}.solution-link a:hover span,.button:hover span{transform:translate(2px,-2px)}}
@keyframes preview-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.business-hero>div,.intro-composition>div:first-child,.hero-brand-art,.intro-visual,.about-mark{animation:none}.solution-link a span,.button span{transition:none;transform:none}}
.business-hero h1 br{display:initial}
.hero-brand-art{width:min(250px,75%);margin-bottom:var(--space-md)}
.mini-flow{margin-block:var(--space-sm) var(--space-md)}

/* About: a clear, naturally framed portrait beside the introduction. */
.about-intro{padding-bottom:var(--space-xl)}
.about-intro .about-composition{gap:var(--space-lg)}
.about-intro .about-composition>div:first-child{min-width:0}
.about-intro h1{max-width:22ch}
.about-intro .page-lead{max-width:52ch}
.about-jump{display:inline-flex;align-items:center;gap:var(--space-sm);min-height:44px;margin-top:var(--space-md);font-size:var(--text-small)}
.about-jump span{transition:transform var(--dur-short) var(--ease-out)}
.about-jump:hover span{transform:translateY(3px)}
.about-intro .about-portrait{width:min(100%,360px);margin:0;align-self:center;justify-self:center}
.about-intro .about-portrait img{border-radius:var(--radius-md);mask-image:none}
#ervaring{scroll-margin-top:var(--space-lg)}
@media(min-width:64rem){.about-intro .about-composition{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-xl)}.about-intro .about-composition>div:first-child{padding-block:var(--space-lg)}.about-intro h1{font-size:clamp(2.5rem,3.8vw,3.6rem)}}
@media(max-width:63.99rem){.about-intro .about-portrait{width:min(100%,320px)}.about-intro .about-composition{gap:var(--space-lg)}}
@media(prefers-reduced-motion:no-preference){.about-intro .about-portrait{animation:preview-enter var(--dur-reveal) var(--ease-out) 120ms both}}
@media(prefers-reduced-motion:reduce){.about-jump span{transition:none;transform:none}.about-intro .about-portrait{animation:none}}
@media(min-width:64rem){.business-hero{padding-block:var(--space-xl)}}

/* Editorial still-life imagery: locally served, original brand untouched. */
.process-image{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}
.intro-visual{padding:0;background:var(--color-transparent);gap:0;overflow:clip}
.intro-visual::before,.intro-visual::after{display:none}
.intro-visual .visual-flow{padding:var(--space-md) var(--space-sm);justify-content:center;align-items:center;width:100%;border-top:var(--rule) solid var(--color-rule)}
.solution-art{width:100%;max-width:100%;margin-bottom:var(--space-md)}
.method-art{width:min(760px,100%);margin-block:var(--space-lg);margin-inline:auto}
@media(max-width:63.99rem){.intro-visual{flex-direction:column}.intro-visual .visual-flow{flex-direction:row;gap:var(--space-md)}.visual-flow span+span::before{margin-right:var(--space-md)}}
@media(max-width:47.99rem){.intro-visual{max-width:100%}.intro-visual .visual-flow{gap:var(--space-sm)}.visual-flow span+span::before{margin-right:var(--space-sm)}}

/* Photographic series: natural materials on the same navy page canvas. */
.process-image{object-fit:cover}