/* =========================================================
   responsive.css — breakpoints. Load this file LAST so its
   media-query overrides win against the component modules.

   Two tiers:
     ≤900px — tablet: nav collapses into a hamburger menu,
              4/6-column grids become 2 columns, human/contact
              panels stack into a single column.
     ≤480px — phone: everything above collapses further to a
              single column, the flow diagrams stack vertically,
              and hero/section spacing is tightened.
   Used by: index.html
   ========================================================= */

@media (max-width:900px){
  /* ----- collapsible nav ----- */
  .nav-toggle{display:flex;}
  .nav-links{
    display:none;
    flex-direction:column;
    gap:2px;
    width:100%;
    order:3;
    background:#fff;
    border-top:1px solid #e7e9ee;
    padding:10px 0 4px;
  }
  .nav-links.open{display:flex;}
  .nav-links a{display:block;padding:11px 4px;}
  .nav-right{gap:10px;}
  .cta-btn{padding:8px 16px;font-size:13px;}

  /* ----- grids: 4/6 columns -> 2 columns ----- */
  .why-grid,.brand-grid,.trust .wrap{grid-template-columns:repeat(2,1fr);}

  /* ----- process/step: 4 columns -> 2 columns ----- */
  .process{grid-template-columns:repeat(2,1fr);row-gap:40px;}
  .process::before{display:none;} /* the connector line only reads correctly in a single row */

  /* ----- human & contact: side-by-side -> stacked ----- */
  .human .grid,.contact .grid{grid-template-columns:1fr;}
  .human .photo{height:220px;}

  .hero{padding:64px 0 88px;}
  .hero h1{font-size:32px;}
  section{padding:64px 0;}
}

@media (max-width:480px){
  /* ----- grids: down to a single column ----- */
  .why-grid,.brand-grid,.process,.trust .wrap{grid-template-columns:1fr;}
  .process{row-gap:32px;}

  .hero{padding:48px 0 64px;}
  .hero h1{font-size:25px;}
  .hero p.sub{font-size:15px;}
  .hero .eyebrow{font-size:11.5px;padding:5px 12px;}
  .hero .actions{flex-direction:column;align-items:stretch;}
  .hero .actions a{text-align:center;}

  section{padding:48px 0;}
  .section-head h2{font-size:22px;}

  /* ----- flow diagrams: horizontal row -> vertical stack ----- */
  .diagram-row{flex-direction:column;}
  .diagram-box{width:100%;min-width:0;}
  .diagram-arrow{transform:rotate(90deg);}

  .solution-tabs{gap:8px;}
  .solution-tab-btn{padding:8px 14px;font-size:12.5px;}

  .ai-teaser{padding:32px 24px;flex-direction:column;align-items:flex-start;text-align:left;}
  .ai-teaser .btn-primary{width:100%;text-align:center;}

  .contact form{padding:20px;}

  footer .wrap{flex-direction:column;text-align:center;gap:10px;}
  footer .flinks{flex-wrap:wrap;justify-content:center;gap:12px 18px;}
}