/* Tablo marketplace. Jeddy's blue/slate visual system, in both themes. */
body { accent-color: var(--color-action); background: var(--color-bg); color: var(--color-ink); }
.site-main { min-inline-size: 0; }
h1, h2, h3 { font-weight: 750; }
a { text-decoration-skip-ink: auto; }
.btn { min-block-size: 3rem; padding-inline: var(--space-5); border-radius: var(--radius-sm); font-weight: 650; transition: background-color var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2), scale var(--dur-1); }
.btn--primary { color: var(--color-action-ink); background: var(--color-action); box-shadow: var(--shadow-sm); border-color: var(--color-action); }
.btn--primary:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); box-shadow: var(--shadow-md); }
.btn--secondary, .btn--ghost-outline { color: var(--color-ink); background: var(--color-surface); border-color: var(--color-border); }
.btn--secondary:hover, .btn--ghost-outline:hover { background: var(--color-surface-2); border-color: var(--color-border-strong); }
.btn--sm { min-block-size: 2.75rem; }
.btn--lg { min-block-size: 3.5rem; }
.btn:active { scale: 0.98; transform: none; }
.btn:disabled { scale: 1; }
.field { gap: var(--space-2); }
.field + .field { margin-block-start: var(--space-4); }
.field label { color: var(--color-muted); font-size: var(--text-xs); font-weight: 650; }
.field :is(input,textarea,select) { min-block-size: 3rem; border: 1px solid var(--color-border); border-radius: var(--radius-xs); background: var(--color-surface-2); color: var(--color-ink); padding: var(--space-3) var(--space-4); }
.field :is(input,textarea,select):focus-visible { background: var(--color-surface); border-color: var(--color-accent); }
.field textarea { line-height: 1.9; resize: vertical; }
.field input[type=checkbox], .field input[type=radio] { min-block-size: 0; }
.field input[type=file] { max-inline-size: 100%; padding: var(--space-3); font-size: var(--text-sm); }
.field input[type=file]::file-selector-button { border: 0; border-radius: var(--radius-xs); background: var(--color-action); color: var(--color-action-ink); padding: var(--space-2) var(--space-3); margin-inline-end: var(--space-3); font: inherit; cursor: pointer; }
.field:focus-within label { color: var(--color-accent-text); }
.form-errors { flex-direction: column; border-inline-start: 3px solid var(--color-danger); }
.form-errors ul, .errorlist { padding-inline-start: var(--space-5); }
.messages { margin: var(--space-4) auto; max-inline-size: var(--container); }
.messages__item { border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); }
form[aria-busy=true] .btn:disabled::after { content: ''; inline-size: 1rem; block-size: 1rem; flex-shrink: 0; border: 2px solid currentColor; border-block-start-color: transparent; border-radius: var(--radius-pill); animation: spin 700ms linear infinite; }

