/* Responsive fixes for phones, tablets, iOS/Android */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

:where(input, textarea, select, button) {
  max-width: 100%;
}

:where(.container, .panel, .card, .project-card, .team-info-card, .team-structure-card, .svc-card, .admin-card, .dash-card, .team-cta-card) {
  min-width: 0;
}

:where(.hero-grid, .split, .services-grid, .projects-grid, .footer-grid, .team-info-grid, .team-structure-grid, .team-hero-stats, .svc-cards, .culture-hero-grid, .culture-pillars, .provider-grid, .mini-stats, .grid, .dash-grid) > * {
  min-width: 0;
}

:where(.brand, .menu, .section-head, .footer-top, .team-cta-actions, .admin-toolbar, .admin-filters, .dash-top, .project-meta-row, .notice-inner, .maint-inner, .trustpilot-link) {
  min-width: 0;
}

:where(.brand span, .section-head h2, .hero-title-row h1, .svc-card-title, .s-title, .footer-logo h3) {
  overflow-wrap: anywhere;
}

/* Better mobile menu across pages that override .menu on small screens */
@media (max-width: 900px) {
  body {
    background-attachment: scroll !important;
  }

  #site-header {
    padding-top: env(safe-area-inset-top, 0px);
  }

  #site-header .nav {
    min-height: 68px;
    gap: 10px;
  }

  #site-header .brand {
    min-width: 0;
    flex: 1 1 auto;
  }

  #site-header .brand span {
    max-width: calc(100vw - 156px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #site-header .nav-toggle {
    display: inline-flex !important;
    flex: 0 0 auto;
  }

  #site-header .menu {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 72px) !important;
    left: 12px !important;
    right: 12px !important;
    display: grid !important;
    grid-auto-flow: row;
    gap: 8px;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 92px);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 14px !important;
    border-radius: 18px;
    background: rgba(8, 12, 24, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px) scale(.98);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    z-index: 62;
  }

  body.nav-open #site-header .menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  #site-header .menu a,
  #site-header .menu .cta {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 1024px) {
  .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero,
  .section,
  section {
    scroll-margin-top: 96px;
  }

  .hero,
  .hero.team-hero {
    padding-top: 96px !important;
  }

  .panel,
  .card,
  .project-card,
  .svc-card,
  .team-info-card,
  .team-structure-card,
  .team-cta-card,
  .dash-card {
    padding: 16px !important;
  }

  .section-head {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px;
  }

  .section-head.section-head-center,
  .team-structure .section-head,
  .team-structure .section-head.section-head-center {
    align-items: center !important;
    text-align: center;
  }

  .footer-bottom {
    gap: 10px;
  }
}

@media (max-width: 820px) {
  .hero-title-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .hero-banner-bottom,
  .hero-mini-metrics,
  .ecosystem-strip,
  .footer-top,
  .footer-bottom,
  .trustpilot-link,
  .admin-toolbar,
  .admin-filters,
  .dash-top {
    flex-direction: column;
    align-items: stretch !important;
  }

  .hero-mini-metrics div,
  .trustpilot-link,
  .footer-bottom p {
    text-align: left !important;
  }

  .ecosystem-strip {
    border-radius: 24px;
  }

  .ecosystem-strip .tags,
  .team-cta-actions,
  .admin-filters,
  .dash-actions,
  .row {
    width: 100%;
  }

  .project-meta-row,
  .field-meta,
  .summary-tags,
  .socials,
  .footer-socials,
  .member-socials {
    flex-wrap: wrap;
  }

  /* Status rows */
  .s-row-btn {
    align-items: flex-start !important;
    flex-wrap: wrap;
  }

  .s-left,
  .s-mid,
  .s-right,
  .uptime {
    width: 100%;
    min-width: 0 !important;
    max-width: none !important;
  }

  .s-right {
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 10px;
  }

  .s-sub {
    display: block;
    margin-left: 0;
    margin-top: 4px;
  }

  .svc-card-grid,
  .provider-grid,
  .mini-stats {
    grid-template-columns: 1fr !important;
  }

  /* Admin */
  .admin-shell,
  main.admin-shell {
    padding-top: 96px !important;
    padding-bottom: 48px !important;
  }

  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .row[style*="flex-wrap:nowrap"] {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 640px) {
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  h1,
  .hero-title-row h1 {
    line-height: 1.08 !important;
    letter-spacing: .06em;
  }

  .hero .lead,
  .lead,
  .section-head .small,
  .team-info-card p,
  .team-structure-card p,
  .svc-card-sub,
  .svc-last,
  .footer-grid p,
  .hint {
    font-size: .92rem;
  }

  .btn,
  .cta,
  .menu .cta,
  .dash-actions a.btn {
    min-height: 44px;
  }

  .badge,
  .hero-pill,
  .hero-tag,
  .pill,
  .ef-team-pill,
  .status-pill,
  .summary-tag,
  .team-tag {
    max-width: 100%;
    white-space: normal;
  }

  .hero-stat-pill,
  .trustpilot-link,
  .ecosystem-strip,
  .team-cta-card,
  .info-card-top,
  .summary-card,
  .provider-box,
  .notice-card,
  .maint-card,
  .svc-card {
    border-radius: 18px;
  }

  .team-hero-card,
  .hero-banner,
  .panel,
  .card,
  .project-card,
  .team-info-card,
  .team-structure-card,
  .team-cta-card,
  .svc-card,
  .dash-card,
  .admin-card {
    padding: 14px !important;
  }

  .hero-banner-bottom,
  .hero-stat-bar,
  .summary-tags,
  .timeline-item,
  .form-progress-head,
  .row,
  #contact-form .row,
  .bandi-form .row,
  .svc-card-grid,
  .footer-grid,
  .provider-grid,
  .status-cards,
  .svc-cards,
  .projects-grid,
  .services-grid,
  .team-info-grid,
  .team-structure-grid,
  .team-hero-stats {
    grid-template-columns: 1fr !important;
  }

  .hero-banner-bottom,
  .hero-stat-bar,
  .info-card-top,
  .form-progress-head,
  .timeline-item,
  .field-meta,
  .provider-meta,
  .notice-meta,
  .maint-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
  }

  .timeline-item,
  .summary-card,
  .notice-inner,
  .maint-inner {
    gap: 10px !important;
  }

  .s-row-btn {
    padding: 14px;
  }

  .s-title,
  .svc-card-title {
    font-size: 1.05rem !important;
  }

  .hero-banner-title strong,
  .hero-mini-metrics b,
  .s-uptime,
  .team-structure-card strong {
    font-size: 1rem !important;
  }

  .uptime {
    overflow: hidden;
  }

  .uptime .tick {
    flex: 1 1 4px;
    min-width: 4px;
  }

  .ef-team-card,
  .ef-team-card.is-active {
    height: auto !important;
    min-height: 400px;
  }

  .ef-team-content {
    position: relative;
    inset: auto !important;
    margin: 180px 10px 10px;
  }

  .ef-team-bio,
  .ef-team-focus,
  .ef-team-meta,
  .ef-team-social,
  .ef-team-card.is-open .ef-team-bio,
  .ef-team-card.is-open .ef-team-focus,
  .ef-team-card.is-open .ef-team-meta,
  .ef-team-card.is-open .ef-team-social,
  .ef-team-card.is-active .ef-team-bio,
  .ef-team-card.is-active .ef-team-focus,
  .ef-team-card.is-active .ef-team-meta,
  .ef-team-card.is-active .ef-team-social {
    max-height: none;
    opacity: 1;
    transform: none;
  }

  .ef-team-meta a,
  .ef-team-meta span {
    white-space: normal !important;
  }

  .row[style*="flex-wrap:nowrap"] > * {
    width: 100%;
  }
}

