/* БортМакет — «Графика, собранная по борту».
   Surface and identity layer only: existing content grids and image geometry stay intact. */
.design-prototype {
  --brand-accent: #c4653c;
  --brand-tint: #f0e3d9;
  --brand-field: #e8e6df;
  --brand-plane: #dad6cd;
  --brand-pair: #eeece6;
  --brand-ink: #202122;
  --brand-cut: 60deg;
  --brand-edge: 24px;
}

/* One optical lockup. The name remains text for accessibility and CSS-off reading. */
.design-prototype .brand-logo {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--graphite); vertical-align: middle; line-height: 1;
  position: relative; max-width: 100%;
}
.design-prototype .wordmark .brand-logo {
  display: inline-flex; font-size: inherit; margin: 0;
  max-width: 100%; color: var(--graphite);
}
.design-prototype .brand-mark { display: block; flex: 0 0 auto; width: 2rem; height: 1.6rem; }
.design-prototype .brand-mark-main { fill: currentColor; }
.design-prototype .brand-mark-accent { fill: var(--brand-accent); }
.design-prototype .brand-wordmark { display: block; flex: 0 1 auto; width: 8.5rem; height: auto; min-width: 0; }
.design-prototype .brand-logo .brand-name {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.design-prototype .brand-logo.brand-logo-inverse { color: var(--warm); }
.design-prototype .brand-logo-mono .brand-mark-accent { fill: currentColor; }
.design-prototype .wordmark > .brand-tagline { margin-top: .4rem; }
.design-prototype .brand-logo-footer { gap: .3rem; }
.design-prototype .brand-logo-footer .brand-mark { width: 1.5rem; height: 1.2rem; }
.design-prototype .brand-logo-footer .brand-wordmark { width: 6.5rem; }

/* The seam is a quiet orientation cue, never a decorative measurement scale. */
.design-prototype .brand-rule {
  position: absolute; inset: 0 0 auto; height: 1px;
  background: var(--line); pointer-events: none;
}
.design-prototype .brand-rule::after {
  content: ''; position: absolute; left: 0; top: -1px;
  width: var(--brand-edge); height: 3px; background: var(--brand-accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}
.design-prototype .brand-rule-quiet::after { background: var(--graphite); height: 2px; top: 0; }
.design-prototype .site-header { border-bottom-color: transparent; }
.design-prototype .site-header > .brand-rule { top: auto; bottom: -1px; }
.design-prototype .site-footer { position: relative; border-top-color: transparent; }
.design-prototype .site-footer .brand-rule { inset-inline: max(16px, calc((100% - 1320px) / 2)); }
.design-prototype :is(.cta-section, .hub-service-row, .pricing-block, .transport-cta) { position: relative; }
.design-prototype :is(.cta-section, .hub-service-row):has(> .brand-rule)::before { display: none; }
.design-prototype :is(.pricing-block, .transport-cta, .hub-outro, .guide-intro) { border-top-color: transparent; }
.design-prototype .dark-section > .brand-rule { --line: #545453; }

/* Fields occupy the existing illustration box; nothing is laid over prose or real work. */
.design-prototype :is(.composition-visual, .transport-visual, .hub-catalog-visual) {
  background: var(--brand-field); isolation: isolate;
}
.design-prototype .brand-field {
  position: absolute; inset: 0; z-index: -1; display: block;
  overflow: hidden; pointer-events: none;
}
.design-prototype .brand-field svg { display: block; width: 100%; height: 100%; }
.design-prototype .brand-field-main { fill: var(--brand-plane); }
.design-prototype .brand-field-pair { fill: var(--brand-pair); opacity: 0; }
.design-prototype .brand-field-paired .brand-field-pair { opacity: 1; }
.design-prototype .brand-field-edge { fill: var(--brand-accent); }
.design-prototype :is(.layout-wide, .transport-detail) .brand-field { opacity: .65; }
.design-prototype .dark-section {
  --brand-field: #333432; --brand-plane: #42423e; --brand-pair: #393a36;
}
.design-prototype .dark-section .composition-visual { background: var(--brand-field); }
.design-prototype .dark-section .brand-field { opacity: .8; }
.design-prototype :is(.composition-visual, .transport-visual, .hub-catalog-visual)::before {
  color: var(--secondary); z-index: 1;
}
.design-prototype .dark-section .composition-visual::before { color: var(--warm); }

/* Existing automotive silhouettes; a shared livery and a neutral material palette. */
.design-prototype .vehicle-body { stroke: #666760; }
.design-prototype .body-shell { fill: #f6f4ee; }
.design-prototype .vehicle-car .body-shell { fill: #d3d3cb; }
.design-prototype .vehicle-truck .body-shell { fill: #e3dfd4; }
.design-prototype .glass { fill: #6f7877; stroke: #4d5553; }
.design-prototype .graphic-panel { fill: #303330; }
.design-prototype .graphic-panel .livery-cut { fill: var(--brand-accent); }
.design-prototype .vehicle-shadow { fill: #797b74; opacity: .12; }
.design-prototype .tyre { fill: #282b29; stroke: #1d201e; }
.design-prototype .rim { fill: #acb0a9; stroke: #eceee7; }
.design-prototype .hub { fill: #686e67; }
.design-prototype .bumper { fill: #575c55; }
.design-prototype .headlight { fill: #fbfaf5; stroke: #959a90; }
.design-prototype .guides { stroke: #b6b5ad; opacity: .45; }
.design-prototype .layout-sheet { background: #fbfaf5; border-color: #c5c2b8; }
.design-prototype .layout-sheet i {
  background: linear-gradient(120deg, #303330 0 48%, var(--brand-accent) 48% 55%, #303330 55%);
}
.design-prototype .layout-swatches i { background: #303330; }
.design-prototype .layout-swatches i:nth-child(2) { background: var(--brand-accent); }
.design-prototype .layout-swatches i:nth-child(3) { background: #f6f4ee; }
.design-prototype .design-transport-card .vehicle-diagram { background: var(--brand-field); }
.design-prototype .composition-visual .vehicle-diagram,
.design-prototype .transport-visual .vehicle-diagram,
.design-prototype .hub-catalog-visual .vehicle-diagram { background: transparent; }
.design-prototype .transport-visual .hub-catalog-visual { background: transparent; }
.design-prototype .handoff-arrow { background: var(--brand-accent); }
.design-prototype .handoff-arrow::after { border-color: var(--brand-accent); }
.design-prototype .production-roles .section-content::before { background: var(--brand-accent); }

/* A few contained surfaces, with no extra panels behind everyday body copy. */
.design-prototype .hub-help { background: var(--brand-tint); }
.design-prototype .hub-outro { position: relative; }
.design-prototype .hub-contact-area { position: relative; }
.design-prototype .hub-contact-area > .brand-rule { inset-inline: 0; }
.design-prototype .pricing-block > div { position: relative; }
.design-prototype .pricing-block > div::after {
  content: ''; position: absolute; right: 0; top: 0; width: 26px; height: 26px;
  background: var(--brand-tint); clip-path: polygon(100% 0, 100% 100%, 42% 100%);
  pointer-events: none;
}
.design-prototype .portfolio-intro { position: relative; }
.design-prototype .portfolio-intro > .brand-rule { top: auto; bottom: 0; }
.design-prototype .portfolio-filters { border-top-color: transparent; }
.design-prototype .portfolio-brand-fragment {
  position: absolute; right: 0; top: 40px; color: #d6d3cb; pointer-events: none;
}
.design-prototype .portfolio-brand-fragment .brand-mark { width: 7.5rem; height: 6rem; }
.design-prototype .portfolio-brand-fragment .brand-mark-accent { fill: #ddd3c9; }
.design-prototype .work-caption { border-bottom: 1px solid var(--line); }
.design-prototype .portfolio-image { background: var(--brand-field); }
.design-prototype .portfolio-empty { background: var(--brand-field); }
.design-prototype .guide-intro { position: relative; border-bottom-color: transparent; }
.design-prototype .guide-intro > .brand-rule { top: auto; bottom: 0; }
.design-prototype .guide-eyebrow::before {
  content: ''; display: inline-block; width: 14px; height: 7px; margin-right: 10px;
  background: var(--brand-accent); clip-path: polygon(0 0, 100% 0, 71% 100%, 0 100%);
}
.design-prototype .guide-section#checklist { position: relative; isolation: isolate; }
.design-prototype .guide-section#checklist::before {
  content: ''; position: absolute; inset: 24px -24px -24px; z-index: -1;
  background: var(--brand-tint); pointer-events: none;
}

/* A field's small edge joins the current hero entrance. Large planes stay at rest. */
.design-prototype .brand-field.motion-entered .brand-field-edge {
  animation: brand-edge-enter var(--motion-slow) var(--motion-ease) both;
}
@keyframes brand-edge-enter {
  from { opacity: .65; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 64rem) {
  /* Wrap the menu before shrinking the identity, including enlarged text. */
  .design-prototype .site-header { display: flex; flex-wrap: wrap; }
  .design-prototype .brand-home { flex: 1 1 11rem; min-width: min(100%, 11rem); }
  .design-prototype .mobile-navigation { margin-left: auto; flex: 0 0 auto; }
  .design-prototype .mobile-navigation[open] { flex-basis: 100%; width: 100%; }
  .design-prototype .portfolio-brand-fragment .brand-mark { width: 5rem; height: 4rem; }
}
@media (max-width: 40rem) {
  .design-prototype { --brand-edge: 18px; }
  .design-prototype .wordmark .brand-logo { gap: .3rem; }
  .design-prototype .brand-logo-header .brand-mark { width: 1.5rem; height: 1.2rem; }
  .design-prototype .brand-logo-header .brand-wordmark { width: 7.75rem; }
  .design-prototype .brand-field-pair { display: none; }
  .design-prototype .brand-field-edge { opacity: .7; }
  .design-prototype .portfolio-brand-fragment { display: none; }
  .design-prototype .guide-section#checklist::before { inset: 20px -8px -16px; }
}
@media (prefers-reduced-motion: reduce) {
  .design-prototype .brand-field.motion-entered .brand-field-edge { animation: none; transform: none; opacity: 1; }
}
@media (forced-colors: active) {
  .design-prototype .brand-field, .design-prototype .portfolio-brand-fragment { display: none; }
  .design-prototype .brand-mark-accent { fill: currentColor; }
  .design-prototype .brand-rule { background: CanvasText; }
}