@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    min-width: 0 !important;
    font-size: 16px;
  }

  .page {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
  }

  .page > * {
    display: block !important;
  }

  img,
  iframe,
  video,
  table {
    max-width: 100%;
  }

  .header-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 18px 18px 16px !important;
    text-align: center;
  }

  .logo {
    display: flex;
    justify-content: center;
  }

  .logo img {
    width: 118px !important;
    margin: 0 !important;
  }

  .top-benefit,
  .top-benefits {
    display: none !important;
  }

  .header-phone {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .header-phone strong,
  .header-phone span {
    text-align: center !important;
    white-space: normal !important;
  }

  .callback-btn {
    width: 100% !important;
    max-width: 340px;
    height: 46px !important;
    margin: 0 auto !important;
    justify-self: center !important;
  }

  .nav {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px 14px !important;
    height: auto !important;
    padding: 13px 14px !important;
  }

  .nav a {
    font-size: 11px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    text-align: center;
  }

  .nav-item {
    height: auto !important;
    gap: 0 !important;
  }

  .nav-caret,
  .nav-dropdown,
  .nav a.active::after {
    display: none !important;
  }

  .hero,
  .projects-hero {
    min-height: auto !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .hero-inner,
  .projects-hero-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 34px 18px !important;
    transform: none !important;
  }

  .hero-copy,
  .hero-left,
  .hero-note,
  .hero-card,
  .hero-side-card {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
  }

  .hero-card,
  .hero-note,
  .hero-side-card {
    padding: 18px !important;
  }

  .hero h1,
  .hero-title,
  .projects-hero h1 {
    max-width: 100% !important;
    font-size: 28px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
  }

  .hero p,
  .hero-subtitle,
  .hero-lead,
  .projects-hero p {
    width: auto !important;
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .hero-tags,
  .hero-actions,
  .hero-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .hero-tags span,
  .hero-btn,
  .primary-btn,
  .ghost-btn {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center;
  }

  .hero-perks,
  .contact-strip,
  .product-row,
  .process-grid,
  .bottom-perks,
  .cta-perks,
  .stats,
  .values-grid,
  .company-points,
  .services,
  .projects,
  .feature-list,
  .production,
  .cert-grid,
  .project-grid,
  .category-grid,
  .equipment-layout,
  .contacts-grid,
  .about-grid,
  .main-grid,
  .footer-top,
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: auto !important;
    max-width: none !important;
    gap: 18px !important;
  }

  .content,
  .section,
  .services-shell,
  .projects-shell {
    width: 100% !important;
    margin: 0 !important;
    padding: 30px 18px !important;
  }

  .panel,
  .span-4,
  .span-6,
  .span-8,
  .equipment-card,
  .project-card,
  .category-card,
  .service-row,
  .visit-card,
  .map-card,
  .locations-card,
  .consult-card,
  .values,
  .stat,
  .cta {
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .service-row,
  .service-row.reverse {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 18px !important;
  }

  .service-row.reverse .service-media,
  .service-row.reverse .service-copy {
    order: initial !important;
  }

  .service-media img,
  .project-card img,
  .category-card img,
  .equipment-card img,
  .object-card img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .equipment-card.featured {
    grid-row: auto !important;
  }

  .equipment-card.featured img {
    min-height: 0 !important;
  }

  .equipment-intro,
  .panel-head,
  .process-head {
    display: block !important;
    width: 100% !important;
  }

  .section-title,
  .panel-title,
  .service-copy h2 {
    font-size: 24px !important;
    line-height: 1.18 !important;
  }

  .project-tabs,
  .filter-row,
  .breadcrumbs {
    display: flex !important;
    flex-wrap: wrap;
    width: 100% !important;
  }

  .geo-map-container,
  .map-box {
    width: 100% !important;
    min-height: 320px !important;
    height: 320px !important;
  }

  .map-card {
    grid-template-rows: auto !important;
  }

  .map-popup {
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .visit-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: start;
    padding: 20px !important;
  }

  .visit-card a,
  .service-btn,
  .cta a,
  .cta-btn,
  .consult-card a {
    width: 100% !important;
  }

  .cta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 24px 18px !important;
  }

  .footer {
    padding: 34px 18px 22px !important;
  }

  .footer-brand p,
  .footer-contact-line,
  .footer-nav,
  .footer-docs,
  .footer-contacts {
    max-width: none !important;
  }

  .footer-contact-line {
    grid-template-columns: 18px 1fr !important;
    gap: 10px !important;
  }

  .footer-contact-line span,
  .footer-contact-line svg,
  .footer-address-block {
    transform: none !important;
    left: auto !important;
  }

  .footer-address-line {
    margin-left: 0 !important;
    white-space: normal !important;
  }

  table {
    min-width: 760px !important;
  }

  .registry-scroll {
    overflow-x: auto !important;
  }
}

