/* خانه تابلو سازان — Sepehrad-inspired commercial light UI */

body {
  background: var(--color-bg);
}

.page-home .site-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.page-vendor .site-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* --- Header (dark rounded bar) ---------------------------------------- */

.site-header--sepeh {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  padding: var(--space-3) var(--gutter) 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
}

.site-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  width: min(100%, var(--container));
  margin-inline: auto;
  min-height: 4.25rem;
  padding-inline: var(--space-4);
  background: var(--color-charcoal);
  color: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.site-header--sepeh .nav__link {
  color: rgb(255 255 255 / 0.88);
}

.site-header--sepeh .nav__link:hover {
  color: #fff;
  background: rgb(255 255 255 / 0.08);
}

.nav--start {
  justify-content: flex-start;
}

.nav--end {
  justify-content: flex-end;
}

.brand--badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin-block-end: calc(var(--space-5) * -1);
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--color-charcoal);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  z-index: 1;
}

.brand--badge .brand__mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.brand--badge .brand__text {
  font-size: var(--text-sm);
  font-weight: 800;
  white-space: nowrap;
}

.btn--accent-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
  border: 0;
}

.btn--accent-phone:hover {
  background: var(--color-accent-hover);
  color: var(--color-accent-ink);
}

.header-ghost {
  color: #fff !important;
}

.nav-toggle {
  display: none;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  cursor: pointer;
}

.nav-toggle .icon {
  width: 1.35rem;
  height: 1.35rem;
}

.nav-toggle__close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

.nav--end {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav--end-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.mobile-drawer {
  display: none;
}

.mobile-cta {
  display: none;
}

.btn--ghost-outline {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-ink);
}

.btn--ghost-outline:hover {
  background: var(--color-surface);
  border-color: var(--color-ink);
}

.btn--ghost-light {
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.35);
  color: #fff;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: var(--radius-pill);
  box-shadow: none;
}

.btn--primary:hover {
  background: var(--color-accent-hover);
  transform: none;
}

.btn--lg {
  padding: 0.85rem 1.5rem;
  font-weight: 700;
}

/* --- Hero -------------------------------------------------------------- */

.sp-hero {
  width: min(100%, var(--container));
  margin: var(--space-8) auto var(--space-6);
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: var(--space-8);
  align-items: center;
}

.sp-hero__copy h1 {
  margin: 0 0 var(--space-3);
  color: var(--color-accent-text);
  font-size: var(--text-display);
  font-weight: 800;
  line-height: var(--leading-tight);
}

.sp-hero__tag {
  margin: 0 0 var(--space-6);
  color: var(--color-ink);
  font-size: var(--text-xl);
  font-weight: 600;
  max-width: 28rem;
  line-height: var(--leading-snug);
}

.sp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.sp-hero__visual {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-surface);
}

.sp-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

/* --- VIP rail ---------------------------------------------------------- */

.sp-vip {
  width: min(100%, var(--container));
  margin: 0 auto var(--space-8);
  padding-inline: var(--gutter);
  text-align: center;
}

.sp-vip__title {
  margin: 0 0 var(--space-4);
  color: var(--color-ink);
  font-size: var(--text-lg);
  font-weight: 700;
}

.sp-vip__rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-charcoal);
}

.sp-vip__item {
  color: #fff;
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  opacity: 0.9;
}

.sp-vip__item:hover {
  opacity: 1;
  color: var(--color-accent-line);
}

/* --- Duo dark cards ---------------------------------------------------- */

.sp-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  max-width: var(--container);
  margin-inline: auto;
}

.sp-card-dark {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-charcoal);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.sp-card-dark h1,
.sp-card-dark h2,
.sp-card-dark h3,
.sp-card-dark h4 {
  margin: 0;
  color: #fff;
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: var(--leading-snug);
}

.sp-card-dark > p {
  margin: 0;
  color: rgb(255 255 255 / 0.82);
  line-height: var(--leading-normal);
}

.sp-card-dark__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sp-card-dark__media img {
  display: block;
  width: 100%;
  height: 18rem;
  object-fit: cover;
}

.sp-card-dark__media--stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.sp-card-dark__media--stack img {
  height: 11rem;
  border-radius: var(--radius-md);
}

/* --- Sections ---------------------------------------------------------- */

.section {
  padding-block: var(--space-10);
  padding-inline: var(--gutter);
  max-width: var(--container);
  margin-inline: auto;
}

.section--muted {
  background: var(--color-bg-subtle);
  max-width: none;
}

.section--muted > .section__head,
.section--muted > .sp-vendors,
.section--muted > .sp-faq,
.section--muted > .sp-reviews,
.section--muted > .svc-gallery,
.section--muted > .svc-vendors {
  max-width: var(--container);
  margin-inline: auto;
}

.section__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-accent-text);
  font-weight: 800;
  font-size: var(--text-sm);
}

.section__head {
  margin-block-end: var(--space-6);
}

.section__head h2 {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-3xl);
  font-weight: 800;
}

.section__head p {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
}

.section__head--center {
  text-align: center;
  align-items: center;
  margin-inline: auto;
}

.section__head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
}

/* --- Services / projects / vendors ------------------------------------- */

.sp-services {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.sp-service {
  display: grid;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.sp-service:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.sp-service img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.sp-service strong {
  padding: 0 var(--space-3) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 800;
}

.sp-projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.sp-project {
  display: grid;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
}

.sp-project img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.sp-project__body {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  align-content: start;
}

.sp-project__body h3 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: var(--leading-snug);
}

.sp-project__body .btn {
  justify-self: start;
}

.sp-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.sp-features article {
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
}

.sp-features h3 {
  margin: 0 0 var(--space-2);
  color: var(--color-accent-text);
  font-size: var(--text-lg);
}

.sp-features p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.sp-vendors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.sp-vendor {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-2) var(--ease-out);
}

.sp-vendor:hover {
  box-shadow: var(--shadow-md);
}

.sp-vendor img {
  width: 100%;
  height: 100%;
  min-block-size: 5.5rem;
  aspect-ratio: 1;
  object-fit: cover;
}

.sp-vendor > div {
  display: grid;
  align-content: center;
  gap: var(--space-1);
  padding: var(--space-3);
}

.sp-vendor h3 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 800;
  line-height: var(--leading-snug);
}

.sp-vendor p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

/* --- Consult / reviews / FAQ / final ----------------------------------- */

.sp-consult {
  max-width: none;
  padding-block: var(--space-6);
}

.sp-consult__inner {
  width: min(100%, var(--container));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-charcoal);
  color: #fff;
}

.sp-consult h2 {
  margin: 0 0 var(--space-2);
  color: #fff;
  font-size: var(--text-2xl);
}

.sp-consult p {
  margin: 0;
  color: rgb(255 255 255 / 0.82);
  max-width: 36rem;
}

.sp-reviews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.sp-review {
  margin: 0;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--color-border);
}

.sp-review p {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.sp-review footer {
  color: var(--color-muted);
  font-weight: 700;
  font-size: var(--text-sm);
}

.sp-faq {
  max-width: 46rem;
  margin-inline: auto;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-2) var(--space-5);
  box-shadow: var(--shadow-xs);
}

.sp-faq details {
  border-block-end: 1px solid var(--color-border);
  padding-block: var(--space-4);
}

.sp-faq details:last-child {
  border-block-end: 0;
}

.sp-faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.sp-faq summary::-webkit-details-marker {
  display: none;
}

.sp-faq summary span:last-child {
  color: var(--color-accent-text);
  font-size: var(--text-xl);
  font-weight: 400;
}

.sp-faq details[open] summary span:last-child {
  transform: rotate(45deg);
}

.sp-faq p {
  margin: var(--space-3) 0 0;
  color: var(--color-muted);
  line-height: var(--leading-normal);
}

.sp-final {
  width: min(100%, var(--container));
  margin: 0 auto var(--space-12);
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  align-items: center;
}

.sp-final__copy h2 {
  margin: 0 0 var(--space-3);
  color: var(--color-ink);
  font-size: var(--text-3xl);
  font-weight: 800;
}

.sp-final__copy p {
  margin: 0 0 var(--space-5);
  color: var(--color-muted);
  font-size: var(--text-lg);
}

.sp-final > img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- Footer ------------------------------------------------------------ */

.site-footer {
  background: var(--color-charcoal);
  color: rgb(255 255 255 / 0.82);
  border: 0;
  margin: 0;
}

.site-footer .brand,
.site-footer a {
  color: #fff;
}

.site-footer h2 {
  color: var(--color-accent-line);
  font-size: var(--text-sm);
}

.site-footer__bar {
  border-block-start: 1px solid rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.55);
}

/* --- Vendor page leftovers --------------------------------------------- */

.vendor-hero {
  position: relative;
  isolation: isolate;
  min-height: 26rem;
  display: grid;
  align-items: end;
  color: #fff;
  overflow: hidden;
  margin: var(--space-4) var(--gutter);
  border-radius: var(--radius-xl);
}

.vendor-hero h1,
.vendor-hero h2,
.vendor-hero h3,
.vendor-hero .eyebrow,
.vendor-hero p {
  color: #fff;
}

.vendor-hero .eyebrow {
  opacity: 0.9;
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-sm);
  font-weight: 700;
}

.vendor-hero__media,
.vendor-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.vendor-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vendor-hero__shade {
  background: linear-gradient(180deg, transparent, rgb(20 20 22 / 0.85));
}

.vendor-hero__content {
  padding: var(--space-8);
}

.vendor-hero h1 {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--text-3xl);
  font-weight: 800;
}

.detail-grid-pro {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: var(--space-7);
}

.vendor-side {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip,
.chip--sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--text-sm);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 5 / 4;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__meta {
  position: absolute;
  inset-inline: var(--space-3);
  inset-block-end: var(--space-3);
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.5);
}

.review-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.review-pro {
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-muted);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
}

.portfolio-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.wizard-progress__bar {
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.stack-form {
  display: grid;
  gap: var(--space-4);
}

.stack-list {
  display: grid;
  gap: var(--space-3);
}

.list-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-xs);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--space-3);
}

.kpi {
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  text-align: center;
}

.kpi strong {
  display: block;
  color: var(--color-accent-text);
  font-size: var(--text-2xl);
}

.form-actions {
  display: flex;
  gap: var(--space-3);
}

.callout {
  padding: var(--space-4);
  background: var(--color-accent-soft);
  border-radius: var(--radius-lg);
  color: var(--color-ink);
}

.callout a {
  color: var(--color-accent-text);
  font-weight: 700;
}

/* --- Inner pages (wizard, SEO, dashboards, auth) ----------------------- */

.site-main {
  color: var(--color-ink);
}

