@media (min-width: 320px) {
  h1 {
    font-size: var(--bx-font-size-xl);
  }

  h2 {
    font-size: var(--bx-font-size-lg);
  }

  .header-actions .btn {
    display: none;
  }

  .stats-grid,
  .services-grid,
  .disciplines-grid,
  .dashboard-card-grid,
  .portal-grid,
  .route-grid {
    grid-template-columns: 1fr;
  }

  .mockup-body {
    grid-template-columns: 1fr;
  }

  .hub-node {
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
  }

  .hub-ring {
    position: relative;
    z-index: 3;
    display: grid;
    gap: var(--bx-space-sm);
    padding: 170px var(--bx-space-lg) var(--bx-space-lg);
  }

  .hub-core {
    top: 86px;
  }
}

@media (min-width: 768px) {
  h1 {
    font-size: var(--bx-font-size-xl);
  }

  h2 {
    font-size: var(--bx-font-size-lg);
  }

  .container {
    width: min(calc(100% - (var(--bx-shell-padding-x) + var(--bx-shell-padding-x))), var(--bx-content-max-width));
  }

  .header-actions .btn {
    display: inline-flex;
  }

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

  .services-grid,
  .disciplines-grid,
  .dashboard-card-grid,
  .route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.68fr);
  }

  .editorial-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(280px, 0.48fr);
  }

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

  .contact-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .footer-grid {
    grid-template-columns: 1.4fr repeat(4, 1fr);
  }

  .hub-ring {
    position: static;
    display: block;
    padding: 0;
  }

  .hub-node {
    position: absolute;
    width: auto;
  }

  .hub-node-1 {
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
  }

  .hub-node-2 {
    top: 25%;
    right: 8%;
  }

  .hub-node-3 {
    right: 7%;
    bottom: 22%;
  }

  .hub-node-4 {
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
  }

  .hub-node-5 {
    left: 7%;
    bottom: 22%;
  }

  .hub-node-6 {
    top: 25%;
    left: 8%;
  }

  .hub-node-7 {
    top: 50%;
    left: 4%;
    transform: translateY(-50%);
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: var(--bx-font-size-xl);
  }

  h2 {
    font-size: var(--bx-font-size-lg);
  }

  .desktop-nav {
    display: flex;
  }

  .hero-grid,
  .systems-grid {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.86fr);
  }

  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .disciplines-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-title {
    font-size: var(--bx-title-size);
  }

  .hero-copy h1 {
    font-size: var(--text-hero);
  }
}

@media (min-width: 1280px) {
  .hero-section {
    padding-top: var(--bx-space-2xl);
  }

  .dashboard-mockup {
    max-width: 560px;
  }
}

