/* ==========================================================================
   CPM SYSTEMS — Responsive layer
   Desktop-first overrides, tuned for 1920 / 1440 / 1366 / 1024 / 768 /
   430 / 390 / 360. Mobile gets its own UX (bottom CTA bar, swipeable
   rails, stacked timelines) rather than a squeezed desktop layout.
   ========================================================================== */

/* ≥1600 — large desktop: allow a touch more breathing room */
@media (min-width: 1600px) {
  :root { --container: 1400px; }
  .cat-grid { grid-auto-rows: 190px; }
}

/* ≤1366 — laptop */
@media (max-width: 1366px) {
  .nav__link { padding-inline: .6rem; font-size: .88rem; }
  .nav__link::after { left: .6rem; right: .6rem; }
  .header-inner { gap: 1.25rem; }
}

/* ≤1200 — small laptop: hero cards move under content */
@media (max-width: 1200px) {
  .hero__cards { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .75rem; }
  .float-card { min-width: 0; }
  .float-card:nth-child(2) { margin-right: 0; }
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 3rem; }
  .timeline::before, .timeline__progress { display: none; }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1201px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ≤1100 — nav collapses to burger (tablet landscape 1024 included) */
@media (max-width: 1100px) {
  :root { --header-h: 72px; }
  .brand__logo, .site-header.is-solid .brand__logo { height: 38px; }
  .nav, .header-cta { display: none; }
  .burger { display: block; margin-left: auto; }
  .trust__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.5rem; }
  .trust__item:nth-child(4) { border-left: 0; padding-left: 0; }
  .trust__item:first-child { border-left: 0; padding-left: 0; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-card--feature { grid-column: 1 / -1; }
  .plist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .machine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lightbox .modal__nav--prev { left: .5rem; }
  .lightbox .modal__nav--next { right: .5rem; }

  /* Category grid: simpler 2-col editorial rhythm */
  .cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 150px; }
  .cat-card, .cat-card:nth-child(n) { grid-column: span 3; grid-row: span 2; }
  .cat-card:nth-child(1) { grid-column: span 6; grid-row: span 3; }
  .cat-card:nth-child(4) p, .cat-card:nth-child(5) p { display: block; }
}