.section--narrow {
  max-width: var(--container-narrow);
}

.section__head h1 {
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-3xl);
  font-weight: 800;
}

.section > h1,
.section > h2 {
  color: var(--color-ink);
  margin-block-end: var(--space-4);
}

.muted,
.text-muted {
  color: var(--color-muted);
}

.muted a,
.text-muted a {
  color: var(--color-accent-text);
  font-weight: 600;
}

.page-hero,
.hero {
  width: min(100%, var(--container));
  margin: var(--space-6) auto 0;
  padding: var(--space-8) var(--gutter) var(--space-6);
  color: var(--color-ink);
}

.page-hero::before,
.hero::before {
  opacity: 0.55;
}

.page-hero h1,
.hero h1 {
  color: var(--color-accent-text);
  font-weight: 800;
  max-width: 22ch;
}

.page-hero p,
.hero p,
.hero__content > p {
  margin: var(--space-3) 0 var(--space-5);
  color: var(--color-ink-soft);
  font-size: var(--text-lg);
  max-width: 40rem;
  line-height: var(--leading-normal);
}

.card-grid,
.chip-grid {
  display: grid;
  gap: var(--space-4);
}

.card-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.chip-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
}

.vendor-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}

.vendor-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--color-ink);
}

.vendor-card h3 {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-lg);
  font-weight: 800;
}

.vendor-card p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.success-panel {
  text-align: center;
  padding-block: var(--space-12);
}

.success-panel h1 {
  color: var(--color-accent-text);
  font-weight: 800;
}

.success-panel p {
  margin: var(--space-3) auto var(--space-5);
  color: var(--color-ink-soft);
  max-width: 36rem;
}

.success-panel .hero__actions {
  justify-content: center;
}

.wizard-progress {
  margin-block-end: var(--space-5);
}

.wizard-progress p {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.wizard-progress__track {
  height: 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  overflow: hidden;
}

.kpi span {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.list-row strong {
  color: var(--color-ink);
}

.list-row span {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.list-row:hover {
  box-shadow: var(--shadow-sm);
}

.detail-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
}

.detail-grid {
  display: grid;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  color: var(--color-ink);
}

.detail-grid p,
.detail-grid strong {
  color: inherit;
}

.detail-grid strong {
  color: var(--color-ink);
}

.detail-list dt {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

.detail-list dd {
  margin: 0 0 var(--space-3);
  color: var(--color-ink);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
}

.page-auth .site-main {
  display: grid;
  place-items: center;
  padding-block: var(--space-8);
}

.auth-card {
  width: min(100%, 28rem);
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: var(--color-ink);
}

.auth-card h1 {
  color: var(--color-ink);
  font-weight: 800;
}

.auth-card p,
.auth-card__aside {
  color: var(--color-muted);
}

.site-footer .brand {
  color: #fff;
}

.site-footer .brand:hover {
  color: #fff;
}

.site-footer p {
  color: rgb(255 255 255 / 0.72);
}

.prose {
  color: var(--color-ink-soft);
  line-height: var(--leading-relaxed);
  max-width: var(--measure);
}

.prose p {
  margin-block-end: var(--space-4);
}

.header-ghost.btn--ghost:hover {
  background: rgb(255 255 255 / 0.1);
  color: #fff !important;
}

/* --- Portfolio detail -------------------------------------------------- */

.page-portfolio .site-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.pf-detail {
  color: var(--color-ink);
}

.pf-wrap {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.pf-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-5) var(--space-4);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.pf-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.pf-breadcrumb a:hover {
  color: var(--color-accent-text);
  text-decoration: underline;
}

.pf-breadcrumb [aria-current] {
  color: var(--color-ink);
}

/* Product-style top: gallery, summary, vendor box. */
.pf-product {
  display: grid;
  grid-template-columns: minmax(20rem, 1.1fr) minmax(0, 1fr) minmax(16rem, 18rem);
  gap: var(--space-6);
  align-items: start;
}

/* --- Gallery: main stage + thumbnail row ------------------------------- */
.pf-gallery {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.pf-gallery__stage {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
}

.pf-gallery__track {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.pf-gallery__track::-webkit-scrollbar {
  display: none;
}

.pf-gallery__slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.pf-tile {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  background: var(--color-charcoal);
  color: var(--color-accent-ink);
  cursor: zoom-in;
  text-decoration: none;
}

.pf-tile--video {
  cursor: pointer;
}

.pf-tile img,
.pf-tile video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pf-tile:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: -3px;
}

.pf-tile__placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  height: 100%;
  background:
    radial-gradient(circle at 30% 20%, var(--color-charcoal-soft), var(--color-charcoal));
  font-size: var(--text-sm);
  font-weight: 700;
}

.pf-tile__play {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin: -2rem 0 0 -2rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-charcoal) 72%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-ink) 70%, transparent);
  backdrop-filter: blur(4px);
}

.pf-tile__play .icon,
.pf-thumb__play .icon,
.pf-lightbox__thumb-play .icon {
  fill: currentcolor;
  margin-inline-start: 0.15em;
}

.pf-gallery__zoom {
  position: absolute;
  inset-block-end: var(--space-3);
  inset-inline-end: var(--space-3);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.pf-gallery__zoom:hover {
  color: var(--color-accent-text);
}

.pf-gallery__zoom:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--shadow-md);
}

.pf-gallery__zoom[hidden] {
  display: none;
}

.pf-gallery__dots {
  display: none;
}

.pf-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 4.5rem));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-muted);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}

.pf-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-thumb:hover {
  border-color: var(--color-border-strong);
}

.pf-thumb[aria-current],
.pf-thumb.is-current {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.pf-thumb:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.pf-thumb__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-charcoal) 40%, transparent);
  color: var(--color-accent-ink);
}

.pf-thumb--more img {
  filter: blur(3px);
  transform: scale(1.1);
}

.pf-thumb__more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-surface) 62%, transparent);
  color: var(--color-ink);
  font-size: var(--text-lg);
  font-weight: 800;
}

/* --- Summary column --------------------------------------------------- */
.pf-summary {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.pf-summary__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

.pf-summary__kicker a {
  color: var(--color-accent-text);
  text-decoration: none;
}

.pf-summary__kicker a:hover {
  text-decoration: underline;
}

.pf-summary h1 {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: var(--leading-snug);
}

.pf-summary__count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.pf-summary__title {
  margin: var(--space-2) 0 0;
  color: var(--color-ink);
  font-size: var(--text-base);
  font-weight: 800;
}

.pf-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
}

.pf-specs > div {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.pf-specs dt {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.pf-specs dd {
  margin: 0;
  overflow: hidden;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-specs dd a {
  color: inherit;
}

.pf-summary__lead {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.pf-summary__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  justify-self: start;
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}

.pf-summary__more:hover {
  text-decoration: underline;
}

/* --- Vendor box ------------------------------------------------------- */
.pf-buybox {
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--space-4));
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}

.pf-buybox__eyebrow {
  margin: 0;
  color: var(--color-accent-text);
  font-size: var(--text-xs);
  font-weight: 800;
}

.pf-buybox h2 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 800;
}

.pf-buybox h2 a {
  color: var(--color-ink);
  text-decoration: none;
}

.pf-buybox h2 a:hover {
  color: var(--color-accent-text);
}

.pf-buybox__facts {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-buybox__facts li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-block-start: 1px solid var(--color-border);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.pf-buybox__facts .icon {
  flex: none;
  color: var(--color-muted);
}

.pf-buybox__facts strong {
  color: var(--color-ink);
}

.pf-buybox__actions {
  display: grid;
  gap: var(--space-2);
}

.pf-buybox .btn--block {
  width: 100%;
}

.pf-about {
  padding-block: var(--space-8) var(--space-6);
}

.pf-about h2 {
  margin: 0 0 var(--space-3);
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--color-border);
  color: var(--color-ink);
  font-size: var(--text-lg);
  font-weight: 800;
}

.pf-about .prose {
  max-width: var(--measure);
}

.chip--quiet {
  background: var(--color-bg-subtle);
  color: var(--color-muted);
  font-weight: 600;
}

/* --- Lightbox (native <dialog>: focus trap and inert page for free) ---- */
body.lightbox-open {
  overflow: hidden;
}

.pf-lightbox {
  width: min(100% - 2 * var(--gutter), 76rem);
  max-width: none;
  height: min(100dvh - 4rem, 46rem);
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-lg);
}

.pf-lightbox::backdrop {
  background: color-mix(in srgb, var(--color-charcoal) 72%, transparent);
}

.pf-lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  animation: pf-lightbox-in var(--dur-2) var(--ease-out);
}

@keyframes pf-lightbox-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
}

.pf-lightbox__bar {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  padding-inline: var(--space-5) var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

.pf-lightbox__label {
  align-self: center;
  margin: 0;
  font-weight: 800;
}

.pf-lightbox__filters {
  display: flex;
  gap: var(--space-4);
}

.pf-lightbox__filters button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-1);
  border: 0;
  border-block-end: 2px solid transparent;
  background: none;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}

.pf-lightbox__filters button span {
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-bg-subtle);
  font-size: var(--text-xs);
}

.pf-lightbox__filters button[aria-pressed="true"] {
  border-block-end-color: var(--color-accent-text);
  color: var(--color-ink);
}

.pf-lightbox__filters button:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring);
}

.pf-lightbox__close {
  align-self: center;
  margin-inline-start: auto;
}

.pf-lightbox__btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}

.pf-lightbox__btn:hover {
  background: var(--color-bg-subtle);
}

.pf-lightbox__btn:focus-visible,
.pf-lightbox__thumbs button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.pf-lightbox__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  min-height: 0;
}

.pf-lightbox__stage {
  position: relative;
  min-height: 0;
  padding: var(--space-5) var(--space-10) var(--space-8);
  touch-action: pan-y;
}

.pf-lightbox__slides {
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-lightbox__slide {
  height: 100%;
}

.pf-lightbox__slide[hidden] {
  display: none;
}

.pf-lightbox__slide figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: var(--space-2);
  height: 100%;
  margin: 0;
}

.pf-lightbox__slide img,
.pf-lightbox__slide video {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-sm);
  object-fit: contain;
  animation: pf-lightbox-in var(--dur-2) var(--ease-out);
}

.pf-lightbox__slide video {
  width: 100%;
  background: black;
}

.pf-lightbox__embed {
  width: min(100%, calc((100dvh - 16rem) * 16 / 9));
  aspect-ratio: 16 / 9;
}

.pf-lightbox__embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: black;
}