/* Full, restrained chrome. Theme switching remains visible on phones. */
.site-header--atelier { --atelier-bg: var(--color-bg); --atelier-panel: var(--color-surface-2); --atelier-line: var(--color-border); --atelier-ink: var(--color-ink); --atelier-muted: var(--color-muted); background: var(--color-glass); color: var(--color-ink); border-block-end: 1px solid var(--color-border); backdrop-filter: blur(16px); }
.site-header--atelier .site-header__bar { max-inline-size: var(--container); min-block-size: var(--header-h); min-height: var(--header-h); padding-inline: var(--gutter); gap: var(--space-5); border: 0; }
.site-header--atelier .nav { gap: var(--space-1); }
.site-header--atelier .nav__link { color: var(--color-muted); background: transparent; border-radius: 0; font-size: var(--text-xs); font-weight: 600; min-block-size: 2.75rem; padding-inline: var(--space-3); }
.site-header--atelier .nav__link:hover { background: transparent; color: var(--color-ink); }
.site-header--atelier .nav__link[aria-current] { color: var(--color-accent-text); border-block-end: 2px solid var(--color-accent); }
.atelier-brand { color: var(--color-ink); font-size: var(--text-base); font-weight: 800; }
.atelier-brand .brand__mark { inline-size: 2.75rem; block-size: 2.75rem; color: var(--color-action-ink); background: var(--color-action); border-radius: var(--radius-sm); box-shadow: none; }
.atelier-brand small { color: var(--color-muted); font-size: 0.6rem; }
.atelier-board-link { color: var(--color-muted); background: transparent; border-color: transparent; }
.site-header--atelier .nav-toggle, .ux-icon-button { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-muted); background: transparent; cursor: pointer; flex-shrink: 0; }
.site-header--atelier .nav-toggle { display: none; }
.ux-icon-button:hover { color: var(--color-accent); background: var(--color-accent-soft); }
.theme-button { border-color: transparent; }
.theme-moon, .theme-sun { display: grid; place-items: center; }
.theme-sun { display: none; }
[data-theme=dark] .theme-sun { display: grid; }
[data-theme=dark] .theme-moon { display: none; }
.mobile-drawer:not([open]) { display: none !important; }
.mobile-drawer[open] { display: grid; gap: var(--space-5); position: fixed; inset-inline: var(--space-4); inset-block-start: var(--space-4); inset-block-end: auto; margin: 0 auto; inline-size: min(calc(100% - 2 * var(--space-4)), 30rem); max-block-size: calc(100dvh - 2 * var(--space-4)); padding: var(--space-5); overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-lg); animation: ux-menu-in 260ms var(--ease-out); }
.mobile-drawer::backdrop { background: var(--color-overlay); backdrop-filter: blur(4px); animation: ux-fade-in 200ms var(--ease-out); }
.ux-menu-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.ux-menu-head h2 { font-size: var(--text-xl); }
.ux-menu-head .ed-kicker { margin-block-end: var(--space-1); }
.site-header--atelier .mobile-drawer__nav { display: grid; gap: var(--space-2); }
.site-header--atelier .mobile-drawer__nav a { display: flex; align-items: center; gap: var(--space-3); min-block-size: 3.5rem; padding: var(--space-3); background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-border); border-radius: var(--radius-sm); text-decoration: none; font-size: var(--text-sm); font-weight: 700; }
.mobile-drawer__nav a > .icon:first-child { color: var(--color-accent); }
.mobile-drawer__nav a > .icon:last-child { margin-inline-start: auto; color: var(--color-muted); }
.mobile-drawer__nav small { display: block; color: var(--color-muted); font-size: var(--text-2xs); font-weight: 400; margin-block-start: var(--space-1); }
.site-header--atelier .mobile-drawer__nav a[aria-current] { background: var(--color-accent-soft); border-color: var(--color-accent-line); }
.ux-menu-account { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

/* Brand-led service marketplace home: intent, evidence, process, people. */
.at-wrap { inline-size: min(100%, var(--container)); padding-inline: var(--gutter); }
.atelier-home { background: var(--color-bg); }
.at-hero { grid-template-columns: 1.08fr 1fr; align-items: center; gap: var(--space-12); padding-block: var(--space-10); }
.at-hero h1 { font-size: clamp(2.2rem, 3.45vw, 3rem); font-weight: 800; line-height: 1.65; }
.at-hero h1 em { color: var(--color-accent); }
.at-hero h1 em::after { display: none; }
.at-hero__lead { max-inline-size: 36rem; font-size: var(--text-base); line-height: 2; color: var(--color-muted); margin-block: var(--space-6); }
.at-hero .at-actions { gap: var(--space-3); }
.at-hero .at-actions .btn { min-block-size: 3.5rem; font-size: var(--text-sm); }
.at-hero .jd-status { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-muted); font-size: var(--text-2xs); font-weight: 500; margin-block-end: var(--space-5); }
.jd-status .at-dot { inline-size: 0.35rem; block-size: 0.35rem; background: var(--color-ok); box-shadow: 0 0 0 4px var(--color-ok-bg); }
.jd-identity { display: flex; gap: var(--space-3); align-items: center; color: var(--color-muted); font-size: var(--text-xs); margin-block-end: var(--space-4); }
.jd-identity > span { color: var(--color-border-strong); }
.jd-hero-links { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-block-start: var(--space-6); }
.jd-hero-links a { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 2.75rem; color: var(--color-muted); text-decoration: none; font-size: var(--text-xs); }
.jd-hero-links a:hover { color: var(--color-accent); }
.at-network-count { font-size: var(--text-xs); color: var(--color-muted); margin-block-start: var(--space-2); }
.at-hero__art.jd-hero-art { position: relative; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.jd-hero-scene { position: relative; aspect-ratio: 1; border-radius: var(--radius-xl); background: var(--color-stage); overflow: hidden; }
.jd-hero-scene img { inline-size: 100%; block-size: 100%; object-fit: cover; }
[data-theme=dark] .jd-hero-scene { border-radius: 50%; }
.jd-hero-art::before { content: ''; position: absolute; inset: var(--space-3); border: 1px solid var(--color-border); border-radius: 50%; rotate: -20deg; scale: 1.05 0.88; opacity: 0.5; pointer-events: none; }
.jd-scene-note { position: relative; display: flex; align-items: center; gap: var(--space-3); inline-size: 86%; margin: calc(-1 * var(--space-12)) auto 0; padding: var(--space-4) var(--space-5); background: var(--color-glass); backdrop-filter: blur(12px); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-ink); box-shadow: var(--shadow-stage); text-decoration: none; }
.jd-scene-note strong { display: block; font-size: var(--text-sm); font-weight: 700; }
.jd-scene-note small { display: block; color: var(--color-muted); font-size: 0.65rem; margin-block-start: var(--space-1); }
.jd-scene-note > .icon { margin-inline-start: auto; color: var(--color-accent); }
.jd-scene-note__icon { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; flex-shrink: 0; border-radius: var(--radius-xs); background: var(--color-accent-soft); color: var(--color-accent); }
.jd-hero-art figcaption { color: var(--color-muted); text-align: center; font-size: 0.65rem; margin-block-start: var(--space-4); }
.at-material-rail { background: var(--color-surface); border-color: var(--color-border); }
.at-material-rail > div { min-block-size: 5.5rem; }
.at-section { padding-block: var(--space-12); }
.at-section-head h2, .at-faq h2 { font-size: clamp(1.6rem, 2.7vw, 2.12rem); font-weight: 750; line-height: 1.65; }
.at-section-head p { color: var(--color-muted); font-size: var(--text-sm); max-inline-size: 35rem; line-height: 1.9; margin-block-start: var(--space-3); }
.at-eyebrow, .ed-kicker { color: var(--color-accent); font-size: var(--text-xs); font-weight: 650; }
.at-section--gallery { border-radius: 0; background: var(--color-surface); border-block: 1px solid var(--color-border); }
.at-project, .at-maker { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-4); box-shadow: none; }
.at-project__image { aspect-ratio: 1.45; border-radius: var(--radius-sm); }
.at-project__info { padding-block: var(--space-4) var(--space-1); padding-inline: var(--space-1); align-items: flex-start; gap: var(--space-3); }
.at-project__info h3 a { text-decoration: none; color: var(--color-ink); }
.at-project__info h3 { font-size: var(--text-base); line-height: 1.8; }
.at-project__info p { color: var(--color-muted); }
.at-save { inline-size: 2.75rem; block-size: 2.75rem; }
.at-maker { padding: 0; overflow: hidden; }
.at-maker__body { padding: var(--space-5); }
.at-reviews blockquote { background: var(--color-surface); border-radius: var(--radius-md); }
.at-workshop { --atelier-bg: var(--color-charcoal); --atelier-ink: var(--color-inverse-ink); --atelier-muted: var(--color-inverse-muted); background: var(--color-charcoal); color: var(--color-inverse-ink); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; margin-block: var(--space-6) var(--space-10); }
.at-workshop .at-eyebrow { color: var(--color-inverse-muted); }
.at-final { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding-block: var(--space-10); margin-block: var(--space-8) var(--space-12); }
.at-final h2 { font-size: clamp(2rem, 3.2vw, 3rem); }
.at-final > p:not(.at-eyebrow) { color: var(--color-muted); margin-block: var(--space-5); }
.at-faq details { background: var(--color-surface); border-color: var(--color-border); padding-inline: var(--space-4); }
.at-faq summary { min-block-size: 3.5rem; }

