/* Hallmark · modern-minimal · practical demonstrations · existing navy/turquoise tokens.
   Structure: compact source → result → review; P5 H5 E4 S5 R5 V5. */
:root{--color-muted:oklch(80% .018 245);--color-light-muted:var(--color-muted);--text-small:.9375rem}
html,body{overflow-x:clip}
h1,h2,h3{overflow-wrap:anywhere;min-width:0}
.business-site .eyebrow,.breadcrumbs,.fiction-label,.document-note,.concept-state,.examples-note,.hero-reassurance,.site-footer p,.site-footer nav a,.site-footer>.wrap>span{font-size:var(--text-small);color:var(--color-muted)}
.business-site p{line-height:1.65}
.business-site .business-header{padding-block:var(--space-md)}
.business-site .business-header nav a{font-size:var(--text-small)}
.business-site .business-hero,.page-intro,.multipage .method{padding-block:var(--space-lg)}
.business-site .business-hero{gap:var(--space-xl)}
.business-section-head,.example-section-head{margin-bottom:var(--space-md)}
.home-routes,.responsibility,.order-value,.exceptions,.order-pilot,.page-cta{padding-block:var(--space-lg)}
.solution-directory,.order-example,.contact-page{padding-bottom:var(--space-lg)}
.route-list>a{padding-block:var(--space-md)}
.business-site .button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);min-height:48px;padding:.75rem 1.1rem;border:var(--rule) solid var(--color-ink);border-radius:var(--radius-sm);white-space:nowrap;font-size:var(--text-small);line-height:1.4;margin:0}
.business-site .button-secondary{background:var(--color-transparent);color:var(--color-ink)}
.business-site .button:hover{background:var(--color-accent);color:var(--color-paper);border-color:var(--color-accent)}
.business-site .button:active{transform:translateY(1px)}
.business-site a:focus-visible,.business-site summary:focus-visible{outline:2px solid var(--color-accent);outline-offset:5px}
.business-site .text-link,.business-site .quiet-link{font-size:var(--text-small);min-height:44px;gap:.5rem}
.order-demo{align-self:center;width:100%;gap:var(--space-sm)}
.order-demo h2{font-size:clamp(1.2rem,2vw,1.55rem);margin:0;max-width:28ch}
.demo-step{display:block;font-size:var(--text-small);font-weight:500;color:var(--color-accent);margin-bottom:.4rem}
.demo-mail,.demo-lines,.demo-control{width:100%;padding:.9rem 1rem;background:var(--color-surface);border-left:2px solid var(--color-rule)}
.demo-mail p,.demo-control p{margin:0;font-size:var(--text-small)}
.demo-control{border-left-color:var(--color-accent)}
.order-demo table,.invoice-check{width:100%;border-collapse:collapse;font-size:var(--text-small)}
.order-demo th,.order-demo td,.invoice-check th,.invoice-check td{padding:.4rem .25rem;text-align:left;border-bottom:var(--rule) solid var(--color-rule);overflow-wrap:anywhere}
.order-demo th:last-child,.order-demo td:last-child{text-align:right}
.order-demo tbody tr:last-child td{border:0}
.case-grid{gap:0 var(--space-lg)}
.solution-link{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--space-md);padding-block:var(--space-md);align-items:start}
.solution-art{width:100%;margin:0}
.solution-art .process-image{aspect-ratio:4/3;border-radius:var(--radius-sm)}
.solution-summary{min-width:0}
.solution-summary .eyebrow{margin-bottom:.4rem}
.solution-link h2{font-size:1.3rem;line-height:1.25;margin-bottom:.5rem}
.solution-summary>p:not(.eyebrow){font-size:var(--text-small);color:var(--color-muted)}
.solution-link .text-link{margin-top:.25rem}
.intro-composition{align-items:center;gap:var(--space-lg)}
.intro-visual{width:min(260px,100%);justify-self:end;align-self:center}
.intro-visual .process-image{aspect-ratio:3/2;border-radius:var(--radius-sm)}
.intro-visual .visual-flow{font-size:var(--text-small);padding:.65rem 0}
.order-comparison{align-items:stretch;gap:var(--space-md)}
.source-document,.prepared-order{padding:var(--space-md);min-width:0}
.source-document{background:var(--color-surface-deep);border-top:2px solid var(--color-muted)}
.prepared-order{background:var(--color-surface);border-top:2px solid var(--color-accent)}
.source-document>.eyebrow,.prepared-order>.eyebrow{margin-bottom:.5rem}
.order-comparison h3{margin-block:.5rem 1rem}
.document-meta{font-size:var(--text-small)}
.document-meta>div{gap:.65rem;padding-block:.5rem}
.document-meta dt{min-width:0}
.document-meta dd{min-width:0;overflow-wrap:anywhere}
.source-document blockquote{margin-block:var(--space-sm)}
.source-document blockquote p+p{margin-top:.5rem}
.document-note,.concept-state{margin-top:var(--space-sm)}
.human-check{padding:var(--space-md);margin-top:var(--space-md);background:var(--color-surface-deep);border-left:2px solid var(--color-accent);border-top:0;gap:var(--space-sm)}
.human-check h3{font-size:1.2rem;margin-block:.4rem}
.human-check p+p{margin-top:.5rem}
.fiction-label{color:var(--color-accent);font-weight:500}
.invoice-check caption{text-align:left;font-weight:500;color:var(--color-ink);margin-bottom:var(--space-sm)}
.invoice-check th{color:var(--color-muted);font-weight:400}
.invoice-check td{padding-block:.8rem}
.status-text,.status-attention{font-weight:500;color:var(--color-accent)}
.status-attention{border-bottom:1px dashed var(--color-accent)}
.mailbox-list,.dossier-checklist{list-style:none;padding:0;margin:0}
.mailbox-list li{padding:.85rem .75rem;border-bottom:var(--rule) solid var(--color-rule)}
.mailbox-list li>span,.report-heading>span{display:block;color:var(--color-muted);font-size:var(--text-small)}
.mailbox-list strong{display:block;margin-block:.25rem;font-weight:500}
.mailbox-list p{font-size:var(--text-small)}
.selected-mail{border-left:2px solid var(--color-accent);background:var(--color-surface)}
.draft-reply,.question-block,.answer-block{padding:var(--space-sm);background:var(--color-surface-deep);margin-block:var(--space-sm);border-left:2px solid var(--color-rule)}
.source-reference{border-left:2px solid var(--color-accent);padding-left:var(--space-sm);margin-top:var(--space-sm);font-size:var(--text-small)}
.source-reference blockquote{margin-top:.5rem;color:var(--color-muted)}
.source-list{font-size:var(--text-small)}
.dossier-checklist li{padding:.7rem 0;border-top:var(--rule) solid var(--color-rule);font-size:var(--text-small)}
.dossier-checklist span{display:block;color:var(--color-accent);font-weight:500}
.report-heading{border-bottom:var(--rule) solid var(--color-rule);padding-bottom:var(--space-sm);margin-bottom:var(--space-sm)}
.report-heading strong{display:block;font-family:var(--font-display);font-size:1.2rem;margin-bottom:.4rem}
.report-sections>div{padding-block:var(--space-sm);border-bottom:var(--rule) solid var(--color-rule)}
.report-sections dt{font-weight:500;color:var(--color-accent);margin-bottom:.4rem}
.method-art{float:right;width:min(220px,25%);margin:0 0 var(--space-md) var(--space-lg)}
.method-art .process-image{border-radius:var(--radius-sm)}
.method-list{clear:both}
.method-list li{padding-block:var(--space-md);gap:var(--space-md)}
.method-list li>span{color:var(--color-accent)}
.method-list .deliverable{font-size:1rem;text-align:left;line-height:1.5;border:0;border-left:2px solid var(--color-accent);padding:.65rem 1rem;background:var(--color-surface)}
.deliverable>span{display:block;color:var(--color-accent);font-size:var(--text-small);margin-bottom:.3rem}
.about-intro .about-portrait{width:min(100%,280px)}
.about-intro .about-portrait figcaption{padding-top:.75rem}
.about-portrait figcaption strong{display:block;font-size:1.2rem;font-family:var(--font-display)}
.about-portrait figcaption span{display:block;color:var(--color-muted);font-size:var(--text-small)}
.detail-layout{gap:var(--space-lg)}
.detail-copy section{padding-block:var(--space-md)}
.about-intro .about-composition>div:first-child{padding-block:0}
.contact-actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-block:var(--space-md)}
.contact-person .contact-phone{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2rem);color:var(--color-ink);margin-bottom:.3rem}
.contact-phone a{display:inline-flex;min-height:44px;align-items:center;white-space:nowrap}
.contact-person .contact-address{font-size:1rem}
.company-details{margin-top:var(--space-md);padding-top:var(--space-md)}
@media(min-width:64rem){.business-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.intro-composition{grid-template-columns:minmax(0,1.8fr) minmax(0,.7fr)}.about-intro .about-composition{grid-template-columns:minmax(0,1.7fr) minmax(0,.8fr)}}
@media(max-width:63.99rem){.intro-visual{justify-self:start;width:200px}.case-grid{grid-template-columns:minmax(0,1fr)}.about-intro .about-portrait{justify-self:start}.business-site .business-hero{gap:var(--space-lg)}.order-demo{padding-top:var(--space-md)}}
@media(max-width:47.99rem){.solution-link{grid-template-columns:80px minmax(0,1fr);gap:var(--space-sm)}.solution-link h2{font-size:1.2rem}.source-document,.prepared-order,.human-check{padding:var(--space-sm)}.business-section-head,.example-section-head{grid-template-columns:minmax(0,1fr);gap:var(--space-sm)}.method-art{float:none;width:160px;margin:0 0 var(--space-sm)}.method-list li{grid-template-columns:32px minmax(0,1fr)}.method-list .deliverable{grid-column:2}.related-solution>.wrap{flex-direction:column;align-items:flex-start}.contact-grid{gap:var(--space-lg)}.document-meta>div{grid-template-columns:minmax(0,.7fr) minmax(0,1fr)}.hero-actions{gap:var(--space-sm)}.order-demo .quiet-link{font-size:var(--text-small)}}
@media(prefers-reduced-motion:no-preference){.order-demo{animation:preview-enter var(--dur-reveal) var(--ease-out) 100ms both}}
@media(prefers-reduced-motion:reduce){.order-demo{animation:none}}

/* Keep approach photography within the introduction, so the steps begin immediately. */
.method-context{display:flex;align-items:center;gap:var(--space-md);min-width:0}
.method-context>p{color:var(--color-muted);flex:1;min-width:0}
.method-context .method-art{float:none;flex:0 0 140px;width:140px;margin:0}
.method-list{margin-top:var(--space-md)}
.method-list .deliverable{color:var(--color-ink);justify-self:stretch}
.prepared-order th,.prepared-order td span,.review-note p,.review-note strong,.source-reference p,.report-sections dt,.pilot-measures dd{font-size:var(--text-small)}
@media(max-width:47.99rem){.method-context{align-items:flex-start}.method-context .method-art{flex-basis:80px;width:80px}.company-details dl>div{grid-template-columns:minmax(0,.75fr) minmax(0,1fr)}}
/* Keep the source/proposal/review labels inside the small supporting image. */
.intro-visual .visual-flow{gap:.5rem;justify-content:space-between}
.intro-visual .visual-flow span+span::before{margin-right:.5rem}
.prepared-order .invoice-check td .status-text,.prepared-order .invoice-check td .status-attention{color:var(--color-accent)}
@media(max-width:63.99rem){.intro-visual{width:min(260px,100%)}}