.pf-lightbox__slide figcaption {
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.pf-lightbox__nav {
  position: absolute;
  inset-block-start: 50%;
  z-index: 1;
  margin-block-start: -1.375rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.pf-lightbox__nav--prev {
  inset-inline-start: var(--space-3);
}

.pf-lightbox__nav--next {
  inset-inline-end: var(--space-3);
}

.pf-lightbox.is-single .pf-lightbox__nav {
  display: none;
}

.pf-lightbox__counter {
  position: absolute;
  inset-block-end: var(--space-3);
  inset-inline: 0;
  width: max-content;
  margin: 0 auto;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-bg-subtle);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.pf-lightbox__aside {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-4);
  min-height: 0;
  padding: var(--space-5);
  border-inline-start: 1px solid var(--color-border);
}

.pf-lightbox__title {
  margin: 0;
  font-weight: 800;
  line-height: var(--leading-snug);
}

.pf-lightbox__thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: var(--space-2);
  margin: 0;
  padding: 2px;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}

.pf-lightbox__thumbs li[hidden] {
  display: none;
}

.pf-lightbox__thumbs button {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-muted);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out);
}

.pf-lightbox__thumbs button:hover {
  border-color: var(--color-border-strong);
}

.pf-lightbox__thumbs button[aria-current] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.pf-lightbox__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-lightbox__thumb-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-charcoal) 40%, transparent);
  color: var(--color-accent-ink);
}

.pf-related .pf-related__media {
  position: relative;
  display: block;
  padding: 0;
}

.svc-gallery__item.pf-related .pf-count {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-charcoal) 78%, transparent);
  color: var(--color-accent-ink);
  font-size: var(--text-xs);
}

.pf-count .icon:last-child:not(:first-child) {
  fill: currentcolor;
}

@media (max-width: 1100px) {
  .pf-product {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .pf-buybox {
    position: static;
    grid-column: 2;
  }
}

@media (max-width: 720px) {
  .pf-breadcrumb {
    padding-block: var(--space-3);
  }

  .pf-product {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    width: 100%;
  }

  .pf-summary,
  .pf-buybox {
    margin-inline: var(--gutter);
  }

  .pf-buybox {
    grid-column: auto;
  }

  /* Mobile: full-bleed swipe carousel with dots instead of thumbnails. */
  .pf-gallery__stage {
    aspect-ratio: 1;
    border: 0;
    border-radius: 0;
  }

  .pf-gallery__thumbs {
    display: none;
  }

  .pf-gallery__dots {
    position: absolute;
    inset-block-end: var(--space-3);
    inset-inline: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 auto;
    padding: 0 var(--space-8);
    list-style: none;
    pointer-events: none;
  }

  .pf-gallery__dots li {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-accent-ink) 60%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-charcoal) 25%, transparent);
    transition: width var(--dur-2) var(--ease-out);
  }

  .pf-gallery__dots li.is-active {
    width: 18px;
    background: var(--color-accent-ink);
  }

  .pf-gallery__zoom {
    inset-block-end: auto;
    inset-block-start: var(--space-3);
  }

  .pf-lightbox {
    width: 100vw;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .pf-lightbox__bar {
    padding-inline: var(--space-3) var(--space-1);
  }

  .pf-lightbox__filters {
    gap: var(--space-3);
    overflow-x: auto;
  }

  .pf-lightbox__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .pf-lightbox__stage {
    padding: var(--space-3) var(--space-2) var(--space-8);
  }

  .pf-lightbox__nav {
    background: color-mix(in srgb, var(--color-surface) 85%, transparent);
  }

  .pf-lightbox__nav--prev {
    inset-inline-start: var(--space-2);
  }

  .pf-lightbox__nav--next {
    inset-inline-end: var(--space-2);
  }

  .pf-lightbox__aside {
    display: block;
    padding: var(--space-3) var(--space-3) max(var(--space-3), env(safe-area-inset-bottom));
    border-inline-start: 0;
    border-block-start: 1px solid var(--color-border);
  }

  .pf-lightbox__title {
    display: none;
  }

  .pf-lightbox__thumbs {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .pf-lightbox__thumbs li {
    flex: 0 0 3.75rem;
  }

  .pf-lightbox__embed {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-lightbox[open],
  .pf-lightbox__slide img,
  .pf-lightbox__slide video,
  .pf-gallery__dots li,
  .pf-thumb {
    animation: none;
    transition: none;
  }
}

.sp-project__body .muted {
  margin: 0;
  font-size: var(--text-sm);
}

/* --- Request wizard ---------------------------------------------------- */

.page-wizard .site-main {
  color: var(--color-ink);
}

.wz-shell {
  max-width: var(--container);
  width: 100%;
}

.wz-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 0.85fr) minmax(0, 1.35fr);
  gap: var(--space-5);
  align-items: start;
}

.wz-aside {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-charcoal);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.wz-aside .section__eyebrow {
  color: var(--color-accent-line);
  margin: 0 0 var(--space-2);
}

.wz-aside__title,
.wz-aside__lead,
.wz-aside h2 {
  color: #fff;
}

.wz-aside__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-2xl);
  font-weight: 800;
}

.wz-aside__lead {
  margin: 0 0 var(--space-5);
  color: rgb(255 255 255 / 0.78);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.wz-steps {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.wz-steps__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: rgb(255 255 255 / 0.55);
  font-size: var(--text-sm);
  font-weight: 600;
}

.wz-steps__item.is-done {
  color: rgb(255 255 255 / 0.88);
}

.wz-steps__item.is-current {
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}

.wz-steps__num {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.12);
  font-size: var(--text-xs);
  font-weight: 800;
}

.wz-steps__item.is-current .wz-steps__num {
  background: var(--color-accent);
  color: #fff;
}

.wz-steps__item.is-done .wz-steps__num {
  background: var(--color-ok);
  color: #fff;
}

.wz-perks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  color: rgb(255 255 255 / 0.72);
  font-size: var(--text-sm);
}

.wz-perks li::before {
  content: "✓ ";
  color: var(--color-accent-line);
  font-weight: 800;
}

.wz-panel {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.wz-panel__head {
  margin-block-end: var(--space-5);
}

.wz-panel__head h1 {
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-2xl);
  font-weight: 800;
}

.wz-panel__hint {
  margin: 0;
  color: var(--color-muted);
  line-height: var(--leading-normal);
}

.wz-reassure {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-subtle));
  border: 1px solid color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.wz-cards {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--space-3);
}

.wz-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  transition:
    border-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out);
}

.wz-card:has(input:checked) {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface));
}

.wz-card:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.wz-card--soft {
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
}

.wz-card input {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--color-accent-text);
}

.wz-card__body {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.wz-card__title {
  color: var(--color-ink);
  font-weight: 800;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

.wz-card__hint {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.wz-cards--size {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 40rem) {
  .wz-cards--size {
    grid-template-columns: 1fr;
  }
}

.wz-panel--choices .field ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.wz-panel--choices .field li {
  margin: 0;
}

.wz-panel--choices .field label {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
}

.wz-panel--choices .field label:has(input:checked) {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.req-brief__badge {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg-subtle));
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-normal);
}

.wz-actions {
  margin-block-start: var(--space-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.wz-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
}

.wz-summary > div {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
}

.wz-summary__wide {
  grid-column: 1 / -1;
}

.wz-summary dt {
  margin: 0 0 var(--space-1);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.wz-summary dd {
  margin: 0;
  color: var(--color-ink);
  font-weight: 700;
  line-height: var(--leading-snug);
}

.wz-success {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
  padding: var(--space-10) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.wz-success__badge {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-ok-bg);
  color: var(--color-ok);
  font-size: var(--text-2xl);
  font-weight: 800;
}

.wz-success h1 {
  color: var(--color-accent-text);
  font-weight: 800;
}

.wz-success__lead {
  margin: var(--space-3) auto var(--space-5);
  color: var(--color-ink-soft);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.wz-success__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-block-end: var(--space-5);
}

.wz-success__meta span {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: 700;
}

.wz-success__next {
  margin: 0 auto var(--space-6);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  text-align: start;
  max-width: 24rem;
  color: var(--color-ink-soft);
  font-weight: 600;
}

.wz-success__next li {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.wz-success .hero__actions {
  justify-content: center;
}

/* --- Request detail / dashboard ---------------------------------------- */

.req-hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-5);
  align-items: end;
  margin-block-end: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-charcoal);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.req-hero h1,
.req-hero p,
.req-hero .section__eyebrow,
.req-hero strong,
.req-hero span {
  color: #fff;
}

.req-hero .section__eyebrow {
  color: var(--color-accent-line);
  margin: 0 0 var(--space-2);
}

.req-hero h1 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-3xl);
  font-weight: 800;
}

.req-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

.req-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.req-hero__stat {
  text-align: center;
  min-inline-size: 6.5rem;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.1);
}

.req-hero__stat strong {
  display: block;
  font-size: var(--text-3xl);
  color: var(--color-accent-line);
}

.req-hero__stat-price {
  font-size: var(--text-lg) !important;
  line-height: 1.3;
}

.req-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.req-crumb a {
  color: var(--color-ink-soft);
  text-decoration: none;
}

.req-crumb a:hover {
  color: var(--color-accent-text);
}

.req-journey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.req-journey__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

.req-journey__num {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg-subtle);
  font-size: var(--text-xs);
  font-weight: 800;
}

.req-journey__step.is-done {
  color: var(--color-ink);
}

.req-journey__step.is-done .req-journey__num {
  background: var(--color-ok);
  color: #fff;
}

.req-journey__step.is-current {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
  color: var(--color-ink);
}

.req-journey__step.is-current .req-journey__num {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.req-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(14rem, 0.8fr);
  gap: var(--space-5);
  align-items: start;
}

.req-card {
  margin-block-end: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}

.req-card h2 {
  margin: 0 0 var(--space-4);
  color: var(--color-ink);
  font-weight: 800;
}

.req-card--brief {
  padding: 0;
  overflow: hidden;
}

.req-brief-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
}

.req-brief-toggle::-webkit-details-marker {
  display: none;
}

.req-brief-toggle strong {
  display: block;
  color: var(--color-ink);
  font-size: var(--text-lg);
}

.req-brief-toggle em {
  display: block;
  margin-block-start: var(--space-1);
  color: var(--color-muted);
  font-style: normal;
  font-size: var(--text-sm);
}

.req-brief-toggle::after {
  content: "";
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-inline-end: 2px solid var(--color-muted);
  border-block-end: 2px solid var(--color-muted);
  transform: rotate(45deg);
  transition: transform var(--dur-1) var(--ease-out);
  flex-shrink: 0;
}

.req-card--brief[open] .req-brief-toggle::after {
  transform: rotate(225deg);
}

