/* ============================================================
   Cipherverse — responsive.css  ·  mobile-first breakpoints
   Base styles = mobile (<480). Breakpoints: 480 / 768 / 1024 / 1440.
   ============================================================ */

/* ── Mobile base (<768) ────────────────────────────────── */
@media (max-width: 767px) {

  /* Nav → drawer */
  .nav-toggle { display: flex; }
  /* The drawer is already out of flow, so it needs no size animation at all:
     fade + a short slide on the compositor. Animating max-height also meant
     easing toward 80vh no matter how tall the menu really was, which made
     short menus snap. `visibility` keeps closed links out of the tab order. */
  .nav-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--line-2);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-0.5rem);
    transition: opacity var(--tr), transform var(--tr), visibility 0s linear var(--tr);
  }
  .nav-menu.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
    transition: opacity var(--tr), transform var(--tr), visibility 0s;
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-menu, .nav-menu.open { transform: none; transition: opacity var(--tr), visibility 0s; }
  }
  .nav-link { padding: 0.85rem 0; }
  .nav-cta { margin: 0.75rem 0 0; text-align: center; }

  /* The hero console repeats the Process section further down the page. On a
     phone it is pure height before the visitor reaches anything new, so the
     step notes drop and only 01/02/03 + the titles survive. */
  .console-steps .step-note { display: none; }
  .console-steps { gap: 0.85rem; }
  .console-steps .step-row:not(:last-child) { padding-bottom: 0.85rem; }

  /* Work filters scroll sideways rather than stacking into a tall block */
  .js .work-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: none; }
  .js .work-filters::-webkit-scrollbar { display: none; }
  .chip { flex: none; }

  /* Sticky-pin degrades to a plain stacked list */
  .pin-grid { grid-template-columns: 1fr; }
  .pin-stage { display: none; }
  .pin-steps { gap: 2.5rem; }
  .pin-step { opacity: 1; min-height: 0; }

  /* Sticky mobile CTA bar (conversion) */
  .mobile-cta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 195;
    background: var(--line-2); border-top: 1px solid var(--line-2);
  }
  .mcta { text-align: center; padding: 0.95rem; font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 500; }
  .mcta--email { background: var(--lime); color: var(--ground); }
  .mcta--ig { background: var(--surface); color: var(--soft); }
  body { padding-bottom: 3.4rem; } /* room for the CTA bar */
}

/* ── 480+ ──────────────────────────────────────────────── */
@media (min-width: 480px) {
  .sw-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 768+ ──────────────────────────────────────────────── */
@media (min-width: 768px) {
  /* The footer stamp gets room on a desktop footer. Mobile keeps 56px —
     there the footer is a single stacked column and a larger mark would
     push the navigate/reach links below the fold. */
  .footer-logo img { height: 96px; }
}

/* ── 1024+ ─────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .hero { min-height: 90vh; }
  .contact-grid { grid-template-columns: 1fr 1.25fr; }
  .footer-logo img { height: 120px; }
}

/* ── 1440+ ─────────────────────────────────────────────── */
@media (min-width: 1440px) {
  :root { --container: 1320px; }
}