/* =========================================================
   NOVEL PATTERNS — ABOUT PAGE MOBILE RESPONSIVE LOCK
   Scope: About page only. Desktop and all other pages untouched.
   Fixes shared-class collisions, shrinking hero container and
   horizontal clipping on phones/tablets.
   ========================================================= */

@media (max-width: 1024px) {
  html body .np-page-about {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  html body .np-page-about *,
  html body .np-page-about *::before,
  html body .np-page-about *::after {
    box-sizing: border-box !important;
  }

  html body .np-page-about section,
  html body .np-page-about .section,
  html body .np-page-about .hero,
  html body .np-page-about .logos-strip {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  html body .np-page-about .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* The About hero is a flex parent. Force its container to occupy
     the full row instead of shrinking to the content width. */
  html body .np-page-about .hero {
    min-height: auto !important;
    padding-top: 68px !important;
    padding-bottom: 64px !important;
    align-items: flex-start !important;
  }

  html body .np-page-about .hero > .container {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 1160px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  html body .np-page-about .hero-split {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  html body .np-page-about .hero-copy,
  html body .np-page-about .hero-visual,
  html body .np-page-about .hero-visual-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body .np-page-about .hero-copy {
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
  }

  /* Shared site CSS hides .hero-visual below 900px. Restore it only
     for the About page and place it below the copy. */
  html body .np-page-about .hero-visual {
    display: block !important;
    max-width: 540px !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  html body .np-page-about .hero-visual-card {
    padding: 22px !important;
    border-radius: 20px !important;
  }

  html body .np-page-about .hero-chip {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
  }

  html body .np-page-about .hero-h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(2rem, 8vw, 3rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-wrap: balance !important;
  }

  html body .np-page-about .hero-h1 br {
    display: none !important;
  }

  html body .np-page-about .hero-sub {
    width: 100% !important;
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 0.96rem !important;
    line-height: 1.7 !important;
  }

  html body .np-page-about .hero-btns {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-bottom: 26px !important;
  }

  html body .np-page-about .hero-mini-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 520px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }

  html body .np-page-about .hms-item {
    min-width: 0 !important;
    padding: 15px 10px !important;
    border-right: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
  }

  html body .np-page-about .hms-item:nth-child(3),
  html body .np-page-about .hms-item:nth-child(7) {
    border-right: 0 !important;
  }

  html body .np-page-about .hms-item:nth-child(5),
  html body .np-page-about .hms-item:nth-child(7) {
    border-bottom: 0 !important;
  }

  html body .np-page-about .hms-div {
    display: none !important;
  }

  html body .np-page-about .hvc-product {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    text-align: left !important;
  }

  html body .np-page-about .hvc-product > div:nth-child(2) {
    min-width: 0 !important;
  }

  html body .np-page-about .hvc-prod-name,
  html body .np-page-about .hvc-prod-desc,
  html body .np-page-about .hvc-prod-stat {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body .np-page-about .hvc-prod-stat {
    grid-column: 2 !important;
    margin-left: 0 !important;
    text-align: left !important;
  }

  html body .np-page-about .hvc-badge {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: left !important;
  }

  /* All About two-column layouts become a true single column. */
  html body .np-page-about .story-grid,
  html body .np-page-about .mv-cards,
  html body .np-page-about .founders-stage,
  html body .np-page-about .cta-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body .np-page-about .story-grid {
    gap: 38px !important;
  }

  html body .np-page-about .story-grid > *,
  html body .np-page-about .cta-inner > *,
  html body .np-page-about .mv-cards > *,
  html body .np-page-about .founders-stage > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body .np-page-about .story-h2,
  html body .np-page-about .sec-head h2,
  html body .np-page-about .cta-h2 {
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-wrap: balance !important;
  }

  html body .np-page-about .story-h2 br,
  html body .np-page-about .cta-h2 br {
    display: none !important;
  }

  html body .np-page-about .story-quote,
  html body .np-page-about .story-p,
  html body .np-page-about .cta-p {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .np-page-about .story-pills,
  html body .np-page-about .story-meta-row {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .np-page-about .story-img-scene {
    width: 100% !important;
    max-width: 560px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 10px 0 58px !important;
  }

  html body .np-page-about .story-img-frame {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
  }

  html body .np-page-about .story-img-photo {
    width: 100% !important;
    height: auto !important;
    min-height: 240px !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }

  html body .np-page-about .story-float-badge {
    max-width: calc(100% - 16px) !important;
    white-space: normal !important;
  }

  html body .np-page-about .sfb-1 {
    left: 8px !important;
    bottom: 4px !important;
  }

  html body .np-page-about .sfb-2 {
    right: 8px !important;
    top: 18px !important;
  }

  html body .np-page-about .mv-card,
  html body .np-page-about .val-card,
  html body .np-page-about .fstage-card,
  html body .np-page-about .flip-card,
  html body .np-page-about .nstat,
  html body .np-page-about .vtcard,
  html body .np-page-about .blog-card,
  html body .np-page-about .cta-form-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body .np-page-about .mv-card {
    padding: 30px 22px !important;
  }

  html body .np-page-about .values-row,
  html body .np-page-about .flip-grid,
  html body .np-page-about .numbers-grid,
  html body .np-page-about .numbers-grid-b,
  html body .np-page-about .blog-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body .np-page-about .fstage-card {
    min-height: 380px !important;
  }

  html body .np-page-about .fstage-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px 22px !important;
  }

  html body .np-page-about .vtesti-columns {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  html body .np-page-about .vtesti-col {
    min-width: 0 !important;
  }

  html body .np-page-about .cta-form-card {
    padding: 28px 22px !important;
  }

  html body .np-page-about .cta-email-row,
  html body .np-page-about .cta-email-addr {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  html body .np-page-about input,
  html body .np-page-about select,
  html body .np-page-about textarea,
  html body .np-page-about button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body .np-page-about .btn-primary,
  html body .np-page-about .btn-ghost-dark {
    width: auto !important;
    max-width: 100% !important;
    justify-content: center !important;
    white-space: normal !important;
  }
}

@media (max-width: 600px) {
  html body .np-page-about .container,
  html body .np-page-about .hero > .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html body .np-page-about .hero {
    padding-top: 50px !important;
    padding-bottom: 52px !important;
  }

  html body .np-page-about .hero-split {
    gap: 28px !important;
  }

  html body .np-page-about .hero-h1 {
    font-size: clamp(1.9rem, 9.2vw, 2.55rem) !important;
  }

  html body .np-page-about .hero-btns,
  html body .np-page-about .cta-btns {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 10px !important;
  }

  html body .np-page-about .hero-btns .btn-primary,
  html body .np-page-about .hero-btns .btn-ghost-dark,
  html body .np-page-about .cta-btns .btn-primary,
  html body .np-page-about .cta-btns .btn-ghost-dark {
    width: 100% !important;
  }

  html body .np-page-about .hero-visual-card {
    padding: 16px !important;
  }

  html body .np-page-about .values-row,
  html body .np-page-about .flip-grid,
  html body .np-page-about .numbers-grid,
  html body .np-page-about .numbers-grid-b,
  html body .np-page-about .blog-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  html body .np-page-about .story-meta-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  html body .np-page-about .story-img-photo {
    min-height: 220px !important;
  }

  html body .np-page-about .sfb-2 {
    position: static !important;
    margin: 10px 8px 0 auto !important;
    width: fit-content !important;
  }

  html body .np-page-about .fstage-card {
    min-height: 350px !important;
  }

  html body .np-page-about .fstage-avatar {
    width: 66px !important;
    height: 66px !important;
    top: 18px !important;
    right: 18px !important;
  }

  html body .np-page-about .vtesti-outer {
    height: 520px !important;
  }

  html body .np-page-about .vtesti-columns {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html body .np-page-about .cta-form-card {
    padding: 24px 16px !important;
  }
}

@media (max-width: 380px) {
  html body .np-page-about .hero-mini-stats,
  html body .np-page-about .story-meta-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .np-page-about .hms-item {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }

  html body .np-page-about .hms-item:nth-child(7) {
    border-bottom: 0 !important;
  }
}