.req-card__body {
  padding: 0 var(--space-5) var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

.req-card__body .req-brief__head {
  display: none;
}

.req-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  margin-block-end: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}

.req-banner h2 {
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-xl);
  font-weight: 800;
}

.req-banner p {
  margin: 0;
  color: var(--color-ink-soft);
}

.req-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.req-quotes__hint {
  margin: var(--space-2) 0 0;
  max-width: 40rem;
}

.req-quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-4);
}

.req-quote {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}

.req-quote--best {
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.req-quote--won {
  border-color: color-mix(in srgb, var(--color-ok) 45%, var(--color-border));
  background: color-mix(in srgb, var(--color-ok) 6%, var(--color-surface));
}

.req-quote__ribbon {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  margin: 0;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--color-ok);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 800;
}

.req-quote__ribbon--soft {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.req-quote__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: start;
  margin-block-start: var(--space-4);
}

.req-quote h3 {
  margin: 0;
  color: var(--color-ink);
  font-weight: 800;
}

.req-quote__head p {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.req-quote__price {
  margin: 0;
  color: var(--color-accent-text);
  font-size: var(--text-2xl);
  font-weight: 800;
}

.req-quote__price--lg {
  font-size: var(--text-3xl);
  margin-block: var(--space-3);
}

.req-quote__facts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.req-quote__facts li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-block-end: 1px dashed var(--color-border);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.req-quote__facts li:last-child {
  border-block-end: 0;
}

.req-quote__facts strong {
  color: var(--color-ink);
  font-weight: 700;
}

.req-quote__blurb {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.req-quote__actions {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
}

.req-quote__actions .btn {
  justify-content: center;
}

.req-empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  border-radius: var(--radius-xl);
  border: 1px dashed var(--color-border);
  background: var(--color-bg-subtle);
}

.req-empty__icon {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-accent-text);
}

.req-empty__tips {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.req-empty__tips li + li {
  margin-block-start: var(--space-1);
}

.req-side__card {
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--space-4));
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.req-side__card .section__eyebrow {
  margin: 0;
}

.req-side__card h2 {
  margin: 0;
  color: var(--color-ink);
  font-weight: 800;
}

.req-side__card p {
  margin: 0;
  color: var(--color-muted);
  line-height: var(--leading-normal);
}

.req-side__link {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.req-side__link:hover {
  color: var(--color-accent-text);
}

.req-side__link--muted {
  color: var(--color-muted);
  font-weight: 600;
}

.req-quote-detail {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.req-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.req-specs > div {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.req-specs__label {
  display: block;
  margin-block-end: var(--space-1);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.req-specs strong {
  color: var(--color-ink);
  font-size: var(--text-sm);
}

.req-desc,
.req-photo {
  margin-block-start: var(--space-5);
}

.req-desc h3,
.req-photo h3,
.req-gallery__title {
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-base);
}

.req-desc p {
  margin: 0;
  color: var(--color-ink-soft);
  line-height: var(--leading-normal);
}

.req-photo img {
  width: 100%;
  max-height: 22rem;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.req-brief {
  display: grid;
  gap: var(--space-5);
}

.req-brief__head h2 {
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
  font-weight: 800;
}

.req-brief__lead {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.req-brief__sign {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  border-inline-start: 3px solid var(--color-accent);
}

.req-brief__sign strong {
  display: block;
  margin-block-start: var(--space-2);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-ink);
  line-height: var(--leading-snug);
}

.req-brief__story {
  display: grid;
  gap: var(--space-4);
}

.req-gallery__title span {
  color: var(--color-muted);
  font-weight: 600;
}

.req-gallery__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--space-3);
}

.req-gallery__item {
  margin: 0;
}

.req-gallery__item a {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  aspect-ratio: 4 / 3;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}

.req-gallery__item a:hover,
.req-gallery__item a:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  outline: none;
}

.req-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.req-gallery--empty {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.req-gallery--empty p {
  margin: 0;
}

.wz-photo-tips {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  list-style: none;
  display: grid;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  border: 1px dashed var(--color-border);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.wz-photo-tips li {
  position: relative;
  padding-inline-start: var(--space-4);
}

.wz-photo-tips li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.45em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.wz-preview {
  margin-block-end: var(--space-4);
}

.wz-preview__label {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.wz-preview__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: var(--space-2);
}

.wz-preview__list li {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.wz-preview__list img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.req-section-title {
  margin: var(--space-6) 0 var(--space-3);
  color: var(--color-ink);
  font-size: var(--text-xl);
  font-weight: 800;
}

.req-list {
  display: grid;
  gap: var(--space-3);
}

.req-list__item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-2) var(--ease-out);
}

.req-list__item:hover {
  box-shadow: var(--shadow-sm);
  color: inherit;
}

.req-list__item strong {
  display: block;
  color: var(--color-ink);
  margin-block-end: var(--space-1);
}

.req-list__item span {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-secondary-soft);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 800;
  white-space: nowrap;
}

.status-pill--receiving_quotes,
.status-pill--quoted,
.status-pill--submitted,
.status-pill--reviewing {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.status-pill--accepted,
.status-pill--completed {
  background: var(--color-ok-bg);
  color: var(--color-ok);
}

.status-pill--cancelled,
.status-pill--draft {
  background: var(--color-warn-bg);
  color: var(--color-warn);
}

.status-pill--pending,
.status-pill--viewed,
.status-pill--shortlisted {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.status-pill--rejected,
.status-pill--expired,
.status-pill--suspended {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.status-pill--approved {
  background: var(--color-ok-bg);
  color: var(--color-ok);
}

/* --- Vendor panel ------------------------------------------------------ */

.page-vendor-panel .site-footer {
  display: none;
}

.page-vendor-panel .site-main {
  color: var(--color-ink);
  padding-block: 0;
  background:
    radial-gradient(ellipse 70% 40% at 100% 0%, var(--glow-1), transparent 55%),
    var(--color-bg);
  min-block-size: calc(100dvh - var(--header-h));
}

.vp-workspace {
  max-width: none;
  padding-inline: clamp(var(--space-3), 2vw, var(--space-6));
  padding-block: var(--space-4) var(--space-8);
}

.vp-shell {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  max-width: var(--container);
  margin-inline: auto;
}

.vp-nav {
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--space-3));
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}

.vp-nav__brand {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.vp-nav__mark {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  flex-shrink: 0;
}

.vp-nav__eyebrow {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.vp-nav__brand strong {
  display: block;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: var(--leading-tight);
  margin-block-start: var(--space-1);
}

.vp-nav__status {
  justify-self: start;
}

.vp-nav__links {
  display: grid;
  gap: var(--space-1);
}

.vp-nav__links a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-ink-soft);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--text-sm);
  border-inline-start: 3px solid transparent;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.vp-nav__links a .icon {
  color: var(--color-muted);
  flex-shrink: 0;
}

.vp-nav__links a:hover {
  background: var(--color-bg-subtle);
  color: var(--color-ink);
}

.vp-nav__links a:hover .icon {
  color: var(--color-accent-text);
}

.vp-nav__links a[aria-current="page"] {
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  border-inline-start-color: var(--color-accent-text);
}

.vp-nav__links a[aria-current="page"] .icon {
  color: var(--color-accent-text);
}

.vp-nav__badge {
  margin-inline-start: auto;
  min-inline-size: 1.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 800;
  text-align: center;
  line-height: 1.4;
}

.vp-nav__footer {
  display: grid;
  gap: var(--space-2);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--color-border);
}

.vp-nav__ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}

.vp-nav__ghost:hover {
  color: var(--color-accent-text);
}

.vp-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  min-inline-size: 0;
}

.vp-welcome {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, var(--color-surface) 55%, var(--color-accent-soft) 160%),
    var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}

.vp-welcome__eyebrow,
.vp-card__eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--color-accent-text);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0;
}

.vp-welcome h1 {
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
  font-size: clamp(var(--text-xl), 2.4vw, var(--text-2xl));
  font-weight: 800;
  line-height: var(--leading-tight);
}

.vp-welcome__copy p {
  margin: 0;
  max-inline-size: 38rem;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.vp-welcome__cta {
  display: grid;
  gap: var(--space-2);
}

.vp-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.vp-header h1 {
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
  font-weight: 800;
  font-size: var(--text-xl);
}

.vp-header .section__eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--color-accent-text);
}

.vp-header .muted {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.vp-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-warn-bg);
  color: var(--color-warn);
  font-weight: 700;
  font-size: var(--text-sm);
  max-width: none;
}

.vp-kpi {
  display: grid;
  grid-template-columns: minmax(10rem, 0.85fr) minmax(0, 1.8fr);
  gap: var(--space-3);
}

.vp-kpi__hero {
  display: grid;
  align-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-charcoal);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}

.vp-kpi__hero:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: #fff;
}

.vp-kpi__label,
.vp-kpi__hint {
  font-size: var(--text-sm);
  font-weight: 700;
  color: rgb(255 255 255 / 0.72);
}

.vp-kpi__hero strong {
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
}

.vp-kpi__stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.vp-kpi__item {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}

.vp-kpi__item strong {
  color: var(--color-ink);
  font-size: var(--text-xl);
  font-weight: 800;
}

.vp-kpi__item span {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.vp-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: var(--space-4);
  align-items: start;
}

.vp-side-col {
  display: grid;
  gap: var(--space-4);
}

.vp-card {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}

.vp-card h2 {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-lg);
  font-weight: 800;
}

.vp-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.vp-card__link {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent-text);
  text-decoration: none;
  white-space: nowrap;
}

.vp-card__link:hover {
  text-decoration: underline;
}

.vp-card__meta {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 800;
}

.vp-queue {
  display: grid;
  gap: var(--space-3);
}

.vp-queue__item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  border: 1px solid transparent;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}

.vp-queue__item:hover {
  border-color: var(--color-accent-line);
  background: var(--color-surface);
}

.vp-queue__body {
  min-inline-size: 0;
  flex: 1;
}

.vp-queue__body h3 {
  margin: 0 0 var(--space-1);
  color: var(--color-ink);
  font-size: var(--text-base);
  font-weight: 800;
}

.vp-queue__body > p {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.vp-queue__body ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
}

.vp-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-muted);
}

.vp-empty__icon {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--radius-pill);
  background: var(--color-secondary-soft);
  color: var(--color-muted);
  margin-block-end: var(--space-2);
}

.vp-empty strong {
  color: var(--color-ink);
  font-size: var(--text-base);
}

.vp-empty p {
  margin: 0;
  max-inline-size: 22rem;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.vp-empty--compact {
  padding: var(--space-5) var(--space-3);
}

.vp-feed {
  display: grid;
  gap: var(--space-3);
}

.vp-feed__item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  text-decoration: none;
  color: inherit;
}

