/* Hallmark · checked: 2026-10-31 · genre: editorial · theme: existing industry brands · built: the project · redesign: polish · v2.0.0 */
/* Hallmark · waive 39b · The two tall visual-project buttons open portfolio images · They are image cards with button semantics, not oversized text actions. */
:root { --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px; --studio-blue: #2458f5; --studio-white: #fff; --demo-body: Arial, Helvetica, sans-serif; --demo-label: 14px; }
html, body { overflow-x: clip; }
body { font-family: var(--demo-body); }
h1, h2, h3 { min-width: 0; overflow-wrap: break-word; }
.demo-wrap { max-width: 1440px; }
.demo-banner { font-family: var(--demo-body); font-size: var(--demo-label); padding-block: var(--space-xs); }
.demo-banner a { display: inline-flex; align-items: center; min-height: 44px; padding-block: var(--space-xs); }
.demo-banner a:focus-visible { outline-color: var(--studio-white); outline-offset: 2px; }
.demo-close a:focus-visible, .demo-close button:focus-visible { outline-color: var(--ground); }
.demo-button { min-height: 48px; padding-block: var(--space-sm); }
.demo-menu-toggle { min-height: 44px; }
.demo-header { padding-block: 20px; }
.demo-heading h2 { line-height: 1.1; }
.demo-footer a:not(.demo-wordmark) { display: inline-block; min-height: 44px; padding-block: var(--space-xs); }
.demo-footer p a { min-height: 0!important; padding-block: 0!important; }
.demo-button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.demo-button[aria-busy='true'] { cursor: progress; }
.booking-dialog input, .booking-dialog select { border-color: var(--ink); }
.booking-dialog, .project-dialog { max-height: calc(100dvh - 40px); overflow-y: auto; }
@media(max-width: 760px) {
 .demo-banner { padding-inline: 20px; font-size: 12px; gap: var(--space-md); }
 .demo-banner a { font-size: 12px; }
 .demo-header { padding-block: var(--space-md); }
 .demo-section p { line-height: 1.65; }
 .demo-footer { padding-bottom: 32px; }
 .booking-dialog, .project-dialog { width: calc(100% - 32px); max-width: none; padding: 20px; }
}
@media(prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none!important; transition-duration: .01ms!important; scroll-behavior: auto!important; } }

.architecture-hero-image { height: clamp(320px, 36vw, 520px); }
.demo-automotive :focus-visible { outline-color: var(--ink); }
.restaurant-story :focus-visible { outline-color: var(--ground); }
.demo-automotive .demo-close :focus-visible { outline-color: var(--studio-white); }
.demo-automotive .booking-dialog :focus-visible, .demo-automotive .project-dialog :focus-visible { outline-color: var(--studio-blue); }