/* =====================================================================
   responsive.css — breakpoint behaviour.
   Mobile is designed down, not shrunk: horizontal scroll becomes a
   vertical list, parallax and the custom cursor switch off.
   ===================================================================== */

/* Large desktops */
@media (min-width: 1600px) {
  :root { --gutter: 6rem; }
}

/* Laptops / small desktops */
@media (max-width: 1199.98px) {
  .hero__vertical { display: none; }
}

/* Tablets */
@media (max-width: 991.98px) {
  :root { --section-y: clamp(3.5rem, 8vh, 6rem); }

  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }

  .work-card:hover { padding-inline: 0; }
  .panel:hover, .panel:focus-within { padding-inline: 0; }

  .work-bg { opacity: 0.72; }
  .work-bg__fine,
  .work-bg__packet--four,
  .work-bg__packet--five { display: none; }

  .hero { align-items: center; padding-block: 7rem 3rem; }
  .float-tag { display: none; }

  .about-visual {
    right: -20rem;
    bottom: -2rem;
    width: 53rem;
    opacity: 0.52;
  }
  .about-section::after {
    background: linear-gradient(90deg, var(--ink) 0%, rgba(11, 11, 12, 0.94) 47%, rgba(11, 11, 12, 0.55) 78%, transparent 100%);
  }

  .about-hero-art {
    right: -14rem;
    bottom: -2rem;
    width: 43rem;
    opacity: 0.86;
  }
  .about-page-hero::after {
    background: linear-gradient(90deg, var(--ink) 0%, rgba(11, 11, 12, 0.96) 52%, rgba(11, 11, 12, 0.58) 82%, transparent 100%);
  }
}

/* Phones */
@media (max-width: 767.98px) {
  :root {
    --step-hero: clamp(2.35rem, 11vw, 3.4rem);
    --step-xl: clamp(1.9rem, 8.5vw, 2.6rem);
    --step-lg: clamp(1.45rem, 6.5vw, 2rem);
  }

  body { font-size: 1rem; }

  .hero__title { max-width: 100%; }
  .hero__scroll { margin-top: 1.75rem; }

  .btn-x { padding: 0.85rem 1.35rem; min-height: 48px; }
  .nav-toggle { min-height: 44px; }

  .service { grid-template-columns: 2rem 1fr; }
  .proj-flow { inset: 1rem 1rem 3.4rem; gap: 0.35rem; }
  .proj-flow__node { min-height: 4.5rem; padding: 0.5rem; }
  .proj-flow__node strong { font-size: 0.58rem; }

  .about-visual {
    right: -18rem;
    bottom: -1rem;
    width: 35rem;
    opacity: 0.4;
  }
  .about-visual__data,
  .about-visual__desk-details { display: none; }
  .about-section::after {
    background: linear-gradient(180deg, var(--ink) 0%, rgba(11, 11, 12, 0.95) 55%, rgba(11, 11, 12, 0.58) 100%);
  }

  .about-hero-art {
    right: -14rem;
    bottom: -1.6rem;
    width: 31rem;
    opacity: 0.62;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 20%, #000 48%, #000 100%);
  }
  .about-page-hero::after {
    background: linear-gradient(180deg, var(--ink) 0%, rgba(11, 11, 12, 0.96) 62%, rgba(11, 11, 12, 0.58) 100%);
  }
  .about-hero-art__person,
  .about-hero-art__signals i:nth-child(n + 5) { display: none; }

  .work-bg { opacity: 0.6; }
  .work-bg__back,
  .work-bg__routes,
  .work-bg__systems,
  .work-bg__streams,
  .work-bg__active { display: none; }
  .work-bg__mobile-route {
    display: block;
    fill: var(--ink-2);
    stroke: var(--ivory);
    stroke-width: 1.5;
    opacity: 0.1;
  }
  .work-bg__mobile-route .work-bg__status {
    fill: var(--accent);
    stroke: none;
    opacity: 0.62;
  }
  .work-bg__mobile-route .work-bg__packet {
    display: block;
    opacity: 0.42;
  }

  /* Custom cursor and heavy parallax are disabled in JS on touch/small screens */
  .cursor-dot { display: none !important; }
}

/* Small phones */
@media (max-width: 359.98px) {
  :root { --gutter: 1rem; }
  .marquee__item { font-size: 1.05rem; }
}

/* Coarse pointers never get the custom cursor */
@media (pointer: coarse) {
  .cursor-dot { display: none !important; }
}

/* Print: a clean, readable fallback */
@media print {
  .nav, .cursor-dot, .preloader, .marquee, .scroll-progress, .curtain { display: none !important; }
  body { background: #fff; color: #000; }
}