/* Service discovery, comparison context and a guided request handoff. */
.page-service-directory .site-main { max-inline-size: none; padding: 0; }
.mp-directory { padding-block-end: var(--space-12); }
.mp-page-head { padding-block: var(--space-10) var(--space-7); }
.mp-page-head h1 { font-size: var(--text-display); line-height: 1.65; font-weight: 800; }
.mp-page-head em { color: var(--color-accent); font-style: normal; }
.mp-page-head > p:last-child { color: var(--color-muted); line-height: 2; max-inline-size: 45rem; margin-block-start: var(--space-5); }
.mp-service-search { display: flex; align-items: flex-end; gap: var(--space-4); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-stage); margin-block-end: var(--space-8); }
.mp-service-search .field { flex: 1; }
.mp-service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-5); }
.mp-service-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; min-inline-size: 0; display: flex; flex-direction: column; }
.mp-service-card__image { display: block; position: relative; aspect-ratio: 1.65; overflow: hidden; }
.mp-service-card__image img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.mp-service-card__body { padding: var(--space-5); display: grid; gap: var(--space-3); flex: 1; }
.mp-service-card h3 { font-size: var(--text-xl); line-height: 1.8; }
.mp-service-card h3 a { color: var(--color-ink); text-decoration: none; }
.mp-service-card__body > p:not(.ed-kicker) { font-size: var(--text-sm); line-height: 1.9; color: var(--color-muted); }
.mp-service-card dl { display: grid; gap: var(--space-2); padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border); font-size: var(--text-xs); }
.mp-service-card dt { color: var(--color-ink); font-weight: 650; }
.mp-service-card dd { color: var(--color-muted); margin: 0 0 var(--space-2); line-height: 1.9; }
.mp-service-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-start: auto; padding-block-start: var(--space-3); }
.mp-service-card__actions .at-text-link { min-block-size: 2.75rem; font-size: var(--text-xs); }
.mp-guidance-link { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-block-start: var(--space-6); font-size: var(--text-sm); color: var(--color-muted); background: var(--color-surface); }
.mp-guidance-link span, .mp-guidance-link a { display: inline-flex; align-items: center; gap: var(--space-2); }
.mp-guidance-link a { min-block-size: 2.75rem; color: var(--color-accent); text-decoration: none; }
.mp-guide { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-7); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); margin-block: var(--space-10); }
.mp-guide p:not(.ed-kicker) { color: var(--color-muted); max-inline-size: 38rem; margin-block-start: var(--space-3); }
.mp-guide h2 { font-size: var(--text-2xl); }
.mp-guide .btn { flex-shrink: 0; }
.mp-journey { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-5); list-style: none; padding: 0; margin: 0; }
.mp-journey li { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.mp-journey li > span { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; background: var(--color-accent-soft); color: var(--color-accent); border-radius: var(--radius-sm); font-weight: 750; margin-block-end: var(--space-4); }
.mp-journey h3 { font-size: var(--text-base); margin-block-end: var(--space-3); }
.mp-journey p { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.9; }
#service-results, #how-it-works { scroll-margin-block-start: calc(var(--header-h) + var(--space-4)); }

/* Gallery, saved references and an editorial reading experience. */
.ed-gallery-hero, .ed-magazine-head, .at-page-head, .vn-list__hero, .svc-hero { padding-block: var(--space-8); }
.ed-gallery-hero__copy h1, .ed-magazine-head h1, .at-page-head h1, .vn-list__hero h1, .svc-hero h1 { font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.65; color: var(--color-ink); font-weight: 800; }
.ed-gallery-hero { gap: var(--space-8); }
.ed-gallery-hero__visual, .ed-featured-article { border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: none; overflow: hidden; }
.ed-gallery-hero__caption { color: var(--color-inverse-ink); background: var(--color-charcoal); }
.ed-tabs a, .ed-category-rail a { color: var(--color-muted); min-block-size: 2.75rem; text-decoration: none; }
.ed-category-rail a[aria-current] { color: var(--color-accent); background: var(--color-accent-soft); border-color: var(--color-accent-line); }
.ed-tabs, .ed-category-rail, .vp-chips { scrollbar-width: none; }
.ed-tabs::-webkit-scrollbar, .ed-category-rail::-webkit-scrollbar, .vp-chips::-webkit-scrollbar { display: none; }
.ed-idea-card, .ed-article-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: none; overflow: hidden; }
.ed-idea-card__image { aspect-ratio: 1.45; }
.ed-idea-card__body, .ed-article-card__body { padding: var(--space-5); }
.ed-idea-card h2 a, .ed-article-card h2 a { color: var(--color-ink); text-decoration: none; }
.ed-article-card__image { border-radius: 0; }
.ed-specs, .ed-article-body, .ed-reading-aside nav { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-6); }
.ed-article-body { padding: var(--space-8); }
.ed-article-body p { color: var(--color-ink-soft); }
.ed-reading-aside a { color: var(--color-muted); }
.ed-callout { background: var(--color-surface); border-color: var(--color-border); }
.ed-editor-panel .field + .field { margin-block-start: var(--space-5); }
.ed-editor-panel .ed-field-grid .field { margin-block-start: 0; }
.ux-reading-progress { position: fixed; z-index: 55; inset-block-start: var(--header-h); inset-inline: 0; block-size: 3px; pointer-events: none; }
.ux-reading-progress span { display: block; block-size: 100%; background: var(--color-accent); transform-origin: 0% 50%; transform: scaleX(0); }
[dir=rtl] .ux-reading-progress span { transform-origin: 100% 50%; }
.ux-filter-panel { margin-block: var(--space-4) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-stage); overflow: hidden; }
.ux-filter-panel > summary { cursor: pointer; list-style: none; display: flex; gap: var(--space-3); align-items: center; min-block-size: 3.5rem; padding: var(--space-4) var(--space-5); font-size: var(--text-sm); font-weight: 700; }
.ux-filter-panel > summary::-webkit-details-marker { display: none; }
.ux-filter-panel > summary > .icon:last-child { margin-inline-start: auto; transition: rotate var(--dur-2); }
.ux-filter-panel[open] > summary > .icon:last-child { rotate: 180deg; }
.ux-filter-summary { font-weight: 400; font-size: var(--text-xs); color: var(--color-muted); margin-inline-start: auto; }
.ux-filter-panel .ed-filter, .ux-filter-panel .at-filter { border: 0; border-radius: 0; margin: 0; box-shadow: none; }
.ux-filter-panel .field { margin: 0; }
.ux-filter-panel[open] form { animation: ux-fade-in 200ms var(--ease-out); }