/* ≤991 — tablet portrait */
@media (max-width: 991px) {
  .split__media .frame { aspect-ratio: 4 / 3; }
  .split__media .frame--inset { right: .75rem; bottom: -1.5rem; width: 38%; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
  .mfg-media { grid-template-columns: 1fr; }
  .mfg-media .frame:nth-child(2) { aspect-ratio: 16/9; }
  .ba { aspect-ratio: 4 / 3; }
  .modal { padding: 0; }
  .modal__dialog { border-radius: 0; height: 100%; }
  .modal__main { min-height: 52vw; }
  .footer-top h2 { max-width: none; }
  .cat-card p { max-height: 6em; opacity: 1; }
}

/* ≤767 — large phones / small tablets: dedicated mobile UX */
@media (max-width: 767px) {
  .hero__cards, .trust__list, .cat-grid, .filters, .viz__tablist, .showcase__thumbs { scroll-padding-inline: var(--gutter); }
  :root { --section-y: 4.25rem; }
  body { padding-bottom: 72px; } /* space for the mobile CTA bar */

  h2 { font-size: clamp(1.85rem, 1.3rem + 3vw, 2.4rem); }

  .hero { align-items: flex-end; padding-bottom: 6.5rem; }
  .hero__overlay { background: linear-gradient(to top, rgba(8,28,25,.97) 20%, rgba(11,39,35,.7) 60%, rgba(11,39,35,.45)); }
  .hero__title { font-size: clamp(2.35rem, 1.6rem + 5.5vw, 3.2rem); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  /* Cards become a swipeable rail */
  .hero__cards { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .hero__cards::-webkit-scrollbar { display: none; }
  .float-card { flex: 0 0 auto; scroll-snap-align: start; padding: .8rem 1rem; animation: none; }
  .hero__meta .mono.hide-sm { display: none; }
  .hero__meta { display: none; }

  .trust .container { padding-block: 2rem; }
  .trust__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .trust__list::-webkit-scrollbar { display: none; }
  .trust__item, .trust__item:nth-child(n) { flex: 0 0 44%; scroll-snap-align: start; padding-inline: 0 1rem; border-left: 0; border-right: 1px solid var(--border); margin-right: 1rem; }

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

  /* Category cards: horizontal snap rail feels native on phones */
  .cat-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .75rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: .5rem; scrollbar-width: none; }
  .cat-grid::-webkit-scrollbar { display: none; }
  .cat-card, .cat-card:nth-child(n) { flex: 0 0 78%; min-height: 380px; scroll-snap-align: start; }
  .cat-card p { max-height: none; opacity: 1; }
  .rail-hint { display: flex !important; }

  .showcase__thumbs { display: flex; overflow-x: auto; scrollbar-width: none; }
  .showcase__thumbs .thumb { flex: 0 0 26%; }
  .showcase__actions .btn { flex: 1; }

  .flow { grid-template-columns: 1fr; }
  .floorplan { padding: .5rem; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding-top: 1.5rem; }

  /* Timeline goes vertical */
  .timeline { grid-template-columns: 1fr; row-gap: 0; margin-top: 2.5rem; }
  .timeline::before { display: block; left: 22px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .timeline__progress { display: block; left: 22px; top: 0; width: 1px !important; height: 0; transition: height 1.6s var(--ease-in-out); }
  .timeline.is-inview .timeline__progress { height: 100%; }
  .timeline__item { display: grid; grid-template-columns: 45px 1fr; column-gap: 1.25rem; padding-bottom: 1.75rem; }
  .timeline__item h3 { margin-top: .6rem; }
  .timeline__item p { grid-column: 2; }

  .features { grid-template-columns: 1fr; }
  .feature { padding: 1.75rem 1.5rem; display: grid; grid-template-columns: 56px 1fr; column-gap: 1.25rem; }
  .feature__icon { margin-bottom: 0; grid-row: span 2; }
  .feature__num { display: none; }

  .filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filter-btn { flex: none; }
  .masonry { columns: 1; }
  .project-card__open { opacity: 1; transform: none; width: 38px; height: 38px; }

  .ba { aspect-ratio: 4 / 5; }
  .ba__knob { width: 48px; height: 48px; }

  .viz__tablist { display: flex; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .viz__tab { flex: 0 0 72%; }
  .viz__stage { aspect-ratio: 4 / 3; }

  .finish__swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
  .finish-swatch small { display: none; }

  .testi__controls .round-btn { width: 46px; height: 46px; }
  .testi-card figcaption { flex-wrap: wrap; }
  .testi-card .tag { margin-left: 0; }

  .process { grid-template-columns: 1fr; gap: 0; padding-left: 1.75rem; }
  .process-wrap .process__line { display: block; left: 5px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .process-wrap .process__line span { width: 100%; height: var(--progress, 0%); }
  .process__step { padding: 0 0 2rem; }
  .process__step::before { left: calc(-1.75rem + 0px); top: .35rem; }
  .process__num { font-size: 1.6rem; }

  .blog-grid { grid-template-columns: 1fr; }
  .post-card--feature h3 { font-size: 1.35rem; }

  .form-grid { grid-template-columns: 1fr; }
  .form-foot { flex-direction: column; align-items: stretch; }
  .form-foot .btn { width: 100%; }

  .contact-grid { grid-template-columns: 1fr; }
  .map-ph { aspect-ratio: 4 / 3; }

  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .plist { grid-template-columns: 1fr; }
  .search { max-width: none; }
  .values { grid-template-columns: 1fr; }
  .machine-grid { grid-template-columns: 1fr; }
  .milestone { grid-template-columns: 1fr; gap: .25rem; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; gap: .5rem; }
  .gallery-item--wide { grid-column: span 2; }
  .gallery-item .cap { transform: none; font-size: .75rem; padding: .6rem; }

  .cta-band .actions .btn { flex: 1; }

  /* Floating actions → bottom CTA bar */
  .fab-stack { display: none; }
  .to-top { left: auto; right: 1rem; bottom: 88px; width: 46px; height: 46px; }
  .mobile-cta {
    display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: .5rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 850;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    transform: translateY(110%); transition: transform .45s var(--ease);
  }
  .mobile-cta.is-visible { transform: none; }
  .mobile-cta a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    min-height: 52px; border-radius: var(--radius-sm); font-size: .72rem; font-weight: 600; color: var(--dark);
    background: var(--stone);
  }
  .mobile-cta a .icon { width: 20px; height: 20px; }
  .mobile-cta a.wa { color: #15803D; }
  .mobile-cta a.quote { flex-direction: row; gap: .5rem; background: var(--primary); color: var(--white); font-size: .88rem; }
}

/* ≤430 — iPhone Pro Max class */
@media (max-width: 430px) {
  .hero__text { font-size: 1rem; }
  .cat-card, .cat-card:nth-child(n) { flex-basis: 86%; min-height: 360px; }
  .showcase__thumbs .thumb { flex-basis: 30%; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .modal__meta { grid-template-columns: 1fr; }
}

/* ≤390 */
@media (max-width: 390px) {
  .trust__item, .trust__item:nth-child(n) { flex-basis: 52%; }
  .finish__swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .viz__tab { flex-basis: 84%; }
}

/* ≤360 — small Android */
@media (max-width: 360px) {
  :root { --gutter: 1rem; }
  .hero__title { font-size: 2.15rem; }
  .btn { padding-inline: 1.2rem; }
  .mobile-cta { grid-template-columns: 1fr 1fr 1.3fr; }
  .footer-cols { grid-template-columns: 1fr; }
}

/* Touch devices: surface hover-only content */
@media (hover: none) {
  .cat-card p { max-height: none; opacity: 1; }
  .project-card__open { opacity: 1; transform: none; }
  .gallery-item .cap { transform: none; }
}

.rail-hint { display: none; align-items: center; gap: .5rem; margin-top: 1rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Print */
@media print {
  .site-header, .fab-stack, .mobile-cta, .to-top, .page-loader, .cursor, .cursor-dot, .hero__canvas { display: none !important; }
  .hero, .page-hero { min-height: 0; color: #000; background: none; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}