/* ==========================================================================
   CryoFlux Technologies — responsive.css
   Loaded last so its rules win. Tablet, then mobile, then motion settings.
   ========================================================================== */

/* Tablet / small laptop --------------------------------------------------- */
@media (max-width: 1200px) {
  .nav-links,
  .nav-contact { display: none; }
  .nav-toggle { display: block; }

  .band { grid-template-columns: repeat(2, 1fr); }
  .band > *:nth-child(3) { border-left: 0; }
  .band > *:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }

  .app-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }

  .hero__media,
  .page-home .hero__media,
  .page-architecture .hero__media,
  .page-about .hero__media,
  .page-cryoworx .hero__media,
  .page-investors .hero__media { inset: 0 0 0 22%; }

  .rail--low,
  .pull-note { bottom: 60px; }
  .stack-note { bottom: 40px; }
}

/* Mobile ------------------------------------------------------------------- */
@media (max-width: 760px) {
  :root { --nav-h: 76px; }

  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 34px);
    padding-bottom: 56px;
    align-items: flex-start;
  }
  .page-home .hero,
  .page-architecture .hero,
  .page-proof .hero,
  .page-about .hero,
  .page-cryoworx .hero,
  .page-investors .hero { min-height: auto; }

  /* Stack intelligently: headline and CTAs first, then the imagery at
     full width, then the supporting word columns. Nothing is dropped. */
  .hero__inner {
    display: flex;
    flex-direction: column;
  }
  .hero__copy   { order: 1; max-width: none; }
  .hero__media  { order: 2; }
  .hero__extras { order: 3; }

  .hero__media,
  .page-home .hero__media,
  .page-architecture .hero__media,
  .page-proof .hero__media,
  .page-about .hero__media,
  .page-cryoworx .hero__media,
  .page-investors .hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    height: 62vw;
    min-height: 250px;
    margin-top: 34px;
  }
  .hero__media::after,
  .page-proof .hero__media::after,
  .page-about .hero__media::after,
  .page-investors .hero__media::after {
    background: linear-gradient(180deg, rgba(7, 9, 12, 0.3) 0%, rgba(7, 9, 12, 0.05) 45%, rgba(7, 9, 12, 0.8) 100%);
  }

  .rail,
  .stack-note,
  .pull-note {
    position: static;
    margin-top: 34px;
    text-align: left;
    transform: none;
  }
  .pull-note { padding-left: 18px; }

  .display { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .display--sm { font-size: clamp(2rem, 9vw, 2.6rem); }

  .btn-row { margin-top: 30px; }
  .btn { flex: 1 1 auto; justify-content: center; }

  .band { grid-template-columns: 1fr; }
  .band > * { border-left: 0; border-top: 1px solid var(--line-soft); }
  .band > *:first-child { border-top: 0; }

  .app-grid { grid-template-columns: 1fr; gap: 14px; }
  .app-card__img { aspect-ratio: 16 / 10; }

  .quote p { letter-spacing: 0.1em; line-height: 1.9; }

  .footer-inner { grid-template-columns: 1fr; }
  .footer-line { justify-content: flex-start; text-align: left; }
  .footer-line::before,
  .footer-line::after { display: none; }
  .footer-sign { padding-left: 18px; }
  .footer-legal { flex-direction: column; }
}

/* Motion preferences --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}