/* Homepage-only responsive and interaction corrections.
   The approved hero study files remain the visual source of truth. */

/* The motion control is intentionally not part of the approved visible design.
   Removing it from layout also prevents keyboard focus from moving off-screen. */
.preview-motion-control {
  display: none !important;
}

/* Keep the visible progress rule unchanged while providing a 44px control area. */
.preview-progress-segments {
  inset: -22px 0;
}

.preview-progress-segment::after {
  top: 22px;
}

/* The 1280px study layout has fixed minimum columns totalling 1068px.
   Below 1025px, allow both columns to shrink intrinsically instead. */
@media (min-width: 769px) and (max-width: 1024px) {
  .preview-hero {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  }

  .preview-narrative-final {
    width: 100%;
    font-size: clamp(2.6rem, 5.2vw, 3.2rem);
  }

  .preview-hero-note {
    width: 100%;
    max-width: 100%;
  }

  /* Give each duplicated logo group its intrinsic width so names cannot collide. */
  .preview-proof-track {
    width: max-content;
  }

  .preview-proof-group {
    flex: 0 0 auto;
    min-width: max-content;
    justify-content: flex-start;
    padding-right: 32px;
  }
}

/* Preserve image height at short laptop/tablet heights and finish metadata before
   the absolutely positioned proof strip begins. */
@media (min-width: 769px) and (max-width: 1024px) and (min-height: 601px) and (max-height: 850px) {
  .preview-selected-work {
    min-height: 58px;
  }

  .preview-project-meta {
    margin-top: 0;
  }
}

/* Short landscape needs document flow because a complete hero cannot fit inside
   one 390–430px visual viewport. The composition remains two-column and scrolls. */
@media (min-width: 769px) and (max-width: 1024px) and (max-height: 600px) {
  .preview-hero {
    height: auto;
    min-height: 0;
    padding-bottom: 0;
    grid-template-rows: auto auto;
    align-items: start;
  }

  .preview-image-stage {
    height: clamp(240px, 38vw, 320px);
  }

  .preview-selected-work {
    min-height: 66px;
  }

  .preview-project-meta {
    margin-top: 0;
  }

  .preview-proof-strip {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    margin: 32px -48px 0;
    grid-column: 1 / -1;
  }
}

/* At the mobile/tablet boundary, the rendered headline is taller than its parent. */
@media (min-width: 600px) and (max-width: 768px) {
  .preview-narrative {
    height: 220px;
  }
}

/* The compact desktop composition only needs ten pixels less metadata spacing. */
@media (min-width: 1281px) and (max-height: 800px) {
  .preview-project-meta {
    margin-top: 8px;
  }
}

/* Preserve visible control sizes while expanding touch hit areas. */
@media (hover: none), (pointer: coarse) {
  body,
  body a,
  body button,
  body input,
  body textarea,
  body [role="button"] {
    cursor: auto !important;
  }

  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }

  .nav-item::after {
    content: "";
    position: absolute;
    inset: -14px -10px;
  }

  .nav-item.nav-cta::after {
    inset: -3px -6px;
  }
}

.menu-toggle {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.modal-close-btn {
  min-height: 44px;
}

.modal-content-wrapper {
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
}

.modal-scroll-container {
  min-height: 0;
  overscroll-behavior: contain;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track,
  .clients-marquee-track {
    animation: none !important;
    transform: none !important;
  }
}