.vp-feed__item strong {
  display: block;
  color: var(--color-ink);
  margin-block-end: var(--space-1);
}

.vp-feed__item span {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.vp-feed__item--static {
  cursor: default;
}

.vp-mini-list {
  display: grid;
  gap: var(--space-2);
}

.vp-mini-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.vp-mini-list__item strong {
  display: block;
  color: var(--color-ink);
  font-size: var(--text-sm);
  margin-block-end: 0.15rem;
}

.vp-mini-list__item span {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.vp-progress {
  height: 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  overflow: hidden;
  margin-block-end: var(--space-4);
}

.vp-progress > span {
  display: block;
  height: 100%;
  background: var(--color-accent);
}

.vp-check {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.vp-check li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.vp-check li.is-done {
  background: var(--color-ok-bg);
}

.vp-check__mark {
  color: var(--color-muted);
  flex-shrink: 0;
  margin-block-start: 0.1rem;
}

.vp-check li.is-done .vp-check__mark {
  color: var(--color-ok);
}

.vp-check strong {
  display: block;
  color: var(--color-ink);
  font-size: var(--text-sm);
}

.vp-check small {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-xs);
  margin-block-start: 0.15rem;
  line-height: var(--leading-normal);
}

.vp-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.vp-filters label {
  display: grid;
  gap: var(--space-1);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
}

.vp-filters select {
  min-width: 10rem;
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
}

.vp-filters__check {
  display: flex !important;
  align-items: center;
  gap: var(--space-2);
  grid-auto-flow: column;
}

.vp-req {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}

.vp-req:hover {
  border-color: var(--color-accent-line);
  box-shadow: var(--shadow-sm);
}

.vp-req__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-2);
}

.vp-req__top h2 {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--color-ink);
}

.vp-req__meta {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.vp-req__facts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 600;
}

.vp-req__desc {
  margin: var(--space-3) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.vp-req__actions {
  display: grid;
  align-content: center;
  gap: var(--space-2);
}

.vp-req__chat-wait {
  margin: 0;
  font-size: var(--text-sm);
}

.vp-detail-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: var(--space-4);
  align-items: start;
}

.vp-req-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 0.85fr);
  gap: var(--space-4);
  align-items: start;
}

.vp-req-view,
.vp-req-quote-page {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 0.85fr);
  gap: var(--space-4);
  align-items: start;
}

.vp-req-next,
.vp-req-quote,
.vp-req-quote-summary {
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--space-3));
}