/* Specialists, service detail and city pages. */
.vn-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: none; }
.vn-card__media { aspect-ratio: 1.5; min-block-size: 0; border: 0; box-shadow: none; }
.vn-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.vn-card__body { padding: var(--space-5); }
.vn-card__top h2 { font-size: var(--text-xl); }
.vn-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.vn-card__actions .btn { flex: 1; }
.vn-hero { border-radius: 0 0 var(--radius-xl) var(--radius-xl); overflow: hidden; }
.vn-hero__content { padding-block: var(--space-8); }
.vn-hero__lead { line-height: 1.9; }
.chip--ok { color: var(--color-ok); background: var(--color-ok-bg); }
.svc-hero { gap: var(--space-8); align-items: center; }
.svc-hero__lead { color: var(--color-muted); font-size: var(--text-lg); line-height: 2; }
.svc-hero__visual { overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.svc-gallery__item { border-radius: var(--radius-md); }

/* Customer/vendor workspaces, quotes, requests and messages. */
.vp-workspace { background: var(--color-bg); }
.vp-shell { gap: var(--space-6); }
.vp-nav { --color-accent-text: var(--color-accent); background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: none; padding: var(--space-5); }
.vp-nav__mark, .vp-nav__badge { background: var(--color-action); color: var(--color-action-ink); }
.vp-nav__brand strong { color: var(--color-ink); }
.vp-nav__eyebrow, .vp-nav__ghost, .vp-nav__links a, .vp-nav__links a .icon { color: var(--color-muted); }
.vp-nav__links a { min-block-size: 3rem; border-inline-start: 0; }
.vp-nav__links a:hover { color: var(--color-ink); background: var(--color-surface-2); }
.vp-nav__links a[aria-current] { color: var(--color-accent); background: var(--color-accent-soft); }
.vp-nav__links a[aria-current] .icon { color: inherit; }
.vp-card, .vp-welcome, .vp-lead, .req-hero { box-shadow: var(--shadow-xs); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.req-hero, .req-hero p, .req-hero span, .req-hero strong { color: var(--color-ink); }
.req-hero .section__eyebrow { color: var(--color-accent); }
.req-hero__stat { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-4); }
.req-hero__stat span { color: var(--color-muted); }
.req-quote-detail, .page-request .section--narrow:has(>form) { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); }
.at-table-scroll { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-md); }
.at-compare-table th { background: var(--color-surface-2); }
.chat-inbox__row { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-block-end: var(--space-3); }
.chat-inbox__row.is-unread { border-inline-start: 3px solid var(--color-accent); }
.chat-inbox__avatar { background: var(--color-accent-soft); color: var(--color-accent); }
.chat-room__head, .chat-compose { background: var(--color-surface); }
.chat-room__messages { background: var(--color-bg); }
.chat-bubble { border-radius: var(--radius-md); }

