/* =========================================================
   responsive.css — breakpoint overrides
   The fluid rem system in reset.css already rescales the
   whole page; these rules retarget layout grids, hide
   nav etc. for each breakpoint.
   ========================================================= */

/* --------- 1280 --------- */
@media (max-width: 1280px) {
  .work-card { width: 300rem; height: 400rem; }
}

/* --------- 1024 --------- */
@media (max-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 40rem;
    padding-inline-end: var(--gutter);
  }
  .hero__hero-c {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.25;
    pointer-events: none;
  }
  .hero__copy { position: relative; z-index: 2; }
  .scroll-indicator { display: none; }

  .about__grid    { grid-template-columns: 1fr; }

  .timeline__nodes { grid-template-columns: repeat(2, 1fr); row-gap: 60rem; }
  .timeline__line  { display: none; }

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

  .cta__grid       { grid-template-columns: 1fr; }
  .cta__phone-wrap { order: -1; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40rem; }
  .footer__newsletter-inner { grid-template-columns: 1fr; gap: 32rem; }

  /* Sticky grid: 2 columns, 8 images, shorter scroll */
  .block.block--main { height: 350vh; }
  .gallery { width: 90vw; max-width: 600rem; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); column-gap: 24rem; row-gap: 28rem; }
  .gallery__item:nth-child(n + 9) { display: none; }
}

/* --------- 768 --------- */
@media (max-width: 768px) {
  .hero { padding-block: 130rem 60rem; }
  .hero__title { font-size: clamp(40rem, 11vw, 64rem); }
  .hero__cta { gap: 14rem; }

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

  .work-section { height: auto; padding-block: 30rem 0; overflow: hidden; }
  .work-track {
    /* Must be a constrained-width flex container for overflow-x scroll to work */
    position: relative;
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* hide the scrollbar visually but keep scrollability */
    scrollbar-width: none;
    padding: 4rem var(--gutter) 28rem;
    height: auto;
    gap: 18rem;
    /* stop cards from being clipped at the trailing edge */
    padding-inline-end: var(--gutter);
  }
  .work-track::-webkit-scrollbar { display: none; }
  .work-card {
    scroll-snap-align: start;
    flex: 0 0 78vw;
    width: 78vw;
    /* portrait aspect ratio — image fills top, footer sits below */
    height: calc(78vw * 1.25);
    max-height: 480rem;
    min-height: 280rem;
  }

  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial { padding: 50rem 30rem 30rem; }
  .testimonial__quote { font-size: 140rem; }

  /* Sticky grid: 2 columns x 6 rows */
  .block.block--main { height: 280vh; }
  .gallery__grid { row-gap: 22rem; column-gap: 18rem; }
  .gallery__item:nth-child(n + 9) { display: none; }
  /* sticky-grid.js detects this and reduces zoom scale */
}

/* --------- 560 --------- */
@media (max-width: 560px) {
  :root { --gutter: 18rem; }
  .services__grid { grid-template-columns: 1fr; }
  .news__grid     { grid-template-columns: 1fr; }
  .timeline__nodes { grid-template-columns: 1fr; row-gap: 40rem; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 14rem; }
  .stat { padding: 22rem 20rem; }
  .stat__num { font-size: 40rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom-inner { flex-direction: column; text-align: center; gap: 12rem; }
  .footer__newsletter-field { flex-direction: column; border-radius: var(--r-lg); padding: 14rem; }
  .footer__newsletter-btn { width: 100%; justify-content: center; }
  .footer__newsletter-input { padding-block: 8rem; }
  .cta__phone { width: 220rem; height: 440rem; }
  .testimonial__quote { font-size: 110rem; }
}

/* --------- 380 --------- */
@media (max-width: 380px) {
  .hero__title { font-size: 38rem; }
  .h-display   { font-size: 32rem; }
  .btn         { padding: 14rem 22rem; font-size: 12rem; }
}

/* Touch devices — disable custom cursor */
@media (hover: none), (pointer: coarse) {
  html, body, * { cursor: auto !important; }
  .cursor { display: none !important; }
}