/* ==========================================================================
   Singularity Hypertech — SERVICES PAGE, responsive
   Loaded after services.css. The reused bands bring their own breakpoints
   from css/home/responsive.css and css/about/responsive.css.
   ========================================================================== */

@media (max-width: 1080px) {
  .svc-hero {
    min-height: 0;
    padding: 150px 0 80px;
  }
  .svc-hero-inner { justify-content: flex-start; }
  .svc-hero::after {
    background: linear-gradient(
      90deg,
      rgba(11, 7, 8, 0.72) 0%,
      rgba(11, 7, 8, 0.6) 100%
    );
  }
}

@media (max-width: 860px) {
  .choose-body p { font-size: 15px; line-height: 21px; }
}

@media (max-width: 560px) {
  .svc-hero { padding: 128px 0 60px; }
  .svc-hero h1 { font-size: 31px; line-height: 1.22; }
  .choose-more { width: 100%; justify-content: center; }
}

/* ==========================================================================
   AI & MACHINE LEARNING page
   ========================================================================== */
@media (max-width: 1200px) {
  .offer-row { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 44px; padding-left: 0; }
}

@media (max-width: 1080px) {
  /* single column makes each card taller than the viewport, and a sticky
     element that does not fit traps the reader — so the deck flattens back
     into an ordinary list here */
  .offer-row {
    position: static;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 44px 0;
    min-height: 0;
  }
  .offer-rows { padding-bottom: 0; }
  .offer-body h3 { max-width: none; }

  /* the bento collapses to one card per row */
  .ab-adds-grid--bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .ab-adds-grid--bento > .ab-add-card:nth-child(n) {
    grid-column: 1;
    grid-row: auto;
    min-height: 0;
  }
  .ab-add-card--wide { flex-direction: column; align-items: flex-start; gap: 24px; }
}

@media (max-width: 560px) {
  .offerings { padding: 64px 0 72px; }
  .offer-row { padding: 36px 0; }
  .offer-cta, .ab-intro-actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  /* narrower than home's 3rem, because these are words rather than numerals */
  .why-num { font-size: 26px; line-height: 1.1; }
}

/* Platform expertise: step the Figma 40px titles / 48px icons down with the
   About sizes (these selectors outrank about/responsive.css) */
@media (max-width: 1080px) {
  .ab-philosophy .ab-phil-list { width: 100%; margin-left: 0; }
  .ab-philosophy .ab-phil-row h3 { font-size: 30px; }
}
@media (max-width: 860px) {
  .ab-philosophy .ab-phil-row h3 { font-size: 22px; }
  .ab-philosophy .ab-phil-icon img { width: 42px; height: 42px; }
  .ab-philosophy::before,
  .ab-philosophy::after { width: 400px; height: 430px; }
  .ab-philosophy::before { top: -75px; right: -15px; }
  .ab-philosophy::after { bottom: -75px; }
}