@media (max-width: 767px) {
  .section {
    padding: var(--bx-section-gap) 0;
  }

  .hero-section {
    padding-top: var(--bx-space-2xl);
  }

  .contact-form,
  .account-placeholder,
  .auth-form,
  .text-frame,
  .text-panel,
  .portal-card,
  .route-card,
  .crud-toolbar,
  .crud-empty,
  .crud-form-panel,
  .crud-delete-warning,
  .crud-detail-card,
  .management-panel,
.planning-panel,
  .relation-card,
  .role-level {
    padding: var(--bx-space-lg);
  }

  .access-control-card,
  .access-policy-panel,
  .profile-identity-card,
  .profile-control-card,
  .activity-panel {
    padding: var(--bx-space-lg);
  }

  .security-account-panel {
    padding: var(--bx-space-lg);
  }

  .ownership-scope-panel {
    padding: var(--bx-space-lg);
  }

  .property-media-placeholder,
  .property-entry-card,
  .property-content-panel,
  .property-location-panel,
  .property-assignment-panel,
  .property-history-panel,
  .property-decision-card,
  .property-form-section,
  .property-empty-state {
    padding: var(--bx-space-lg);
  }

  .property-hero {
    padding-top: 104px;
  }

  .property-detail-heading {
    align-items: stretch;
  }

  .property-location-panel dl > div,
  .property-assignment-panel dl > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .media-library-hero,
  .media-form-hero {
    padding-top: 104px;
  }

  .media-upload-form,
  .media-upload-policy,
  .media-metadata-panel,
  .media-decision-card,
  .media-empty-state,
  .public-media-documents {
    padding: var(--bx-space-lg);
  }

  .media-upload-policy {
    position: static;
  }

  .media-metadata-panel dl > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .media-detail-preview {
    min-height: 300px;
  }

  .public-gallery-item.is-primary {
    min-height: 320px;
  }

  .client-intelligence-hero,
  .client-list-hero,
  .client-form-hero,
  .client-profile-hero,
  .client-related-hero,
  .client-self-hero {
    padding-top: 104px;
  }

  .client-intelligence-map,
  .client-capability-grid article,
  .client-filter-panel,
  .client-registry-card,
  .client-empty-state,
  .client-info-panel,
  .client-budget-panel,
  .client-assignment-panel,
  .client-notes-panel,
  .client-internal-notes,
  .client-status-history,
  .client-related-form,
  .client-decision-card,
  .client-form-section {
    padding: 22px;
  }

  .client-info-panel dl > div,
  .client-assignment-panel dl > div,
  .client-preference-grid dl > div,
  .client-interest-grid dl > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .request-workflow-hero,.request-board-hero,.request-form-hero,.request-profile-hero,.request-related-hero,.request-portal-hero{padding-top:104px}
  .request-route-map,.request-capability-grid article,.request-filter-panel,.request-workflow-card,.request-empty-state,.request-summary-panel,.request-next-action,.request-relation-panel,.request-assignment-panel,.request-internal-notes,.request-history-panel,.request-related-form,.request-decision-card,.request-portal-form,.request-portal-list>article{padding:22px}
  .request-match-grid dl>div,.request-assignment-panel dl>div{grid-template-columns:1fr;gap:5px}

  .ownership-facts p {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .ownership-facts strong {
    text-align: left;
  }

  .security-fact {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .security-fact strong {
    text-align: left;
  }

  .permission-matrix-head {
    display: none;
  }

  .permission-matrix-row {
    grid-template-columns: 1fr;
    gap: var(--bx-space-sm);
    padding: var(--bx-space-lg) var(--bx-space-md);
  }

  .crud-toolbar {
    align-items: start;
    flex-direction: column;
  }

  .crud-table,
  .crud-table thead,
  .crud-table tbody,
  .crud-table th,
  .crud-table td,
  .crud-table tr {
    display: block;
  }

  .crud-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .crud-table tr {
    border-bottom: 1px solid rgba(141, 146, 153, 0.14);
    padding: var(--bx-space-sm) 0;
  }

  .crud-table td {
    display: grid;
    grid-template-columns: minmax(96px, 0.42fr) 1fr;
    gap: 12px;
    padding: var(--bx-space-sm) var(--bx-space-md);
    border-bottom: 0;
  }

  .crud-table td::before {
    content: attr(data-label);
    color: var(--color-gold-light);
    font-family: var(--font-data);
    font-size: var(--text-micro);
    font-weight: 800;
    text-transform: uppercase;
  }

  .crud-inline-actions {
    justify-content: flex-start;
  }

  .page-hero {
    min-height: auto;
    padding: calc(var(--header-height) + var(--bx-space-lg)) 0 var(--bx-space-xl);
  }

  .page-title {
    font-size: var(--text-2xl);
    max-width: 100%;
  }

  .page-lead {
    font-size: var(--bx-font-size-base);
  }

  .hero-copy h1 {
    font-size: var(--text-3xl);
  }

  .hero-copy h2,
  .editorial-title,
  .luxury-heading {
    font-size: var(--text-2xl);
  }

  .meta-strip {
    gap: 6px;
  }

  .meta-strip span {
    min-height: var(--bx-control-height-sm);
    padding: 0 var(--bx-space-sm);
  }
}

/* Phase 22.1 real-browser surface scale calibration */
@media (min-width: 768px) {
  body.has-auth-sidebar .container {
    width: min(calc(100% - (var(--bx-shell-padding-x) + var(--bx-shell-padding-x))), var(--bx-content-wide-max-width));
  }

  body.has-auth-sidebar :where(.text-frame, .text-panel).container {
    max-width: var(--bx-content-wide-max-width);
  }

  body.has-auth-sidebar :where(
    .dashboard-card-grid,
    .portal-grid,
    .route-grid,
    .crud-shell,
    .route-testing-shell,
    .profile-control-grid,
    .property-entry-grid,
    .client-registry-grid,
    .request-board-grid,
    .deal-board-grid,
    .crm-module-grid,
    .crm-card-grid,
    .crm-dashboard-grid,
    .crm-relation-grid,
    .crm-task-board,
    .erp-stat-grid,
    .erp-link-grid,
    .erp-module-grid,
    .erp-page-grid,
    .vault-stat-grid,
    .vault-command-grid,
    .vault-policy-grid,
    .notification-grid,
    .notification-preference-grid
  ) {
    gap: var(--bx-grid-gap);
  }

  body.has-auth-sidebar :where(
    .dashboard-card,
    .dashboard-note,
    .text-frame,
    .text-panel,
    .crud-toolbar,
    .crud-table-wrap,
    .crud-empty,
    .crud-form-panel,
    .crud-delete-warning,
    .crud-detail-card,
    .route-warning-banner,
    .route-summary-grid article,
    .route-filter-panel,
    .route-group-section,
    .route-empty-state,
    .profile-control-card,
    .property-entry-card,
    .property-filter-panel,
    .property-empty-state,
    .client-filter-panel,
    .client-registry-card,
    .client-empty-state,
    .request-filter-panel,
    .request-workflow-card,
    .request-empty-state,
    .deal-filter-panel,
    .deal-pipeline-card,
    .deal-empty-state,
    .crm-signal,
    .crm-board,
    .crm-card,
    .crm-form,
    .crm-module-grid > a,
    .crm-relation-grid > article,
    .crm-detail-aside > article,
    .crm-task-board article,
    .erp-readiness-dial,
    .erp-stat-grid article,
    .erp-link-grid a,
    .erp-module-card,
    .erp-page-card,
    .erp-readiness-grid article,
    .erp-architecture-grid article,
    .erp-blueprint-sidebar section,
    .erp-module-strip a,
    .vault-health,
    .vault-access-panel,
    .vault-warning-board,
    .vault-action-panel,
    .vault-reveal-panel,
    .vault-stat-grid article,
    .vault-policy-card,
    .vault-metadata-board,
    .vault-form-shell,
    .vault-form-panel,
    .notification-card,
    .notification-detail-panel
  ) {
    padding: var(--bx-surface-padding);
  }

  body.has-auth-sidebar :where(
    .dashboard-card,
    .profile-control-card,
    .property-entry-card,
    .client-registry-card,
    .request-workflow-card,
    .deal-pipeline-card,
    .crm-card,
    .crm-module-grid > a,
    .crm-relation-grid > article,
    .crm-task-board article,
    .erp-module-card,
    .vault-stat-grid article,
    .notification-card,
    .notification-detail-panel
  ) {
    min-height: var(--bx-card-min-height);
  }

  body.has-auth-sidebar :where(
    .crm-board,
    .erp-readiness-dial,
    .vault-health,
    .route-group-section,
    .crud-table-wrap,
    .route-table-wrap
  ) {
    min-height: var(--bx-panel-min-height);
  }

  body.has-auth-sidebar .dashboard-card {
    min-height: var(--bx-dashboard-card-min-height);
  }

  body.has-auth-sidebar :where(.page-title, .erp-hero h1, .erp-page-head h1, .vault-hero h1, .vault-page-head h1) {
    font-size: var(--bx-title-size);
  }

  body.has-auth-sidebar :where(.page-lead, .erp-hero-copy > p:not(.erp-kicker), .vault-hero p, .vault-page-head p) {
    font-size: var(--bx-description-size);
  }

  body.has-auth-sidebar :where(
    .crud-input,
    .route-filter-input,
    .property-input,
    .client-input,
    .request-input,
    .deal-input,
    .crm-input,
    .vault-form input:not([type="checkbox"]),
    .vault-form select,
    .vault-form textarea,
    .vault-filter-bar input,
    .vault-filter-bar select
  ) {
    min-height: var(--bx-input-height);
    font-size: var(--bx-font-size-sm);
  }

  body.has-auth-sidebar :where(.btn, .btn-small, .vault-badge, .crm-badge, .deal-status, .deal-priority, .notification-badge) {
    font-size: var(--bx-btn-font);
  }

  body.has-auth-sidebar :where(.route-table th, .route-table td, .crud-table th, .crud-table td, .crm-report-row > *, .vault-table th, .vault-table td) {
    font-size: var(--bx-table-font);
    padding-block: var(--bx-table-cell-py);
    padding-inline: var(--bx-table-cell-px);
  }
}

/* Phase 22.2 smart visual alignment calibration */
@media (min-width: 768px) {
  body.has-auth-sidebar :where(.page-shell, .dashboard-shell) {
    justify-items: stretch;
  }

  body.has-auth-sidebar .dashboard-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, var(--bx-page-align-wide));
    margin-inline: auto;
    justify-content: center;
    justify-items: center;
    text-align: center;
  }

  body.has-auth-sidebar .dashboard-header .copy-stack {
    width: min(100%, var(--bx-page-detail-max));
    margin-inline: auto;
    justify-self: center;
    justify-items: center;
  }

  body.has-auth-sidebar .dashboard-header .copy-stack :where(.eyebrow, .luxury-heading, .luxury-lead) {
    margin-inline: auto;
  }

  body.has-auth-sidebar .dashboard-header :where(.dashboard-actions, .action-row),
  body.has-auth-sidebar .dashboard-header .dashboard-badge {
    justify-self: center;
    justify-content: center;
  }

  body.has-auth-sidebar :where(
    .text-frame.editorial-shell,
    .crm-list-head,
    .property-header-row,
    .client-list-heading,
    .deal-board-heading,
    .deal-overview-heading,
    .vault-page-head,
    .vault-hero-grid > div:first-child,
    .erp-hero-copy,
    .erp-page-head
  ) {
    justify-items: center;
    text-align: center;
  }

  body.has-auth-sidebar :where(
    .crm-list-head,
    .property-header-row,
    .client-list-heading,
    .deal-board-heading,
    .deal-overview-heading
  ) {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, var(--bx-page-align-wide));
    margin-inline: auto;
  }

  body.has-auth-sidebar :where(
    .text-frame.editorial-shell,
    .crm-list-head > div:first-child,
    .property-header-row > div:first-child,
    .client-list-heading > div:first-child,
    .deal-board-heading > div:first-child,
    .deal-overview-heading > div:first-child,
    .vault-page-head > *,
    .vault-hero-grid > div:first-child,
    .erp-hero-copy,
    .erp-page-head
  ) {
    max-width: var(--bx-page-detail-max);
    margin-inline: auto;
  }

  body.has-auth-sidebar :where(
    .text-frame.editorial-shell,
    .crm-list-head,
    .property-header-row,
    .client-list-heading,
    .deal-board-heading,
    .deal-overview-heading,
    .vault-page-head,
    .vault-hero-grid,
    .erp-hero-grid,
    .erp-page-head
  ) :where(.page-title, h1, .page-lead, .page-summary, p) {
    margin-inline: auto;
  }

  body.has-auth-sidebar :where(
    .crm-list-head,
    .property-header-row,
    .client-list-heading,
    .deal-board-heading,
    .deal-overview-heading,
    .vault-page-head,
    .erp-page-head
  ) :where(.action-row, .crm-action-row, .vault-action-row, .btn, a.btn) {
    justify-self: center;
    justify-content: center;
  }

  body.has-auth-sidebar :where(
    .crud-shell,
    .profile-control-grid,
    .property-entry-grid,
    .client-registry-grid,
    .request-board-grid,
    .deal-board-grid,
    .crm-task-board,
    .notification-grid,
    .vault-table-wrap,
    .crud-table-wrap,
    .route-table-wrap
  ) {
    text-align: start;
    justify-items: stretch;
  }

  body.has-auth-sidebar :where(
    .crud-table,
    .route-table,
    .vault-table,
    .property-entry-card,
    .client-registry-card,
    .request-workflow-card,
    .deal-pipeline-card,
    .notification-card,
    .crm-card,
    .profile-control-card
  ) {
    text-align: start;
  }

  body.has-auth-sidebar :where(
    .crm-form-shell,
    .crm-form,
    .crud-form-shell,
    .crud-form-panel,
    .property-form-section,
    .client-related-form,
    .vault-form-shell,
    .vault-form-panel
  ) {
    width: min(100%, var(--bx-page-align-max));
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  body.has-auth-sidebar .container {
    width: min(calc(100% - (var(--bx-shell-padding-x) + var(--bx-shell-padding-x))), 100%);
  }

  body.has-auth-sidebar :where(.dashboard-card, .notification-card, .notification-detail-panel, .client-registry-card) {
    min-height: auto;
  }

  body.has-auth-sidebar :where(
    .dashboard-header,
    .text-frame.editorial-shell,
    .crm-list-head,
    .property-header-row,
    .client-list-heading,
    .deal-board-heading,
    .deal-overview-heading,
    .vault-page-head,
    .erp-page-head
  ) {
    justify-items: center;
    text-align: center;
  }

  body.has-auth-sidebar :where(
    .dashboard-header,
    .crm-list-head,
    .property-header-row,
    .client-list-heading,
    .deal-board-heading,
    .deal-overview-heading
  ) :where(.action-row, .dashboard-actions, .btn, a.btn) {
    justify-content: center;
  }
}