@media (max-width: 480px) {
  #site-header .menu {
    left: 10px !important;
    right: 10px !important;
    top: calc(env(safe-area-inset-top, 0px) + 68px) !important;
    padding: 12px !important;
  }

  .logo-box {
    width: 42px !important;
    height: 42px !important;
  }

  .brand {
    gap: 10px !important;
  }

  .brand span {
    font-size: .72rem !important;
    letter-spacing: .08em !important;
  }

  .hero,
  .hero.team-hero,
  .section,
  section {
    padding-top: 26px;
  }

  .hero {
    padding-top: 88px !important;
    padding-bottom: 34px !important;
  }

  .hero-banner img {
    height: 180px !important;
  }

  .hero-stat-pill,
  .project-card,
  .panel,
  .card,
  .team-info-card,
  .team-structure-card,
  .team-cta-card,
  .svc-card,
  .dash-card {
    padding: 12px !important;
  }

  .actions,
  .dash-actions,
  .socials,
  .footer-socials {
    gap: 8px !important;
  }

  .btn,
  .cta,
  .menu a,
  .dash-actions a.btn,
  button {
    width: 100%;
  }
}

/* Shop overlays */
@media (max-width: 640px) {
  .modal-backdrop {
    padding: 10px !important;
  }

  .modal,
  .modal-info,
  .modal-img {
    border-radius: 18px !important;
  }

  .modal-head,
  .modal-body,
  .cart-head,
  .cart-list,
  .cart-foot {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .modal-actions {
    flex-direction: column;
  }

  .cart-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    right: -100vw !important;
  }

  .cart-drawer.open {
    right: 0 !important;
  }

  .cart-item {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .cart-item h4 {
    overflow-wrap: anywhere;
  }
}


/* Extra stability fixes */
html {
  scroll-padding-top: 96px;
}

:where(h1, h2, h3, p, a, span, strong, small, label, td, th, li) {
  overflow-wrap: anywhere;
}

:where(.panel, .card, .project-card, .svc-card, .team-info-card, .team-structure-card, .team-cta-card, .hero-banner, .team-hero-card, .dash-card, .admin-table-wrap, .modal, .cart-drawer) {
  overflow: hidden;
}

:where(.project-image, .hero-banner img, .ef-team-media img, .team-photo img, .svc-card img) {
  max-width: 100%;
}

@media (max-width: 820px) {
  :where(.hero-banner-top, .hero-banner-bottom, .hero-stat-bar, .actions, .project-actions, .team-cta-actions, .footer-socials) {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  :where(.hero-banner-top, .hero-banner-bottom, .hero-stat-bar, .project-actions, .team-cta-actions, .footer-socials) > * {
    width: 100%;
  }

  :where(.project-meta-row span, .ef-team-meta a, .ef-team-meta span, .status-pill, .badge) {
    width: 100%;
  }
}