.vp-req-next {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.vp-req-next.is-quoted {
  background: var(--color-bg);
}

.vp-req-next .vp-lead__budget {
  margin: 0;
}

.vp-req-next .vp-lead__competition {
  margin: 0;
}

.vp-req-next.is-quoted .vp-lead__competition {
  color: var(--color-ok);
}

.vp-req-next h2 {
  margin: 0;
}

.vp-req-next__lead {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.vp-req-next__actions {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.vp-req-next__actions .btn {
  width: 100%;
  margin: 0;
  justify-content: center;
}

.vp-req-next__later {
  display: block;
  text-align: center;
  padding-block: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.vp-req-next__later:hover,
.vp-req-next__later:focus-visible {
  color: var(--color-ink);
  text-decoration: underline;
  outline: none;
}

.vp-req-quote-summary h2 {
  margin: 0 0 var(--space-3);
}

.vp-req-quote-summary__desc {
  margin: 0 0 var(--space-3);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.vp-req-quote-summary__photos {
  margin-block-end: var(--space-3);
}

.vp-req-quote-summary__photos a {
  block-size: 9rem;
}

.vp-header__copy {
  min-width: 0;
  flex: 1 1 14rem;
}

.vp-header .btn {
  flex: 0 0 auto;
  align-self: center;
}

.vp-brief__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.vp-tag--done {
  background: var(--color-ok-bg);
  color: var(--color-ok);
}

.vp-req-brief {
  display: grid;
  gap: var(--space-5);
}

.vp-req-brief__head h2 {
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
  font-weight: 800;
  font-size: var(--text-xl);
}

.vp-req-brief__head p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.vp-req-photos__title {
  margin: 0 0 var(--space-3);
  color: var(--color-ink);
  font-size: var(--text-base);
  font-weight: 800;
}

.vp-req-photos__title span {
  color: var(--color-muted);
  font-weight: 600;
}

.vp-req-photos__grid,
.vp-req-photos__mosaic {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.vp-req-photos__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vp-req-photos__mosaic {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
}

.vp-req-photos__mosaic > li:first-child {
  grid-column: 1 / -1;
}

.vp-req-photos__mosaic.is-single {
  grid-template-columns: 1fr;
}

.vp-req-photos__mosaic.is-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vp-req-photos__mosaic.is-pair > li:first-child {
  grid-column: auto;
}

.vp-req-photos__grid.is-single {
  grid-template-columns: 1fr;
}

.vp-req-photos__grid li,
.vp-req-photos__mosaic li {
  margin: 0;
  min-width: 0;
}

.vp-req-photos__grid a,
.vp-req-photos__mosaic a {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  block-size: 11.5rem;
}

.vp-req-photos__mosaic > li:first-child a {
  block-size: 16rem;
}

.vp-req-photos__mosaic.is-pair > li a,
.vp-req-photos__grid.is-single a,
.vp-req-photos__mosaic.is-single a {
  block-size: 16rem;
}

.vp-req-photos__grid a:focus-visible,
.vp-req-photos__mosaic a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.vp-req-photos__grid img,
.vp-req-photos__mosaic img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--dur-2) var(--ease-out);
}

.vp-req-photos__mosaic a:hover img {
  transform: scale(1.03);
}

.vp-req-photos__hint {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.vp-req-photos-empty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.vp-req-story {
  display: grid;
  gap: var(--space-4);
}

.vp-req-sign {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  border-inline-start: 3px solid var(--color-accent);
}

.vp-req-sign span {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.vp-req-sign strong {
  display: block;
  margin-block-start: var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: var(--leading-snug);
}

.vp-req-desc h3 {
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-base);
}

.vp-req-desc p {
  margin: 0;
  color: var(--color-ink-soft);
  line-height: var(--leading-normal);
  font-size: var(--text-base);
}

.vp-req-specs {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.vp-req-specs > div {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.vp-req-specs > div.is-urgent {
  background: var(--color-warn-bg);
}

.vp-req-specs dt {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 var(--space-1);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.vp-req-specs dt .icon {
  color: var(--color-muted);
}

.vp-req-specs > div.is-urgent dt,
.vp-req-specs > div.is-urgent dt .icon,
.vp-req-specs > div.is-urgent dd {
  color: var(--color-warn);
}

.vp-req-specs dd {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-snug);
  word-break: break-word;
}

.vp-req-quote {
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--space-3));
}

.vp-req-quote h2 {
  margin-block-end: var(--space-3);
}

.vp-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.vp-onboard {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: var(--space-6);
  align-items: start;
  max-width: var(--container);
  margin-inline: auto;
  padding-block: var(--space-6);
}

.vp-onboard__steps {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.vp-onboard__steps li {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.vp-onboard__steps strong {
  display: block;
  color: var(--color-ink);
  margin-block-end: var(--space-1);
}

.vp-onboard__steps span {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

@media (max-width: 960px) {
  .vp-shell,
  .vp-grid,
  .vp-detail-grid,
  .vp-req-detail,
  .vp-req-view,
  .vp-req-quote-page,
  .vp-kpi,
  .vp-kpi__stack,
  .vp-onboard {
    grid-template-columns: 1fr;
  }

  .vp-req-quote,
  .vp-req-next,
  .vp-req-quote-summary {
    position: static;
  }

  .vp-req-specs {
    grid-template-columns: 1fr;
  }

  .vp-req-photos__grid,
  .vp-req-photos__mosaic {
    grid-template-columns: 1fr;
  }

  .vp-req-photos__mosaic > li:first-child,
  .vp-req-photos__mosaic.is-pair > li:first-child {
    grid-column: auto;
  }

  .vp-req-photos__mosaic > li:first-child a,
  .vp-req-photos__mosaic.is-pair > li a {
    block-size: 12rem;
  }

  .vp-nav {
    position: static;
    padding: var(--space-3);
    gap: var(--space-3);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .vp-nav__brand {
    display: none;
  }

  .vp-nav__status {
    display: none;
  }

  .vp-nav__footer {
    display: none;
  }

  .vp-nav__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-1);
    overflow: visible;
    padding-block-end: 0;
  }

  .vp-nav__links a {
    flex: unset;
    justify-content: center;
    text-align: center;
    border-inline-start: none;
    border-block-end: 3px solid transparent;
    white-space: normal;
    min-block-size: 2.75rem;
    padding-inline: var(--space-1);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
  }

  .vp-nav__links a[aria-current="page"] {
    border-block-end-color: var(--color-accent-text);
  }

  .vp-nav__badge {
    margin-inline-start: var(--space-1);
  }

  .vp-welcome {
    padding: var(--space-4);
  }

  .vp-welcome h1 {
    font-size: var(--text-xl);
  }

  .vp-welcome__cta .btn {
    width: 100%;
    justify-content: center;
  }

  .vp-kpi__hero {
    text-align: center;
  }

  .vp-kpi__stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vp-queue__item {
    flex-direction: column;
    align-items: stretch;
  }

  .vp-queue__item .btn {
    width: 100%;
    justify-content: center;
  }

  .vp-req {
    flex-direction: column;
  }

  .vp-req__actions {
    width: 100%;
  }

  .vp-req__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .vp-workspace {
    padding-inline: var(--space-3);
    padding-block: var(--space-3) var(--space-6);
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .vp-shell {
    max-width: 100%;
    min-width: 0;
  }

  .vp-main,
  .vp-main--chat {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .vp-header {
    padding: var(--space-4);
  }

  .vp-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .vp-filters select {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 960px) {
  .wz-layout,
  .req-layout,
  .req-specs,
  .wz-summary {
    grid-template-columns: 1fr;
  }

  .req-side__card {
    position: static;
  }

  .wz-layout,
  .req-layout {
    gap: var(--space-3);
  }

  .wz-layout {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
  }

  .page-wizard .wz-aside {
    display: none;
  }

  .page-wizard .wz-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 960px) {
  :root {
    --header-h: 4.25rem;
    --mobile-cta-h: 4.5rem;
  }

  html,
  body {
    overflow-x: clip;
    max-width: 100%;
  }

  .site-main,
  .section,
  .chat-shell,
  .pf-detail,
  .svc-page,
  .vn-profile,
  .city-page {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  body.has-mobile-chrome {
    padding-block-end: calc(var(--mobile-cta-h) + env(safe-area-inset-bottom));
  }

  body.nav-open {
    overflow: hidden;
  }

  .site-header--sepeh {
    padding: var(--space-2) var(--space-3) 0;
  }

  .site-header__bar {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-2);
    min-height: 3.5rem;
    padding-inline: var(--space-2);
    padding-block: var(--space-2);
    border-radius: var(--radius-lg);
  }

  .nav-toggle {
    display: grid;
  }

  .nav--desktop {
    display: none !important;
  }

  .brand--badge {
    margin-block-end: 0;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    flex-direction: row;
    gap: var(--space-2);
    justify-self: center;
  }

  .brand--badge .brand__mark {
    width: 1.85rem;
    height: 1.85rem;
  }

  .brand--badge .brand__text {
    font-size: var(--text-xs);
  }

  .nav--end {
    justify-content: flex-end;
  }

  .btn--accent-phone {
    padding: 0.55rem 0.85rem;
    font-size: var(--text-xs);
  }

  .btn--accent-phone span {
    display: none;
  }

  .mobile-drawer {
    display: block;
    position: fixed;
    inset-block-start: calc(var(--header-h) + var(--space-2));
    inset-inline: var(--space-3);
    z-index: 60;
    padding: var(--space-3);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
  }

  .mobile-drawer[hidden] {
    display: none;
  }

  .mobile-drawer__nav {
    display: grid;
    gap: var(--space-1);
  }

  .mobile-drawer__nav a,
  .mobile-drawer__nav button {
    display: flex;
    align-items: center;
    min-block-size: 2.75rem;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    font-weight: 700;
    font-size: var(--text-base);
    text-decoration: none;
    text-align: start;
    cursor: pointer;
  }

  .mobile-drawer__nav a:hover,
  .mobile-drawer__nav button:hover {
    background: var(--color-bg-subtle);
  }

  .mobile-cta {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 55;
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    padding-block-end: calc(var(--space-2) + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    backdrop-filter: blur(10px);
    border-block-start: 1px solid var(--color-border);
    box-shadow: 0 -8px 24px rgb(20 20 22 / 0.08);
  }

  .mobile-cta__link,
  .mobile-cta__primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: 2.85rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-pill);
    font-weight: 800;
    font-size: var(--text-sm);
    text-decoration: none;
  }

  .mobile-cta__link {
    background: var(--color-bg-subtle);
    color: var(--color-ink);
    border: 1px solid var(--color-border);
  }

  .mobile-cta__primary {
    background: var(--color-accent);
    color: var(--color-accent-ink);
  }

  .page-vendor-panel .mobile-cta,
  .page-wizard .mobile-cta,
  .page-auth .mobile-cta {
    display: none;
  }

  .page-vendor-panel.has-mobile-chrome,
  .page-wizard.has-mobile-chrome,
  .page-auth.has-mobile-chrome {
    padding-block-end: 0;
  }

  .sp-hero {
    margin-block-start: var(--space-4);
    margin-block-end: var(--space-5);
    gap: var(--space-5);
    grid-template-columns: 1fr;
  }

  .sp-hero__copy h1 {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }

  .sp-hero__tag {
    max-width: none;
    font-size: var(--text-base);
  }

  .sp-hero__actions {
    flex-direction: column;
  }

  .sp-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .sp-hero__visual {
    order: -1;
  }

  .sp-hero__visual img {
    aspect-ratio: 16 / 10;
  }

  .sp-vip {
    margin-block-end: var(--space-5);
  }

  .sp-vip__rail {
    justify-content: center;
    overflow-x: visible;
    flex-wrap: wrap;
    padding-block: var(--space-3);
    border-radius: var(--radius-xl);
  }

  .sp-vip__item {
    flex: 0 1 auto;
  }

  .section {
    padding-block: var(--space-7);
  }

  .section__head h2,
  .section__head h1 {
    font-size: var(--text-2xl);
  }

  .sp-hero,
  .sp-duo,
  .sp-final,
  .sp-features,
  .sp-reviews,
  .detail-grid-pro {
    grid-template-columns: 1fr;
  }

  .sp-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp-projects,
  .sp-vendors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp-consult__inner {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-5);
    text-align: center;
  }

  .sp-consult__inner .btn {
    width: 100%;
    justify-content: center;
  }

  .vn-hero {
    min-height: 16rem;
    margin-inline: var(--space-3);
    border-radius: var(--radius-lg);
  }

  .vn-hero__content {
    padding: var(--space-5) var(--space-4);
  }

  .vn-hero h1 {
    max-width: none;
    font-size: var(--text-2xl);
  }

  .vn-hero__actions {
    flex-direction: column;
  }

  .vn-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .vn-stats {
    padding-inline: var(--space-3);
  }

  .vn-layout {
    padding-inline: var(--space-3);
  }

  .vn-block {
    padding: var(--space-4);
  }

  .vn-side__card {
    position: static;
  }

  .site-footer__inner {
    padding-block: var(--space-6) var(--space-5);
  }

  .wz-panel {
    padding: var(--space-4);
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  .wz-panel__head h1 {
    font-size: var(--text-xl);
  }

  .wz-panel__hint {
    font-size: var(--text-sm);
  }

  .wz-cards {
    gap: var(--space-2);
  }

  .wz-card {
    padding: var(--space-3);
    align-items: flex-start;
    min-width: 0;
  }

  .wz-card__title {
    font-size: var(--text-sm);
  }

  .wz-card__hint {
    font-size: var(--text-xs);
  }

  .wz-actions {
    flex-direction: column-reverse;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
  }

  .wz-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .page-wizard .site-main {
    padding-block-start: var(--space-4);
    padding-block-end: var(--space-8);
    padding-inline: var(--space-3);
    max-width: 100%;
    overflow-x: clip;
  }

  .page-wizard .wz-shell.section {
    padding-block: 0;
    padding-inline: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .page-wizard .site-header {
    max-width: 100%;
    overflow-x: clip;
  }

  .vn-list__hero {
    padding-inline: var(--space-3);
    padding-block: var(--space-5) var(--space-3);
  }

  .vn-list__hero-copy {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .sp-services,
  .sp-projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .sp-vendors,
  .gallery,
  .review-rail,
  .vn-grid,
  .vn-grid--compact,
  .vn-gallery,
  .vn-reviews,
  .vn-stats__grid,
  .vp-kpi__stack {
    grid-template-columns: 1fr;
  }

  .sp-vendor {
    grid-template-columns: 5.75rem minmax(0, 1fr);
  }

  .sp-vendor img {
    min-block-size: 4.75rem;
  }

  .sp-project__body .btn {
    font-size: var(--text-xs);
    padding-inline: 0.7rem;
  }

  .vn-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vp-kpi__stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp-card-dark__media--stack {
    grid-template-columns: 1fr;
  }

  .sp-card-dark__media--stack img {
    height: 11rem;
  }

  .btn--lg {
    padding: 0.8rem 1.15rem;
  }
}

/* --- Vendor list + profile --------------------------------------------- */

.page-vendors .site-main,
.page-vendor .site-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--color-ink);
}

.vn-list__hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-5);
  padding-block: var(--space-8) var(--space-4);
}

.vn-list__hero-copy {
  max-width: 36rem;
}

.vn-list__hero h1 {
  margin: 0 0 var(--space-3);
  color: var(--color-accent-text);
  font-weight: 800;
}

.vn-list__hero p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.vn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.vn-grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vn-card {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}

.vn-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.vn-card--link {
  text-decoration: none;
  color: inherit;
}

.vn-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-subtle);
}

.vn-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vn-badge {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 800;
}

.vn-badge--light {
  position: static;
  background: rgb(255 255 255 / 0.18);
  color: #fff;
}

.vn-badge--accent {
  position: static;
  background: var(--color-accent);
  color: #fff;
}

.vn-card__body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-6);
}

.vn-card__body h2,
.vn-card__body h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-ink);
}

.vn-card__body h2 a {
  color: inherit;
  text-decoration: none;
}

.vn-card__meta,
.vn-card__body > p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.vn-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.vn-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(24rem, 48vw, 36rem);
  margin: var(--space-4) var(--gutter) 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: #fff;
  box-shadow: var(--shadow-lg);
}

.vn-hero--compact {
  min-height: clamp(15rem, 28vw, 20rem);
  border-radius: var(--radius-lg);
  margin-block-start: var(--space-3);
}

.vn-hero__media,
.vn-hero__shade {
  position: absolute;
  inset: 0;
}

.vn-hero__media {
  z-index: -2;
}

.vn-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vn-hero__shade {
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(20 20 22 / 0.2), rgb(20 20 22 / 0.82) 58%, rgb(20 20 22 / 0.94));
}

.vn-hero__content {
  display: grid;
  gap: var(--space-4);
  align-content: end;
  min-height: inherit;
  padding: var(--space-8) var(--space-6);
}

.vn-hero--compact .vn-hero__content {
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5);
}

.vn-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.vn-hero h1 {
  margin: 0;
  color: #fff;
  font-size: var(--text-display);
  font-weight: 800;
  max-width: 18ch;
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.35);
}

.vn-hero--compact h1 {
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  max-width: 22ch;
  line-height: var(--leading-snug);
}

.vn-hero__lead {
  margin: 0;
  color: rgb(255 255 255 / 0.9);
  font-size: var(--text-lg);
  font-weight: 600;
  max-width: 40rem;
}

.vn-hero--compact .vn-hero__lead {
  font-size: var(--text-sm);
  font-weight: 600;
  max-width: 36rem;
}

.vn-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.vn-stats {
  padding-block: var(--space-4);
}

.vn-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  text-align: center;
}

.vn-stats__grid strong {
  display: block;
  color: var(--color-accent-text);
  font-size: var(--text-xl);
  font-weight: 800;
}

.vn-stats__grid span {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.vn-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 0.8fr);
  gap: var(--space-5);
  align-items: start;
}

.vn-block {
  margin-block-end: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}

.vn-block h2 {
  margin: 0 0 var(--space-3);
  color: var(--color-ink);
  font-size: var(--text-xl);
  font-weight: 800;
}

.vn-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.vn-gallery__item {
  display: grid;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-ink);
  font-weight: 700;
  font-size: var(--text-sm);
}

.vn-gallery__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.vn-reviews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.vn-review {
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.vn-review__stars {
  margin: 0 0 var(--space-2);
  color: var(--color-accent-text);
  font-weight: 800;
}

.vn-review p:last-child {
  margin: 0;
  color: var(--color-ink-soft);
  line-height: var(--leading-relaxed);
  font-size: var(--text-sm);
}

.vn-side__card {
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--space-4));
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-charcoal);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.vn-side__card h2,
.vn-side__card .section__eyebrow,
.vn-side__card p,
.vn-side__card li {
  color: #fff;
}

