/* ============================================================
   DOCLANE — responsive.css
   Every @media breakpoint in the site lives here so layout
   behavior can be audited in one place. Rules are grouped by
   component, in the same order as styles.css.

   Breakpoint scale used throughout:
     1240px  container max-width (desktop / laptop, no query needed)
     1000px  large tablet / small laptop
     980px   hero switches to single column
     900px   tablet — most grids drop to 1–2 columns, nav collapses
     760px   diagram / wide-table horizontal scroll kicks in
     700px   pipeline stepper stacks
     640px   container padding tightens
     560px   phones — forms and small grids go full-width
   ============================================================ */

/* ---------------------------------------------------------- */
/* CONTAINER                                                    */
/* ---------------------------------------------------------- */
@media (max-width:640px){
  .container{padding:0 20px;}
}

/* ---------------------------------------------------------- */
/* NAVIGATION                                                    */
/* ---------------------------------------------------------- */
@media (max-width:900px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
  .nav-cta .btn-ghost{display:none;}
}

/* ---------------------------------------------------------- */
/* HERO                                                          */
/* ---------------------------------------------------------- */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual{height:420px;order:-1;}
  .helix-wrap{right:50%;transform:translate(50%,-50%) scale(0.72);}
}
@media (max-width:480px){
  .hero{padding:140px 0 80px;}
  .hero-visual{height:320px;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{width:100%;}
  .hero-meta{gap:20px;}
}

/* ---------------------------------------------------------- */
/* PAGE HEADER (inner pages)                                     */
/* ---------------------------------------------------------- */
@media (max-width:640px){
  .page-header{padding:calc(88px + 40px) 0 var(--space-xl);}
}

/* ---------------------------------------------------------- */
/* WORKFLOW COMPARISON                                           */
/* ---------------------------------------------------------- */
@media (max-width:900px){
  .workflow-compare{grid-template-columns:1fr;}
  .wf-vs{flex-direction:row;}
  .wf-vs .arrow{height:1px;width:auto;flex:1;background:linear-gradient(90deg,var(--line),var(--ocean-400),var(--line));}
}

/* ---------------------------------------------------------- */
/* REASON CARDS / HYPOTHESIS                                     */
/* ---------------------------------------------------------- */
@media (max-width:900px){
  .reason-grid{grid-template-columns:1fr;}
  .hyp-wrap{grid-template-columns:1fr;gap:36px;}
  .pub-grid{grid-template-columns:1fr;gap:16px;}
}

/* ---------------------------------------------------------- */
/* HUB FLOW DIAGRAM                                               */
/* ---------------------------------------------------------- */
@media (max-width:760px){
  .hub-flow-wrap{overflow-x:auto;padding-bottom:10px;-webkit-overflow-scrolling:touch;}
  .hub-flow{width:820px;max-width:none;}
}

/* ---------------------------------------------------------- */
/* PIPELINE STEPPER                                               */
/* ---------------------------------------------------------- */
@media (max-width:700px){
  .pipeline{flex-direction:column;}
  .pipe-step{min-width:auto;padding:0 0 18px;}
  .pipe-arrow{display:none;}
}

/* ---------------------------------------------------------- */
/* STATS                                                          */
/* ---------------------------------------------------------- */
@media (max-width:900px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .stat-cell:nth-child(5){grid-column:span 2;}
}

/* ---------------------------------------------------------- */
/* CLINICAL APPLICATION CARDS                                     */
/* ---------------------------------------------------------- */
@media (max-width:1000px){.app-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.app-grid{grid-template-columns:1fr;}}

/* ---------------------------------------------------------- */
/* TEAM                                                           */
/* ---------------------------------------------------------- */
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.team-grid{grid-template-columns:1fr;}}

/* ---------------------------------------------------------- */
/* CONTACT                                                        */
/* ---------------------------------------------------------- */
@media (max-width:900px){.contact-wrap{grid-template-columns:1fr;}}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}

/* ---------------------------------------------------------- */
/* FOOTER                                                         */
/* ---------------------------------------------------------- */
@media (max-width:800px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){
  .foot-grid{grid-template-columns:1fr;}
  .foot-bottom{flex-direction:column;align-items:flex-start;}
}

/* ---------------------------------------------------------- */
/* VALIDATION MEDIA                                                */
/* ---------------------------------------------------------- */
@media (max-width:960px){.validation-wrap{grid-template-columns:1fr;}}

/* ---------------------------------------------------------- */
/* SPLIT BLOCK (About / Technology / Collaborations)               */
/* ---------------------------------------------------------- */
@media (max-width:900px){
  .split-block, .split-block.reverse{
    grid-template-columns:1fr;
    direction:ltr;
  }
  .split-block .media{order:-1;}
}

/* ---------------------------------------------------------- */
/* ROADMAP TRACK                                                   */
/* ---------------------------------------------------------- */
@media (max-width:900px){.roadmap-track{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.roadmap-track{grid-template-columns:1fr;}}

/* ---------------------------------------------------------- */
/* CONTACT METHOD CARDS                                            */
/* ---------------------------------------------------------- */
@media (max-width:900px){.contact-methods{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.contact-methods{grid-template-columns:1fr;}}

/* ---------------------------------------------------------- */
/* METHODOLOGY GRID (Validation Study page)                        */
/* ---------------------------------------------------------- */
@media (max-width:900px){.method-grid{grid-template-columns:1fr;}}

/* ---------------------------------------------------------- */
/* DIAGRAM TABS                                                    */
/* ---------------------------------------------------------- */
@media (max-width:560px){
  .diagram-tabs{gap:6px;}
  .diagram-tab{padding:8px 14px;font-size:12.5px;}
  .diagram-stage{padding:20px;}
}

/* ---------------------------------------------------------- */
/* BACK-TO-TOP                                                     */
/* ---------------------------------------------------------- */
@media (max-width:560px){
  .back-to-top{right:16px;bottom:16px;width:42px;height:42px;}
}

/* ---------------------------------------------------------- */
/* GENERAL TYPE SCALE TIGHTENING — SMALL PHONES                    */
/* ---------------------------------------------------------- */
@media (max-width:420px){
  .section-head h2{font-size:26px;}
  .cta-band{padding:36px 24px;}
  .cta-band{flex-direction:column;align-items:flex-start;}
}

/* ---------------------------------------------------------- */
/* SECTIONS                                                   */
/* ---------------------------------------------------------- */
@media (max-width:900px){
  section{padding:44px 0;}
}
@media (max-width:480px){
  section{padding:36px 0;}
}