/* Request wizard and account screens use the same design system. */
.wz-panel { padding: var(--space-7); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-xs); }
.wz-panel__head h1 { color: var(--color-ink); font-weight: 800; line-height: 1.6; }
.wizard-progress__bar { background: var(--color-accent); border-radius: var(--radius-pill); }
.wz-card { border-radius: var(--radius-md); }
.wz-card:has(input:checked) { background: var(--color-accent-soft); border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.ux-choice-check { display: none; color: var(--color-accent); }
.wz-card:has(input:checked) .ux-choice-check { display: inline-flex; }
.wz-card__body { min-inline-size: 0; }
.wz-summary > div { border-radius: var(--radius-sm); background: var(--color-surface-2); padding: var(--space-4); }
.pf-drop { border-radius: var(--radius-md); background: var(--color-surface-2); }
.pf-drop.has-files { border-color: var(--color-accent); background: var(--color-accent-soft); }
.page-auth .site-main { padding: var(--space-8) var(--gutter); max-inline-size: var(--container); }
.ux-auth-layout { inline-size: min(100%,68rem); display: grid; grid-template-columns: 1fr 1fr; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-stage); }
.ux-auth-story { position: relative; min-block-size: 35rem; overflow: hidden; background: var(--color-charcoal); color: var(--color-inverse-ink); }
.ux-auth-story > [data-clock-picture] { position: absolute; inset: 0; opacity: 0.55; }
.ux-auth-story img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ux-auth-story::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,transparent,var(--color-charcoal)); }
.ux-auth-story > div { position: relative; z-index: 1; padding: var(--space-8); block-size: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-5); }
.ux-auth-story h2 { color: var(--color-inverse-ink); font-size: var(--text-display); line-height: 1.5; }
.ux-auth-story em { font-style: normal; color: var(--color-inverse-ink); border-block-end: 3px solid var(--color-action); }
.ux-auth-story p, .ux-auth-story span { color: var(--color-inverse-muted); font-size: var(--text-xs); }
.ux-auth-layout .auth-card { inline-size: 100%; align-self: center; border: 0; box-shadow: none; padding: var(--space-8); border-radius: 0; }
.auth-card h1 { margin-block: var(--space-2); font-size: var(--text-2xl); line-height: 1.65; }
.auth-card .brand { color: var(--color-ink); font-weight: 800; }
.auth-card__aside { line-height: 1.9; }
.ux-auth-staff { display: inline-flex; min-block-size: 2.75rem; align-items: center; color: var(--color-muted); font-size: var(--text-xs); }
.site-footer { --color-accent-text: var(--color-accent); background: var(--color-surface); color: var(--color-muted); border-block-start: 1px solid var(--color-border); margin-block-start: auto; }
.site-footer__inner { padding-block: var(--space-10) var(--space-7); }
.site-footer .brand, .site-footer h2, .site-footer .brand:hover { color: var(--color-ink); }
.site-footer p, .site-footer a, .site-footer__bar { color: var(--color-muted); }
.site-footer a { display: inline-flex; align-items: center; min-block-size: 2.75rem; }
.site-footer a:hover { color: var(--color-accent); }
.site-footer__bar { border-color: var(--color-border); }
.error-page { min-block-size: 24rem; padding: var(--space-8); margin-block: var(--space-8); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.error-page__mark { background: var(--color-accent-soft); color: var(--color-accent); }
.error-page__code { color: var(--color-accent); font-size: var(--text-3xl); }
.page-error .site-main { min-block-size: 100svh; display: grid; place-items: center; }
@media (hover:hover) and (pointer:fine) {
  .at-project, .at-maker, .mp-service-card, .ed-idea-card, .ed-article-card, .vn-card { transition: translate var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2); }
  .at-project:hover, .at-maker:hover, .mp-service-card:hover, .ed-idea-card:hover, .ed-article-card:hover, .vn-card:hover { translate: 0 -4px; border-color: var(--color-accent-line); box-shadow: var(--shadow-stage); }
}
@keyframes ux-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ux-menu-in { from { opacity: 0; translate: 0 var(--space-4); scale: 0.98; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* Deliberate mobile compositions, rather than desktop cards squeezed down. */
@media (min-width:768px) { .ux-filter-panel > summary { display: none; } .mobile-cta.ux-bottom-nav { display: none !important; } body.has-mobile-chrome { padding-block-end: 0; } }
@media (max-width:1100px) {
  :root { --header-h: 4.5rem; }
  .site-header--atelier .nav--desktop { display: none !important; }
  .site-header--atelier .nav-toggle { display: grid; }
  .site-header--atelier .site-header__bar { grid-template-columns: auto 1fr auto; gap: var(--space-3); }
  .site-header--atelier .brand { justify-self: start; }
  .site-header--atelier .nav--end { justify-content: end; }
  .at-hero { gap: var(--space-6); }
  .at-hero h1 { font-size: 2rem; }
  .at-hero .at-actions { flex-wrap: wrap; }
  .jd-scene-note { inline-size: 92%; padding: var(--space-3); }
  .jd-scene-note__icon { display: none; }
  .mp-journey { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mp-guide { align-items: flex-start; flex-direction: column; }
}
@media (max-width:960px) {
  .vp-nav { padding: var(--space-4); }
  .vp-nav__brand { display: none; }
  .vp-nav__links { gap: var(--space-2); }
  .vp-nav__links a { font-size: var(--text-xs); padding: var(--space-2); }
  .mp-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px) {
  .site-header--atelier { padding-inline: var(--space-4); }
  .site-header--atelier .site-header__bar { padding: 0; }
  .atelier-brand { font-size: var(--text-sm); gap: var(--space-2); }
  .atelier-brand .brand__mark { inline-size: 2.4rem; block-size: 2.4rem; }
  .site-header--atelier .nav-toggle { order: 3; }
  .site-header--atelier .brand { order: 1; }
  .site-header--atelier .nav--end { order: 2; }
  .site-header--atelier .site-header__bar { grid-template-columns: 1fr auto auto; }
  .site-header--atelier .nav--end > .btn { display: none; }
  .site-main { padding-inline: var(--space-4); }
  .section { padding-inline: var(--space-4); padding-block: var(--space-6); }
  .field input:not([type=checkbox]):not([type=radio]), .field textarea, .field select { font-size: var(--text-base); min-block-size: 3.25rem; }
  .btn { min-block-size: 3rem; white-space: normal; }
  .at-wrap { padding-inline: var(--space-4); }
  .at-hero { grid-template-columns: 1fr; padding-block: var(--space-6) var(--space-8); gap: var(--space-6); }
  .at-hero h1 { font-size: clamp(1.9rem,7.6vw,2.6rem); line-height: 1.65; }
  .at-hero .jd-status { font-size: 0.65rem; margin-block-end: var(--space-4); }
  .jd-identity { font-size: 0.65rem; gap: var(--space-2); }
  .at-hero__lead { font-size: var(--text-sm); margin-block: var(--space-4) var(--space-5); }
  .at-hero .at-actions { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-2); }
  .at-hero .at-actions .btn { min-block-size: 3.1rem; padding-inline: var(--space-3); font-size: var(--text-xs); }
  .jd-hero-links { gap: var(--space-4); margin-block-start: var(--space-4); }
  .jd-hero-links a { font-size: 0.7rem; }
  .at-network-count { font-size: 0.65rem; }
  .jd-hero-scene { aspect-ratio: 1; border-radius: var(--radius-lg); }
  .jd-scene-note { margin-block-start: calc(-1 * var(--space-10)); }
  .jd-scene-note strong { font-size: var(--text-xs); }
  .jd-scene-note small, .jd-hero-art figcaption { font-size: 0.6rem; }
  .at-section { padding-block: var(--space-8); }
  .at-section-head h2, .at-faq h2 { font-size: var(--text-2xl); }
  .at-section-head { align-items: flex-start; }
  .at-project { padding: var(--space-3); }
  .at-project__info { padding-block: var(--space-3); }
  .at-final { margin-block: var(--space-5) var(--space-8); padding-block: var(--space-8); }
  .at-workshop { margin-block: var(--space-5) var(--space-8); }
  .mp-page-head { padding-block: var(--space-6); }
  .mp-page-head h1 { font-size: var(--text-2xl); }
  .mp-service-grid { grid-template-columns: minmax(0,1fr); }
  .mp-service-search { flex-wrap: wrap; padding: var(--space-5); gap: var(--space-3); }
  .mp-service-search .field { flex-basis: 100%; }
  .mp-service-search .btn { inline-size: 100%; }
  .mp-guide { padding: var(--space-5); margin-block: var(--space-8); }
  .mp-guide .btn { inline-size: 100%; }
  .mp-guidance-link { padding: var(--space-4); font-size: var(--text-xs); }
  .mp-journey { grid-template-columns: 1fr; gap: var(--space-3); }
  .mp-journey li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); padding: var(--space-4); }
  .mp-journey li > span { grid-row: 1 / 3; margin: 0; }
  .mp-journey h3 { margin: 0; }
  .mp-journey p { grid-column: 2; font-size: var(--text-xs); }
  .ed-gallery-hero, .ed-magazine-head, .at-page-head, .vn-list__hero, .svc-hero { padding-block: var(--space-5); }
  .ed-gallery-hero__copy h1, .ed-magazine-head h1, .at-page-head h1, .vn-list__hero h1, .svc-hero h1 { font-size: var(--text-2xl); }
  .ed-article-body, .ed-specs { padding: var(--space-5); }
  .ux-filter-panel .ed-filter .field:nth-of-type(4), .ux-filter-panel .at-filter .field:nth-of-type(4), .ux-filter-panel .ed-filter > .btn, .ux-filter-panel .at-filter > .btn { grid-column: 1 / -1; }
  .vn-card__body { padding: var(--space-4); }
  .vp-main, .vp-workspace { padding-inline: 0; }
  .vp-card, .vp-lead { padding: var(--space-5); }
  .vp-welcome h1, .vp-header h1 { font-size: var(--text-2xl); }
  .vp-kpi__stack { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .req-list__item { flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4); }
  .req-list__item > div { flex: 1 1 100%; }
  .req-hero { padding: var(--space-5); }
  .req-hero__stats { display: grid; grid-template-columns: 1fr 1fr; inline-size: 100%; gap: var(--space-3); }
  .req-hero__stat { min-inline-size: 0; padding: var(--space-3); }
  .req-hero__stat strong { font-size: var(--text-xl); overflow-wrap: anywhere; }
  .req-journey { grid-template-columns: repeat(4,minmax(0,1fr)); padding: var(--space-3); gap: var(--space-1); }
  .req-journey__step { min-inline-size: 0; font-size: var(--text-2xs); flex-direction: column; gap: var(--space-2); }
  .req-quote, .req-side__card, .req-quote-detail { padding: var(--space-5); }
  .wz-shell.section { padding: var(--space-5) var(--space-4); }
  .wz-panel { padding: var(--space-5); border-radius: var(--radius-md); }
  .wz-panel__head h1 { font-size: var(--text-2xl); }
  .wz-card { padding: var(--space-4); }
  .wz-card__title { font-size: var(--text-base); }
  .wz-actions { position: sticky; inset-block-end: 0; z-index: 5; border-block-start: 1px solid var(--color-border); background: var(--color-surface); padding-block: var(--space-4) max(var(--space-4),env(safe-area-inset-bottom)); margin-block-start: var(--space-5); gap: var(--space-3); }
  .wz-actions .btn { flex: 1; min-inline-size: 0; font-size: var(--text-sm); }
  .wz-summary { grid-template-columns: 1fr; }
  .page-auth .site-main { padding: var(--space-6) var(--space-4); }
  .ux-auth-layout { grid-template-columns: 1fr; background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .ux-auth-story { display: none; }
  .ux-auth-layout .auth-card { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-stage); }
  .chat-inbox__row { padding: var(--space-4); }
  .chat-inbox__top { flex-wrap: wrap; gap: var(--space-2); }
  .chat-inbox__body { min-inline-size: 0; }
  .chat-compose { padding: var(--space-3); gap: var(--space-2); }
  .site-footer__inner { grid-template-columns: 1fr 1fr; padding: var(--space-8) var(--space-4) var(--space-5); gap: var(--space-5); }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer a { font-size: var(--text-xs); }
  .site-footer__bar { padding: var(--space-5); }
  .error-page { padding: var(--space-6); inline-size: 100%; margin-block: var(--space-5); }
  body.has-mobile-chrome { padding-block-end: calc(var(--mobile-nav-h) + var(--space-6) + env(safe-area-inset-bottom)); }
  .mobile-cta.ux-bottom-nav { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr; align-items: center; gap: var(--space-1); position: fixed; z-index: 40; inset-inline: var(--space-3); inset-block-end: max(var(--space-3),env(safe-area-inset-bottom)); block-size: var(--mobile-nav-h); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-glass); backdrop-filter: blur(16px); box-shadow: var(--shadow-stage); }
  .ux-bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-block-size: 3.25rem; min-inline-size: 2.75rem; padding: var(--space-1); color: var(--color-muted); border-radius: var(--radius-sm); font-size: 0.65rem; font-weight: 500; text-decoration: none; }
  .ux-bottom-nav a[aria-current] { color: var(--color-accent); background: var(--color-accent-soft); }
  .ux-bottom-nav .ux-bottom-create { background: var(--color-action); color: var(--color-action-ink); font-weight: 700; }
  .ux-bottom-nav .icon { inline-size: 1.3rem; block-size: 1.3rem; }
  .page-wizard .ux-bottom-nav, .page-auth .ux-bottom-nav, .page-vendor-panel .ux-bottom-nav, .page-chat-thread .ux-bottom-nav, .page-content-editor .ux-bottom-nav, .page-content-manage .ux-bottom-nav, body:has(input:focus,textarea:focus,select:focus) .ux-bottom-nav { display: none; }
  .page-wizard.has-mobile-chrome, .page-auth.has-mobile-chrome, .page-vendor-panel.has-mobile-chrome, .page-chat-thread.has-mobile-chrome, .page-content-editor.has-mobile-chrome, .page-content-manage.has-mobile-chrome { padding-block-end: 0; }
}
@media (max-width:480px) { .ed-idea-grid, .ed-article-grid, .at-project-grid, .at-makers { grid-template-columns: minmax(0,1fr); } .ed-idea-card h2 { font-size: var(--text-lg); } }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .btn:active { scale: 1; }
  .at-project:hover, .at-maker:hover, .mp-service-card:hover, .ed-idea-card:hover, .ed-article-card:hover, .vn-card:hover { translate: 0 0; }
}
.mp-vendor-filter { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr auto; align-items: end; gap: var(--space-3); padding: var(--space-5); }
.mp-vendor-filter .field { margin: 0; }
#vendor-results { scroll-margin-block-start: calc(var(--header-h) + var(--space-4)); }
@media (max-width:1100px) { .mp-vendor-filter { grid-template-columns: repeat(2,minmax(0,1fr)); } .mp-vendor-filter > .btn { grid-column: 1 / -1; } }
@media (max-width:767px) { .mp-vendor-filter { grid-template-columns: 1fr; } }