/* v4.1 global responsive safety net */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%}
*,*::before,*::after{min-width:0}
.services-container,.projects-container,.contact-shell,.consult-container,.shell,.blog-v40__shell,.home-v41__shell{width:min(1180px,calc(100% - 36px));margin-inline:auto}
body{font-family:"Vazirmatn",Tahoma,sans-serif}
input,select,textarea,button{max-width:100%;font-family:inherit}
table{max-width:100%}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media(max-width:900px){
  .services-site .hero-grid,
  .projects-site .hero-grid,
  .about-page .hero-grid,
  .contact-site .contact-grid,
  .consult-grid,
  .timeline-grid,
  .tools-grid-layout,
  .signature-grid,
  .blog-v40__hero-grid,
  .blog-v40__article-hero-grid,
  .blog-v40__article-layout{grid-template-columns:1fr!important}
  .services-site .service-catalog,
  .projects-site .showcase-grid,
  .projects-site .db-projects-grid,
  .about-page .capability-grid,
  .about-page .domain-grid,
  .contact-points,
  .social-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  h1{overflow-wrap:anywhere}
}
@media(max-width:620px){
  .services-container,.projects-container,.contact-shell,.consult-container,.shell,.blog-v40__shell,.home-v41__shell{width:calc(100% - 24px)}
  .services-site .service-catalog,
  .projects-site .showcase-grid,
  .projects-site .db-projects-grid,
  .about-page .capability-grid,
  .about-page .domain-grid,
  .about-page .tool-groups,
  .contact-points,
  .social-cards,
  .consult-type-grid{grid-template-columns:1fr!important}
  .hero-actions,.contact-reply-actions,.success-actions{flex-direction:column}
  .hero-actions>a,.hero-actions>button,.contact-reply-actions>a,.success-actions>a{width:100%!important}
  h1{font-size:clamp(24px,8vw,34px)!important}
  h2{font-size:clamp(20px,6.5vw,28px)}
  p{overflow-wrap:anywhere}
}

/* BEGIN WORKWEBSITE MOBILE RESPONSIVE FIX V204
   Purpose: prevent horizontal overflow/cropping on public pages at phone widths.
   Desktop layout is intentionally untouched.
*/
@media (max-width: 700px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  body main,
  body section,
  body article,
  body aside,
  body header,
  body footer,
  body nav,
  body div {
    min-width: 0;
  }

  img,
  video,
  canvas,
  iframe,
  svg {
    max-width: 100% !important;
  }

  /* Shared public shells */
  .shell,
  .services-container,
  .projects-container,
  .b440-shell,
  .home-v41__shell,
  .seo2-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 12px !important;
  }

  /* Public two-column / hero layouts */
  .hero-grid,
  .services-container.hero-grid,
  .projects-container.hero-grid,
  .b440-index-hero__grid,
  .seo2-hero-grid,
  .seo2-two-col {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 28px !important;
  }

  .hero-content,
  .hero-copy,
  .portrait-column,
  .service-navigator,
  .hero-panel,
  .b440-index-copy,
  .b440-featured,
  .seo2-hero-grid > *,
  .seo2-panel,
  .seo2-identity,
  .seo2-card,
  .seo2-related > *,
  .seo2-experience-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Text must wrap instead of forcing the document wider than the phone. */
  h1,
  h2,
  h3,
  h4,
  p,
  li,
  a,
  button,
  span,
  strong,
  b,
  em {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .hero h1,
  .services-hero h1,
  .projects-hero h1,
  .b440-index-copy h1,
  .seo2-hero h1 {
    max-width: 100% !important;
    font-size: clamp(1.85rem, 8.4vw, 2.65rem) !important;
    line-height: 1.32 !important;
    white-space: normal !important;
  }

  .hero-lead,
  .lead,
  .b440-index-copy p,
  .seo2-hero p {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  /* Buttons and calls-to-action: full-width stack on narrow phones. */
  .hero-actions,
  .seo2-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .hero-actions > a,
  .hero-actions > button,
  .seo2-actions > a,
  .seo2-actions > button,
  .gold-button,
  .outline-button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* Chip/tag rows must wrap. */
  .role-line,
  .b440-topic-row,
  .seo2-tags,
  .seo2-tags-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }

  .role-line > *,
  .b440-topic-row > *,
  .seo2-tags > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Cards / grids */
  .seo2-card-grid,
  .seo2-group-grid,
  .seo2-experience-grid,
  .seo2-related,
  .seo2-home-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .quick-stats,
  .hero-proof,
  .hero-metrics {
    max-width: 100% !important;
  }

  .need-selector {
    width: 100% !important;
    max-width: 100% !important;
  }

  .need-selector > button {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  /* About portrait */
  .portrait-card,
  .portrait-frame,
  .about-portrait {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Projects / featured media */
  .hero-preview-grid,
  .b440-featured__media,
  .b440-featured__body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Skill pages */
  .seo2-hero {
    padding-inline: 0 !important;
  }

  .seo2-hero-grid {
    overflow: visible !important;
  }

  .seo2-identity {
    padding: 22px !important;
  }

  .seo2-cta {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .seo2-cta > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Header safety */
  .public-header-v40,
  .public-header-v40__inner {
    width: 100% !important;
    max-width: 100% !important;
  }

  .public-header-v40__inner {
    padding-inline: 10px !important;
  }

  .public-header-v40__brand,
  .public-header-v40__toggle {
    flex: 0 0 auto !important;
  }
}
/* END WORKWEBSITE MOBILE RESPONSIVE FIX V204 */