/* ==========================================================================
   ALI SHAYAN HAIDER — Responsive
   --------------------------------------------------------------------------
   Written mobile-out. The mobile layout is not a squeezed desktop: the hero
   reorders so the portrait sits under the headline at a different crop, the
   ventures ledger drops its hover preview for permanent inline images, and
   the index rail is replaced entirely by the full-screen menu.
   ========================================================================== */


/* ---- LARGE DESKTOP: the index rail appears ------------------------------ */

@media (min-width: 1200px) {
  :root { --rail: 148px; }

  .index-rail { display: block; }

  .site-header .nav { padding-left: 0; }

  .ledger-preview { display: block; }
}

@media (min-width: 1600px) {
  :root { --rail: 172px; }
}


/* ---- TABLET / SMALL LAPTOP --------------------------------------------- */

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr .8fr; gap: 2rem; }

  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-statement { grid-column: 1 / -1; }

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


/* ---- MOBILE NAV THRESHOLD ---------------------------------------------- */

@media (max-width: 860px) {
  .nav-links,
  .nav-cta { display: none; }

  .nav-toggle { display: block; }

  .site-header.is-scrolled { padding-block: .75rem; }
}


/* ---- MOBILE ------------------------------------------------------------- */

@media (max-width: 720px) {

  /* Hero: headline first, portrait beneath in a wider crop that suits a
     narrow column better than the tall desktop frame. */
  .hero {
    min-height: auto;
    padding-top: 7.5rem;
    padding-bottom: 3.5rem;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .hero-portrait { order: 2; }
  .hero-copy     { order: 1; }

  .hero-portrait img { aspect-ratio: 4 / 5; }

  .hero-scroll { display: none; }

  .display { letter-spacing: -.03em; }

  /* Two-column blocks collapse */
  .grid-2,
  .grid-3,
  .statement-body,
  .principles { grid-template-columns: 1fr; }

  .principle { border-right: 0; }

  .statement .display { max-width: none; }

  /* Ledger: no hover state on touch, so every venture shows its image. */
  .ledger-row {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-block: 2rem;
  }
  .ledger-row:hover { padding-left: 0; }

  .ledger-index { order: 1; }
  .ledger-media { order: 2; display: block; }
  .ledger-main  { order: 3; }
  .ledger-cta   { order: 4; }

  .ledger-preview { display: none; }

  .journey li { grid-template-columns: 1fr; gap: .375rem; }

  .contact-method { flex-direction: column; gap: .25rem; }
  .contact-method:hover { padding-left: 0; }

  .footer-top { grid-template-columns: 1fr; gap: 2.5rem; }

  .capability-list { grid-template-columns: 1fr; }

  .chapter { min-height: 68vh; }
  .chapter::after {
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.30) 0%,
      rgba(0,0,0,.55) 55%,
      rgba(0,0,0,.82) 100%
    );
  }
  .chapter-content .display,
  .chapter-content h2 { max-width: none; }
}


/* ---- SMALL PHONES ------------------------------------------------------- */

@media (max-width: 400px) {
  :root { --gutter: 1.125rem; }

  .btn { width: 100%; justify-content: center; }
  .btn-row { flex-direction: column; align-items: stretch; }
}


/* ---- PRINT -------------------------------------------------------------- */

@media print {
  .site-header,
  .index-rail,
  .nav-panel,
  .hero-scroll,
  .btn { display: none !important; }

  body { color: #000; background: #fff; }
  main { padding-left: 0; }
  .reveal { opacity: 1 !important; transform: none !important; }
}