@media (max-width: 520px) {
  .hero h1,
  .hero-title,
  .projects-hero h1 {
    font-size: 24px !important;
  }

  .content,
  .section,
  .services-shell,
  .projects-shell {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .service-row {
    padding: 14px !important;
  }
}


@media (max-width: 900px) {
  .hero-feature-row,
  .grid,
  .content > .grid,
  .projects-hero-grid > *,
  .main-grid > *,
  .content > *,
  .section > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .grid,
  .content > .grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 18px !important;
  }

  .panel,
  .equipment-card,
  .project-card,
  .category-card {
    width: auto !important;
    justify-self: stretch !important;
  }

  .hero-feature-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin: 22px 0 0 !important;
    transform: none !important;
    gap: 16px !important;
  }

  .hero-feature {
    grid-template-columns: 1fr !important;
    justify-content: start !important;
    justify-items: start !important;
    padding: 0 !important;
    transform: none !important;
  }

  .hero-feature::after {
    display: none !important;
  }

  .hero-feature-quality span {
    white-space: normal !important;
  }

  .geo-ambient {
    display: none !important;
  }

  .geo-section,
  .geo-map-container,
  .geo-map-card,
  .geo-map,
  .geo-map svg {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .hero-side-card {
    justify-self: stretch !important;
  }

  .registry,
  .registry-scroll {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .registry-scroll {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 520px) {
  .hero-feature-row {
    grid-template-columns: 1fr !important;
  }
}


@media (max-width: 900px) {
  .districts-panel,
  .district-grid,
  .metrics,
  .production-strip,
  .production-strip-copy {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  .districts-panel h3 {
    padding-left: 0 !important;
  }

  .district-shape,
  .district-shape img {
    width: 100% !important;
    max-width: 100% !important;
  }

  .metric-card {
    display: grid !important;
    grid-template-columns: 42px 1fr !important;
    width: 100% !important;
  }

  .metric-card > div,
  .metric-card strong,
  .metric-card span {
    width: auto !important;
    max-width: 100% !important;
  }

  .production-strip {
    gap: 16px !important;
    padding: 18px !important;
  }

  .production-strip-btn {
    width: 100% !important;
    max-width: 100% !important;
  }
}


@media (max-width: 900px) {
  .filter-grid,
  .examples-grid,
  .category-section,
  .category-grid,
  .project-categories {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 18px !important;
  }

  .project-categories-subtitle {
    white-space: normal !important;
  }
}


@media (max-width: 900px) {
  .category-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .category-card-body {
    min-width: 0 !important;
    padding: 18px !important;
  }

  .category-card-top {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .category-badge {
    max-width: 100% !important;
    white-space: normal !important;
  }
}


@media (max-width: 900px) {
  .projects-hero {
    padding: 0 !important;
    background: linear-gradient(180deg, #071c37 0%, #0d2f59 100%) !important;
  }

  .projects-hero::before {
    display: none !important;
  }

  .projects-hero-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 34px 18px 22px !important;
  }

  .projects-hero .hero-copy {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .projects-hero .hero-copy h1 {
    margin: 0 0 16px !important;
    font-size: 27px !important;
    line-height: 1.1 !important;
    color: #fff !important;
  }

  .projects-hero .hero-copy p {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.58 !important;
    color: rgba(232, 241, 255, .9) !important;
  }

  .projects-hero .map-frame-wrap,
  .projects-hero .map-inline,
  .projects-hero .geo-section {
    display: none !important;
  }

  .projects-hero .hero-side-card {
    display: grid !important;
    min-height: 0 !important;
    padding: 20px !important;
    margin: 4px 0 0 !important;
    border-radius: 8px !important;
    background: rgba(18, 30, 50, .82) !important;
  }

  .projects-hero .hero-side-card h2 {
    margin: 0 0 16px !important;
    font-size: 22px !important;
    line-height: 1.18 !important;
  }

  .projects-hero .hero-side-list {
    display: grid !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .projects-hero .hero-side-list li {
    grid-template-columns: 18px 1fr !important;
    gap: 10px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .projects-hero .hero-side-btn {
    width: 100% !important;
    height: 48px !important;
    margin: 18px 0 0 !important;
  }
}


@media (max-width: 900px) {
  .projects-hero .projects-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 18px !important;
    padding: 34px 18px 22px !important;
  }

  .projects-hero .projects-hero-grid > * {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .projects-hero .hero-copy,
  .projects-hero .hero-side-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }
}


@media (max-width: 900px) {
  .production-strip,
  .cta,
  .cta-copy,
  .cta-perks {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .cta-copy {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
  }

  .cta h2,
  .cta p {
    max-width: 100% !important;
    text-align: left !important;
  }

  .cta h2 {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }

  .cta p {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }

  .cta-btn {
    justify-self: stretch !important;
  }
}

@media (max-width: 520px) {
  .cta h2 {
    font-size: 26px !important;
  }

  .cta p {
    font-size: 17px !important;
  }
}


@media (max-width: 900px) {
  html,
  body {
    background: #0b1320 !important;
  }

  .page {
    display: flow-root !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  footer,
  .footer {
    display: block !important;
    margin-bottom: 0 !important;
    padding-bottom: max(22px, env(safe-area-inset-bottom)) !important;
    background-color: #0b1320 !important;
  }

  body > .lead-modal:not(.is-open),
  body > .lead-modal[hidden] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}