.vn-side__card .section__eyebrow {
  color: var(--color-accent-line);
  margin: 0;
}

.vn-side__card h2 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 800;
}

.vn-side__card .muted {
  color: rgb(255 255 255 / 0.72);
}

.vn-side__facts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.vn-side__card .btn--ghost-outline {
  background: transparent;
  border-color: rgb(255 255 255 / 0.35);
  color: var(--color-accent-ink);
}

.vn-side__card .btn--ghost-outline:hover {
  background: var(--color-charcoal-soft);
  border-color: var(--color-accent-ink);
  color: var(--color-accent-ink);
}

@media (max-width: 1200px) {
  .vn-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vn-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 961px) and (max-width: 1200px) {
  .sp-services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sp-projects,
  .sp-vendors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .vn-grid,
  .vn-grid--compact,
  .vn-layout,
  .vn-stats__grid,
  .vn-gallery,
  .vn-reviews {
    grid-template-columns: 1fr;
  }

  .vn-side__card {
    position: static;
  }

  .vn-hero {
    min-height: 18rem;
  }

  .vn-hero--compact {
    min-height: 14rem;
  }

  .vn-hero--compact .vn-hero__content {
    padding: var(--space-4);
  }

  .vn-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Service / city conversion pages ----------------------------------- */

.page-service .site-main,
.page-city .site-main,
.page-city-service .site-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--color-ink);
}

.svc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-7) var(--space-5);
}

.svc-hero:not(:has(.svc-hero__visual)) {
  grid-template-columns: 1fr;
}

.svc-hero__copy {
  max-width: 36rem;
}

.svc-hero h1 {
  margin: 0 0 var(--space-3);
  color: var(--color-accent-text);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: var(--leading-snug);
}

.svc-hero__lead {
  margin: 0 0 var(--space-5);
  color: var(--color-ink-soft);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.svc-hero__visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-surface);
}

.svc-hero__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.svc-related {
  padding-block: 0 var(--space-4);
}

.svc-related__label {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

.svc-related__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(8.5rem, 1fr);
  gap: var(--space-2);
  overflow-x: auto;
  padding-block-end: var(--space-1);
  scrollbar-width: thin;
}

.svc-related__item {
  display: grid;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.svc-related__item:hover {
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
  box-shadow: var(--shadow-sm);
}

.svc-related__item img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.svc-related__item span {
  padding: 0 var(--space-3) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 800;
}

.svc-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.svc-facts__card {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}

.svc-facts__card h2 {
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-base);
  font-weight: 800;
}

.svc-facts__card p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.svc-count {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.svc-vendors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.svc-vendor {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.svc-vendor:hover {
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
  box-shadow: var(--shadow-sm);
}

.svc-vendor img {
  width: 100%;
  height: 100%;
  min-block-size: 5.5rem;
  object-fit: cover;
}

.svc-vendor__body {
  display: grid;
  align-content: center;
  gap: var(--space-1);
  padding: var(--space-3);
}

.svc-vendor__body h3 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: var(--leading-snug);
}

.svc-vendor__body p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.svc-vendor__body .btn {
  justify-self: start;
  margin-block-start: var(--space-1);
}

.svc-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.svc-gallery__item {
  display: grid;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.svc-gallery__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.svc-gallery__item span {
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-snug);
}

.svc-gallery__item span:last-child {
  padding-block-end: var(--space-3);
}

.svc-gallery__meta {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.svc-faq {
  display: grid;
  gap: var(--space-3);
  max-width: 48rem;
  margin-inline: auto;
}

.svc-faq__item {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.svc-faq__item summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--color-ink);
}

.svc-faq__item p {
  margin: var(--space-3) 0 0;
  color: var(--color-muted);
  line-height: var(--leading-normal);
}

.chip--ok {
  background: var(--color-ok-bg);
  color: var(--color-ok);
}

.chip-row--trust {
  margin-block-start: var(--space-2);
}

.chip-row--lg {
  gap: var(--space-3);
}

.chip-row--lg .chip {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
}

.vn-stats__grid {
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

@media (max-width: 1200px) {
  .svc-vendors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .svc-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .svc-hero {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .svc-hero__visual {
    order: -1;
  }

  .svc-hero__visual img {
    aspect-ratio: 16 / 10;
  }

  .svc-facts {
    grid-template-columns: 1fr;
  }

  .svc-hero__actions {
    flex-direction: column;
  }

  .svc-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .svc-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .svc-vendors {
    grid-template-columns: 1fr;
  }

  .svc-related__rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: unset;
    overflow-x: visible;
  }

  .svc-related__item span {
    font-size: var(--text-xs);
  }
}

/* --- Chat (quote-linked WebSocket) ------------------------------------ */

.page-chat.page-chat-thread .site-main {
  max-width: 52rem;
}

.page-vendor-panel.page-chat-thread .site-main {
  max-width: none;
  width: 100%;
}

.chat-shell {
  padding-block-start: var(--space-4);
  max-width: 100%;
  min-width: 0;
}

.vp-main--chat {
  min-inline-size: 0;
  max-width: 100%;
}

.chat-room {
  display: grid;
  grid-template-rows: auto minmax(14rem, 1fr) auto;
  gap: 0;
  min-block-size: min(72vh, 42rem);
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.page-vendor-panel .chat-room {
  min-block-size: min(75vh, 44rem);
}

.chat-room__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg-subtle) 65%, var(--color-surface));
  min-width: 0;
}

.chat-room__identity {
  display: grid;
  gap: var(--space-2);
  min-inline-size: 0;
  flex: 1 1 12rem;
}

.chat-room__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  width: fit-content;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}

.chat-room__back:hover {
  color: var(--color-accent-text);
}

.chat-room__head h1 {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-xl);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.chat-room__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
  max-width: 100%;
}

.chat-room__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
}

.chat-room__live {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.75rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg-subtle);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 800;
}

.chat-room__stream {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--color-accent) 6%, transparent), transparent 60%),
    var(--color-bg);
  min-block-size: 12rem;
}

.chat-room__empty {
  margin: auto;
  max-width: 22rem;
  padding: var(--space-5);
  text-align: center;
  color: var(--color-muted);
}

.chat-room__empty strong {
  display: block;
  margin-block-end: var(--space-2);
  color: var(--color-ink);
}

.chat-msg {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.chat-msg--mine {
  justify-content: flex-start;
}

.chat-msg--theirs {
  justify-content: flex-end;
}

.chat-msg__bubble {
  max-width: min(80%, 26rem);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.chat-msg--mine .chat-msg__bubble {
  border-start-start-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
}

.chat-msg--theirs .chat-msg__bubble {
  border-start-end-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.chat-msg__body {
  margin: 0;
  color: var(--color-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: var(--leading-normal);
}

.chat-msg__image {
  display: block;
  margin-block-end: var(--space-2);
}

.chat-msg__image img {
  display: block;
  max-width: 100%;
  max-height: 14rem;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.chat-msg__time {
  display: block;
  margin-block-start: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.chat-room__composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface);
  min-width: 0;
  max-width: 100%;
}

.chat-room__input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-ink);
  font: inherit;
}

.chat-room__input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.chat-room__attach {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-ink-soft);
  cursor: pointer;
}

.chat-room__attach:hover {
  color: var(--color-accent-text);
  border-color: var(--color-accent);
}

.chat-room__send {
  min-inline-size: 5.5rem;
  justify-content: center;
}

.chat-room__closed {
  margin: 0;
  padding: var(--space-4);
  border-block-start: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  color: var(--color-muted);
  text-align: center;
  font-weight: 600;
}

.chat-inbox {
  display: grid;
  gap: var(--space-2);
}

.chat-inbox__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
}

.chat-inbox__row:hover {
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
}

.chat-inbox__row.is-unread {
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
}

.chat-inbox__avatar {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.chat-inbox__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: baseline;
}

.chat-inbox__top strong {
  color: var(--color-ink);
  font-weight: 800;
}

.chat-inbox__top time {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.chat-inbox__preview {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.chat-inbox__row.is-unread .chat-inbox__preview {
  color: var(--color-ink-soft);
  font-weight: 600;
}

.chat-inbox__end {
  display: grid;
  justify-items: end;
  gap: var(--space-2);
}

.chat-inbox__badge {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.5rem;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 800;
}

.chat-inbox__empty {
  padding: var(--space-8) var(--space-5);
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-bg-subtle);
}

a.vp-kpi__item {
  text-decoration: none;
  color: inherit;
}

a.vp-kpi__item:hover {
  border-color: var(--color-accent);
}

@media (max-width: 960px) {
  .page-chat.page-chat-thread .site-main,
  .page-vendor-panel.page-chat-thread .site-main {
    max-width: 100%;
    min-width: 0;
    padding-inline: var(--space-3);
    overflow-x: clip;
  }

  .page-vendor-panel.page-chat-thread .vp-workspace {
    padding-inline: var(--space-3);
  }

  .chat-shell {
    padding-inline: 0;
    padding-block-start: var(--space-3);
  }

  .chat-room {
    min-block-size: calc(100dvh - 7.5rem);
    border-radius: var(--radius-lg);
    max-width: 100%;
  }

  .chat-room__head {
    padding: var(--space-3);
  }

  .chat-room__head h1 {
    font-size: var(--text-lg);
  }

  .chat-room__tools {
    width: 100%;
  }

  .chat-room__tools .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .chat-room__stream {
    padding: var(--space-3);
  }

  .chat-msg__bubble {
    max-width: min(92%, 26rem);
  }

  .chat-room__composer {
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: var(--space-2) var(--space-3);
    padding-block-end: calc(var(--space-2) + env(safe-area-inset-bottom));
    position: sticky;
    inset-block-end: 0;
  }

  .chat-room__send {
    min-inline-size: 4.5rem;
  }

  .chat-inbox__row {
    grid-template-columns: auto minmax(0, 1fr);
    max-width: 100%;
  }

  .chat-inbox__end {
    grid-column: 2;
    justify-items: start;
    grid-auto-flow: column;
    align-items: center;
  }

  .chat-inbox__preview {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 960px) {
  .req-journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .req-hero {
    padding: var(--space-5);
  }

  .req-hero h1 {
    font-size: var(--text-2xl);
  }

  .req-hero__stats {
    width: 100%;
  }

  .req-hero__stat {
    flex: 1 1 auto;
  }

  .req-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .req-banner__actions .btn,
  .req-banner__actions form {
    width: 100%;
  }

  .req-banner__actions .btn {
    justify-content: center;
  }

  .req-side__card {
    position: static;
  }

  .page-request-detail .req-layout {
    gap: var(--space-4);
  }
}

@media (max-width: 640px) {
  .req-journey {
    grid-template-columns: 1fr 1fr;
  }

  .req-quote__head {
    flex-direction: column;
  }
}


/* --- Vendor panel: portfolio list and gallery editor --------------------- */

.vp-header__copy .section__eyebrow a {
  color: inherit;
}

.vp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.vp-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.vp-status-tabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.vp-status-tabs a span {
  min-width: 1.5rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-bg-subtle);
  font-size: var(--text-xs);
  text-align: center;
}

.vp-status-tabs a:hover {
  background: var(--color-bg-subtle);
  color: var(--color-ink);
}

.vp-status-tabs a[aria-current] {
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.vp-status-tabs a[aria-current] span {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.vp-status-tabs a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.pf-search {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1 1 14rem;
  max-width: 20rem;
}

.pf-search input {
  flex: 1;
  min-width: 0;
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-sm);
}

.pf-search input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: var(--focus-ring);
}

.pf-manage__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-manage__card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.pf-manage__card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.pf-manage__thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-subtle);
}

