/* =====================================================
   OMNIWISE TECH — responsive.css
   ===================================================== */

/* --- TABLET (1024px and below) ---------------------- */
@media (max-width: 1024px) {
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
  h3 { font-size: 24px; }

  .navbar__links { gap: 24px; }

  .capabilities-grid { grid-template-columns: 1fr; max-width: 600px; margin-left: auto; margin-right: auto; }

  .process-steps { grid-template-columns: repeat(2, 1fr); gap: 48px; }
  .process-steps::before { display: none; }

  /* Approach: keep 3-col but drop the connector line */
  .approach-steps::before { display: none; }

  /* Who We Help: stack to 1-col */
  .who-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }

  .about-proof__inner { grid-template-columns: 1fr; gap: 48px; }
  .founder-section__inner { grid-template-columns: 1fr; gap: 48px; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }

  .problem-section__inner { grid-template-columns: 1fr; gap: 48px; }

  .insights-grid { grid-template-columns: 1fr; }

  .contact-layout { grid-template-columns: 1fr; gap: 48px; }
}

/* --- MOBILE (767px and below) ----------------------- */
@media (max-width: 767px) {
  :root { --padding-x: 20px; }

  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  h3 { font-size: 22px; }

  section { padding: 64px 0; }

  /* Navbar */
  .navbar__links { display: none; }
  .navbar__hamburger { display: flex; }

  /* Hero */
  .hero { height: auto; min-height: 0; padding: 88px 0 48px; }
  .hero__content { flex-direction: column; }
  .hero__text { max-width: 100%; width: 100%; text-align: left; }
  .hero__eyebrow { margin-bottom: 10px; }
  .hero h1 { font-size: 34px; line-height: 1.12; margin-bottom: 14px; overflow-wrap: break-word; word-break: break-word; }
  .hero__scroll { display: none; }
  .hero__subhead { font-size: 15px; line-height: 1.55; margin-bottom: 6px; }
  .hero__differentiator { margin-bottom: 22px; }
  .hero__ctas { justify-content: flex-start; flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 0; }

  /* Trust bar */
  .trust-bar__inner { flex-direction: column; gap: 20px; }
  .trust-bar__item + .trust-bar__item::before { display: none; }
  .trust-bar__item { padding: 0; }

  /* Process steps: vertical */
  .process-steps { grid-template-columns: 1fr; gap: 32px; }
  .process-step { text-align: left; display: flex; gap: 16px; }
  .process-step__node { flex-shrink: 0; margin: 0; }
  .process-step__content { flex: 1; }

  /* Approach steps: vertical */
  .approach-steps { grid-template-columns: 1fr; gap: 24px; }
  .approach-steps .process-step {
    text-align: left;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 0;               /* remove desktop 0 24px — container already pads */
  }
  .approach-steps .process-step__node { flex-shrink: 0; margin: 0; }
  .approach-steps .process-step__content { flex: 1; min-width: 0; }

  /* Who We Help */
  .who-grid { grid-template-columns: 1fr; max-width: 100%; }

  /* About stats */
  .about-stats { flex-direction: column; gap: 16px; }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { justify-content: center; }

  /* Demo form */
  .demo-form { flex-direction: column; }

  /* Pull quote — smaller on mobile */
  .pull-quote p { font-size: 16px; }

  /* Capabilities */
  .capabilities-grid { max-width: 100%; }
  .capability-card { padding: 28px; }

  /* Values */
  .values-grid { grid-template-columns: 1fr; }

  /* Contact */
  .contact-layout { padding: 48px var(--padding-x); }

  /* Page hero */
  .page-hero { padding: 120px var(--padding-x) 60px; }

  /* Closing CTA */
  .closing-cta h2 { font-size: 32px; }

  /* Credentials timeline */
  .credentials-timeline { padding-left: 44px; }

  /* Insights */
  .insights-grid { grid-template-columns: 1fr; }

  /* Mobile offer cards (hidden on desktop) */
  .mobile-offers {
    display: block;
    background: var(--color-navy);
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  .mobile-offers__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .mobile-offer-card {
    display: flex;
    flex-direction: column;
    padding: 18px 16px;
    text-decoration: none;
    gap: 5px;
    transition: background 0.15s ease;
  }

  .mobile-offer-card:active { background: rgba(255,255,255,0.04); }

  .mobile-offer-card--digital {
    border-right: 1px solid rgba(255,255,255,0.08);
    border-bottom: 3px solid var(--color-teal);
  }

  .mobile-offer-card--ai {
    border-bottom: 3px solid var(--color-amber);
  }

  .mobile-offer__label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }

  .mobile-offer-card--digital .mobile-offer__label { color: var(--color-teal); }
  .mobile-offer-card--ai .mobile-offer__label { color: var(--color-amber); }

  .mobile-offer__desc {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    line-height: 1.35;
    margin: 0;
  }

  .mobile-offer__tags {
    display: block;
    font-size: 11px;
    color: rgba(255,255,255,0.42);
    line-height: 1.4;
  }

  /* Trust bar — compact on mobile */
  .trust-bar { padding: 20px var(--padding-x); }
}

/* --- SMALL MOBILE (480px and below) ----------------- */
@media (max-width: 480px) {
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }

  .hero h1 { font-size: 34px; }
  .hero__ctas { flex-direction: column; align-items: center; }
  .btn { width: 100%; justify-content: center; }

  .founder-section__inner { gap: 32px; }
  .founder-card { padding: 28px; }
}

/* --- REDUCED MOTION --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal.reveal--pending { opacity: 1; transform: none; }
}

/* --- PRINT ------------------------------------------ */
@media print {
  .navbar, .hero__controls, .hero__scroll, .mobile-menu { display: none; }
  .hero { height: auto; padding: 40px 0; }
  body { color: #000; }
}