/* Hallmark · checked: 2026-10-31 · genre: editorial · theme: existing industry brands · built: the project · redesign: polish · v2.0.0 */
/* Critique: real business controls carry the page; each industry keeps its own typography, photographic subject and surface palette. */
/* Hallmark · waive 39b · Oak House and Garden Rooms are portfolio image buttons · The visual-project buttons open Oak House and Garden Rooms in the project-dialog. */
:root { --cafe-ground:#f7f0e4; --cafe-ink:#492d23; --cafe-accent:#713829; --cafe-tone:#e9dcc5; --salon-ground:#f5f0eb; --salon-ink:#3c3431; --salon-accent:#5c4744; --salon-tone:#e9dfd7; --interiors-ground:#f4f2eb; --interiors-ink:#30382d; --interiors-accent:#46543b; --interiors-tone:#e0e4d7; --repair-ground:#f4f6f7; --repair-ink:#1c2b39; --repair-accent:#234f73; --repair-tone:#e3eaf0; --cleaning-ground:#f3f7f6; --cleaning-ink:#1c3b40; --cleaning-accent:#1d5f67; --cleaning-tone:#dcece8; --landscaping-ground:#f3f2e8; --landscaping-ink:#233d28; --landscaping-accent:#315437; --landscaping-tone:#dfe6d6; --accounting-ground:#f7f5ee; --accounting-ink:#243d42; --accounting-accent:#28575d; --accounting-tone:#e0e9e5; --consulting-ground:#f7f3e9; --consulting-ink:#362f23; --consulting-accent:#68502b; --consulting-tone:#e9dfca; --demo-line: color-mix(in srgb, var(--ink) 22%, transparent); --demo-soft: color-mix(in srgb, var(--ground) 86%, var(--ink)); --demo-sans: Arial, Helvetica, sans-serif; --demo-serif: Georgia, 'Times New Roman', serif; --demo-dialog-paper: #faf9f5; --demo-dialog-ink: #26312c; --demo-overlay: #151b2499; }
.demo-cafe { --ground:var(--cafe-ground); --ink:var(--cafe-ink); --accent:var(--cafe-accent); --tone:var(--cafe-tone); --display:var(--demo-serif); }
.demo-salon { --ground:var(--salon-ground); --ink:var(--salon-ink); --accent:var(--salon-accent); --tone:var(--salon-tone); --display:var(--demo-serif); }
.demo-interiors { --ground:var(--interiors-ground); --ink:var(--interiors-ink); --accent:var(--interiors-accent); --tone:var(--interiors-tone); --display:var(--demo-serif); }
.demo-repair { --ground:var(--repair-ground); --ink:var(--repair-ink); --accent:var(--repair-accent); --tone:var(--repair-tone); --display:var(--demo-sans); }
.demo-cleaning { --ground:var(--cleaning-ground); --ink:var(--cleaning-ink); --accent:var(--cleaning-accent); --tone:var(--cleaning-tone); --display:var(--demo-sans); }
.demo-landscaping { --ground:var(--landscaping-ground); --ink:var(--landscaping-ink); --accent:var(--landscaping-accent); --tone:var(--landscaping-tone); --display:var(--demo-serif); }
.demo-accounting { --ground:var(--accounting-ground); --ink:var(--accounting-ink); --accent:var(--accounting-accent); --tone:var(--accounting-tone); --display:var(--demo-sans); }
.demo-consulting { --ground:var(--consulting-ground); --ink:var(--consulting-ink); --accent:var(--consulting-accent); --tone:var(--consulting-tone); --display:var(--demo-serif); }
html,body { overflow-x:clip; }
.business-demo { caret-color:var(--accent); scrollbar-color:var(--accent) var(--ground); }
.business-demo ::selection { color:var(--ground); background:var(--ink); }
.business-demo .demo-wordmark { font-family:var(--display); font-size:26px; letter-spacing:-.04em; }
.business-hero { padding-block:var(--space-xl) var(--space-2xl); }
.business-hero h1 { font-size:clamp(48px,5.3vw,80px); line-height:1.05; max-width:11ch; }
.business-hero p { font-size:18px; max-width:34ch; margin-bottom:var(--space-lg); }
.business-hero-split { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:var(--space-2xl); min-height:650px; }
.business-hero-split .business-hero-copy { display:grid; gap:var(--space-lg); }
.business-hero-split>img { height:540px; }
.demo-salon .business-hero-split>img { border-radius:240px 240px 0 0; }
.demo-accounting .business-hero-split>img { height:480px; }
.business-hero-wide .business-hero-copy { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--space-2xl); align-items:end; padding-bottom:var(--space-xl); }
.business-hero-wide h1 { max-width:14ch; }
.business-hero-wide>img { height:440px; }
.business-services { border-top:1px solid var(--demo-line); }
.business-services article { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:var(--space-xl); padding-block:var(--space-xl); border-bottom:1px solid var(--demo-line); align-items:center; }
.business-services article p { margin-top:var(--space-sm); max-width:46ch; }
.service-choice { display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-md); }
.service-choice>span { font-size:15px; }
.business-practical { background:var(--tone); padding-block:var(--space-3xl); }
.business-practical>.demo-wrap { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--space-3xl); }
.business-practical h2 { max-width:12ch; }
.business-practical h3 { font-size:26px; margin-bottom:var(--space-lg); }
.business-practical p { margin-bottom:var(--space-lg); }
.business-faq { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-2xl); }
.business-faq>div>p { margin-top:var(--space-lg); }
.business-faq details { padding-block:var(--space-lg); border-bottom:1px solid var(--demo-line); }
.business-faq summary { cursor:pointer; font-size:20px; }
.business-faq details p { margin-top:var(--space-md); }
.business-filter { display:flex; flex-wrap:wrap; gap:var(--space-xs); margin-bottom:var(--space-lg); }
.business-filter button { border:1px solid var(--demo-line); background:transparent; color:var(--ink); min-height:44px; padding:var(--space-xs) var(--space-md); }
.business-filter button[aria-pressed=true] { background:var(--ink); color:var(--ground); }
.business-filter button:hover { border-color:var(--ink); }
.pickup-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:var(--space-2xl); align-items:start; }
.food-menu article { display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); padding-block:var(--space-lg); border-bottom:1px solid var(--demo-line); }
.food-menu article p { margin-top:var(--space-xs); font-size:15px; }
.food-action { display:flex; align-items:center; gap:var(--space-lg); }
.food-action .demo-button { min-width:60px; padding-inline:var(--space-md); }
.pickup-order { background:var(--tone); padding:var(--space-lg); position:sticky; top:var(--space-lg); }
.pickup-order>h3 { margin-bottom:var(--space-xs); }
#cart-count { font-size:14px; }
#cart-items { padding-block:var(--space-lg); }
.cart-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-xs); margin-bottom:var(--space-md); }
.quantity-control { display:flex; align-items:center; gap:var(--space-md); }
.quantity-control button { background:var(--ground); color:var(--ink); border:1px solid var(--demo-line); width:44px; height:44px; }
.order-total { display:flex; justify-content:space-between; border-top:1px solid var(--demo-line); padding-top:var(--space-md); font-variant-numeric:tabular-nums; }
.pickup-order>.demo-button { width:100%; margin-top:var(--space-md); }
.workflow-dialog { background:var(--demo-dialog-paper); color:var(--demo-dialog-ink); width:min(680px,calc(100% - 32px)); max-width:680px; }
.workflow-dialog::backdrop { background:var(--demo-overlay); }
.workflow-dialog h2 { font-size:36px; line-height:1.15; }
.workflow-dialog h3 { font-size:27px; }
.workflow-dialog .workflow-disclosure { font-size:14px; margin-block:var(--space-md) var(--space-lg); }
#workflow-fields { display:grid; gap:var(--space-lg); }
.workflow-dialog form { display:block; }
.workflow-dialog label { display:grid; gap:var(--space-xs); font-size:14px; }
.workflow-dialog input,.workflow-dialog select,.workflow-dialog textarea { font:inherit; font-size:16px; border:1px solid var(--demo-dialog-ink); border-radius:0; color:var(--demo-dialog-ink); background:var(--demo-dialog-paper); width:100%; min-width:0; min-height:48px; padding:var(--space-sm); }
.workflow-dialog textarea { resize:vertical; }
.workflow-dialog .demo-button { background:var(--demo-dialog-ink); color:var(--demo-dialog-paper); }
.workflow-dialog :focus-visible { outline:2px solid var(--studio-blue); outline-offset:3px; }
.workflow-hint { font-size:13px; line-height:1.5; margin-block:var(--space-sm); }
.workflow-estimate { display:block; padding-block:var(--space-md); border-block:1px solid var(--demo-dialog-ink); font-size:16px; }
#booking-result { margin:0; padding:0; background:transparent; color:var(--demo-dialog-ink); }
#booking-result>p { margin-top:var(--space-sm); }
#request-summary { margin-block:var(--space-lg); }
#request-summary>div { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--space-md); padding-block:var(--space-sm); border-bottom:1px solid color-mix(in srgb,var(--demo-dialog-ink) 18%,transparent); }
#request-summary dt { font-size:14px; }
#request-summary dd { margin:0; overflow-wrap:anywhere; }
.workflow-actions { display:flex; flex-wrap:wrap; gap:var(--space-lg); align-items:center; margin-bottom:var(--space-md); }
.workflow-link { display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:4px; }
[hidden] { display:none!important; }
.architecture-projects .visual-project:nth-child(2) { margin-top:0; }
@media(max-width:960px) {
 .business-hero-split { gap:var(--space-lg); min-height:0; }
 .business-hero-split>img { height:440px; }
 .pickup-layout { gap:var(--space-lg); }
 .business-practical>.demo-wrap { gap:var(--space-xl); }
}
@media(max-width:760px) {
 .business-hero { padding-block:var(--space-lg) var(--space-xl); }
 .business-hero h1 { font-size:46px; max-width:14ch; }
 .business-hero p { font-size:16px; }
 .business-hero-split,.business-hero-wide .business-hero-copy,.business-faq,.business-practical>.demo-wrap,.pickup-layout,.business-services article { grid-template-columns:minmax(0,1fr); gap:var(--space-lg); }
 .business-hero-split>img,.business-hero-wide>img,.demo-accounting .business-hero-split>img { height:330px; }
 .business-hero-wide .business-hero-copy { padding-bottom:var(--space-lg); }
 .business-practical { padding-block:var(--space-2xl); }
 .service-choice { align-items:flex-start; }
 .business-services article { padding-block:var(--space-lg); }
 .pickup-order { position:static; }
 .food-menu article { align-items:flex-start; }
 .food-action { flex-direction:column; gap:var(--space-xs); }
 .food-menu h3 { font-size:24px; }
 .workflow-dialog h2 { font-size:28px; }
 .workflow-dialog .demo-form-row { grid-template-columns:minmax(0,1fr); }
 #request-summary>div { grid-template-columns:minmax(0,1fr); gap:var(--space-xs); }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.business-demo button:active { opacity:.75; }
.business-demo .demo-header .demo-wordmark { flex-shrink:0; }
.business-demo .demo-menu-toggle { white-space:nowrap; flex-shrink:0; }
.business-demo .demo-footer { flex-wrap:wrap; align-items:center; }
.business-demo .demo-footer>a { white-space:nowrap; }
@media(max-width:760px) { .business-demo .demo-header { gap:var(--space-sm); } .business-demo .demo-header .demo-wordmark { font-size:23px; } }

.business-hero h1,.business-demo h2 { text-wrap:balance; }

html:has(dialog[open]) { overflow-y:hidden; }