.pf-manage__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-manage__thumb .status-pill {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  box-shadow: var(--shadow-xs);
}

.pf-manage__counts {
  position: absolute;
  inset-block-end: var(--space-2);
  inset-inline-end: var(--space-2);
  display: flex;
  gap: var(--space-1);
}

.pf-manage__counts > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-charcoal) 78%, transparent);
  color: var(--color-accent-ink);
  font-size: var(--text-xs);
  font-weight: 700;
}

.pf-manage__body {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.pf-manage__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: var(--text-base);
  font-weight: 800;
  line-height: var(--leading-snug);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pf-manage__title a {
  color: var(--color-ink);
  text-decoration: none;
}

.pf-manage__title a:hover {
  color: var(--color-accent-text);
}

.pf-manage__meta {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.pf-manage__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

.pf-manage__actions .btn {
  flex: 1;
  justify-content: center;
}

.pf-danger {
  color: var(--color-danger);
}

.pf-danger:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* Shared form layout */
.pf-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.pf-form-grid__full {
  display: grid;
  gap: var(--space-3);
  grid-column: 1 / -1;
}

.pf-form-footer,
.pf-create__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.pf-form-footer {
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}

.pf-create {
  display: grid;
  gap: var(--space-4);
}

.pf-create .vp-card > h2 {
  margin-block-end: var(--space-4);
}

.pf-optional {
  margin-inline-start: var(--space-1);
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-bg-subtle);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  vertical-align: middle;
}

.pf-create__actions,
.pf-add__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pf-create__footer .field__help {
  margin: 0;
}

/* Drop zone: the file input is stretched invisibly over it. */
.pf-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}

.pf-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.pf-drop:hover,
.pf-drop.is-dragging {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.pf-drop:focus-within {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.pf-drop.has-files {
  border-style: solid;
  border-color: var(--color-ok);
}

.field--invalid .pf-drop {
  border-color: var(--color-danger);
}

.pf-drop__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-accent-text);
  box-shadow: var(--shadow-xs);
}

.pf-drop__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pf-drop__title {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 800;
}

.pf-drop__hint {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.pf-drop__files {
  overflow: hidden;
  color: var(--color-ok);
  font-size: var(--text-xs);
  font-weight: 700;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
  white-space: nowrap;
}

.pf-drop__files:empty {
  display: none;
}

.pf-drop--compact {
  padding: var(--space-3) var(--space-4);
}

.pf-drop--compact .pf-drop__icon {
  width: 2.5rem;
  height: 2.5rem;
}

/* Edit page */
.pf-edit__hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

.pf-edit__quota {
  flex: none;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-bg-subtle);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 800;
}

.pf-edit__empty {
  display: flex;
  align-items: start;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-info-bg);
  color: var(--color-info);
  font-size: var(--text-sm);
}

.pf-edit__empty .icon {
  flex: none;
  margin-block-start: 0.2em;
}

.pf-edit__danger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-color: color-mix(in srgb, var(--color-danger) 25%, var(--color-border));
}

.pf-edit__danger h2 {
  font-size: var(--text-base);
}

.pf-edit__danger p {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

.pf-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--space-4) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-media {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
}

.pf-media__thumb {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  box-shadow: var(--hairline);
}

.pf-media--cover .pf-media__thumb {
  box-shadow: 0 0 0 2px var(--color-accent);
}

.pf-media__thumb img,
.pf-media__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-media__empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-1);
  height: 100%;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.pf-media__empty--dark {
  background: var(--color-charcoal);
  color: var(--color-accent-ink);
}

.pf-media__empty--dark .icon {
  fill: currentcolor;
}

.pf-media__badge {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-charcoal) 80%, transparent);
  color: var(--color-accent-ink);
  font-size: var(--text-xs);
  font-weight: 700;
}

.pf-media__badge--cover {
  background: var(--color-accent);
}

.pf-media__order {
  position: absolute;
  inset-block-end: var(--space-2);
  inset-inline-end: var(--space-2);
  display: grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 800;
}

.pf-media__caption {
  margin: 0;
  overflow: hidden;
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-media__tools {
  display: flex;
  gap: var(--space-1);
}

.pf-media__tools form:last-child {
  margin-inline-start: auto;
}

.pf-media__add {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-1);
  aspect-ratio: 1;
  padding: var(--space-3);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}

.pf-media__add small {
  font-size: var(--text-xs);
  font-weight: 600;
}

.pf-media__add:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.pf-media__add:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.pf-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.pf-icon-btn:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  background: var(--color-bg-subtle);
}

.pf-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.pf-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pf-icon-btn.pf-danger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
  background: var(--color-danger-bg);
}

.pf-add {
  scroll-margin-block-start: calc(var(--header-h) + var(--space-4));
}

.pf-add .pf-tabs {
  margin-block-end: var(--space-4);
}

.pf-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  width: max-content;
  max-width: 100%;
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-bg-subtle);
}

.pf-tabs[hidden] {
  display: none;
}

.pf-tabs [role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.5rem;
  padding: var(--space-1) var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}

.pf-tabs [role="tab"][aria-selected="true"] {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-xs);
}

.pf-tabs [role="tab"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

html:not([data-js]) .pf-tabpanel + .pf-tabpanel {
  padding-block-start: var(--space-4);
  border-block-start: 1px dashed var(--color-border);
}

.pf-preview .wz-preview__list li.is-video {
  aspect-ratio: 16 / 10;
  grid-column: span 2;
}

.pf-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-charcoal);
}

form[aria-busy="true"] {
  cursor: progress;
}

/* Publish toggle */
.pf-switch label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.pf-switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  min-height: 0;
  height: 1px;
  opacity: 0;
}

.pf-switch__track {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  transition: background var(--dur-2) var(--ease-out);
}

.pf-switch__track::after {
  content: "";
  position: absolute;
  inset-block-start: 0.1875rem;
  inset-inline-start: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  transition: inset-inline-start var(--dur-2) var(--ease-out);
}

.pf-switch input:checked + .pf-switch__track {
  background: var(--color-ok);
}

.pf-switch input:checked + .pf-switch__track::after {
  inset-inline-start: 1.4375rem;
}

.pf-switch input:focus-visible + .pf-switch__track {
  box-shadow: var(--focus-ring);
}

.pf-switch__label {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
}

@media (max-width: 640px) {
  .vp-toolbar {
    align-items: stretch;
  }

  .vp-status-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .vp-status-tabs a {
    flex: none;
  }

  .pf-search {
    max-width: none;
  }

  .pf-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pf-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pf-drop {
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .pf-create__actions,
  .pf-add__actions,
  .pf-create__actions .btn,
  .pf-add__actions .btn,
  .pf-form-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .pf-media-head {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-switch__track,
  .pf-switch__track::after,
  .pf-manage__card,
  .pf-drop,
  .pf-media__add,
  .vp-status-tabs a {
    transition: none;
  }
}

/* --- Vendor panel: request feed ------------------------------------------- */

.vp-toolbar--stacked {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-2);
}

.vp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-1);
  border-block-start: 1px solid var(--color-border);
}

.vp-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}

.vp-chips a:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-subtle);
}

.vp-chips a[aria-current] {
  border-color: var(--color-charcoal);
  background: var(--color-charcoal);
  color: var(--color-accent-ink);
}

.vp-chips a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.vp-leads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vp-lead {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  block-size: 100%;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}

.vp-lead:hover {
  border-color: var(--color-accent-line);
  box-shadow: var(--shadow-sm);
}

.vp-lead.is-preferred {
  border-color: var(--color-accent-line);
}

.vp-lead.is-preferred::before {
  content: "";
  position: absolute;
  inset-block: var(--space-5);
  inset-inline-start: -1px;
  inline-size: 0.25rem;
  border-start-end-radius: var(--radius-pill);
  border-end-end-radius: var(--radius-pill);
  background: var(--color-accent);
}

.vp-lead.is-quoted {
  background: var(--color-bg);
}

.vp-lead__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.vp-lead__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.vp-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-secondary-soft);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 800;
}

.vp-tag--preferred {
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.vp-tag--guidance {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.vp-tag--urgent {
  background: var(--color-warn-bg);
  color: var(--color-warn);
}

.vp-lead__time {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.vp-lead__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: var(--leading-snug);
}

.vp-lead__title a {
  color: var(--color-ink);
  text-decoration: none;
}

.vp-lead__title a:hover {
  color: var(--color-accent-text);
}

.vp-lead__title a:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
}

.vp-lead__place {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: calc(var(--space-2) * -1) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.vp-lead__budget {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.vp-lead.is-quoted .vp-lead__budget {
  background: var(--color-surface);
}

.vp-lead__budget span {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.vp-lead__budget strong {
  color: var(--color-ink);
  font-size: var(--text-base);
  font-weight: 800;
}

.vp-lead__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 600;
}

.vp-lead__specs li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.vp-lead__specs .icon {
  color: var(--color-muted);
}

.vp-lead__specs li.is-urgent,
.vp-lead__specs li.is-urgent .icon {
  color: var(--color-warn);
}

.vp-lead__desc {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.vp-lead__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.vp-lead__competition {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

.vp-lead.is-quoted .vp-lead__competition {
  color: var(--color-ok);
}

@media (max-width: 640px) {
  .vp-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .vp-chips a {
    flex: none;
  }

  .vp-lead {
    padding: var(--space-4);
  }

  .vp-lead__foot .btn {
    inline-size: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vp-chips a,
  .vp-lead {
    transition: none;
  }
}