/* ========== Nav mobile: up to 1024px ========== */
@media (max-width: 1024px) {
  .navbar__toggle {
    display: flex;
  }

  /* backdrop-filter on .navbar creates a containing block that traps
     the fixed-position .navbar__links panel inside the navbar height.
     Disabling it on mobile lets the panel cover the full viewport.
     The near-opaque background colour keeps the visual effect. */
  .navbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .navbar__links {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: rgba(7, 7, 8, 0.98);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }

  .navbar__links.open {
    transform: translateX(0);
  }

  .navbar__links a {
    font-size: 1.2rem;
  }

  .navbar__group {
    flex-direction: column;
    gap: 1.5rem;
  }

  .navbar__label {
    font-size: 1.3rem;
    margin-right: 0;
    margin-bottom: -0.5rem;
  }

  .navbar__divider {
    width: 60px;
    height: 1px;
    margin: 0;
  }
}

/* ========== Mobile: up to 768px ========== */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  section {
    padding: 3rem 0;
  }

  /* Hero */
  .hero__inner {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }

  .hero__content {
    text-align: center;
  }

  .hero__subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__logo-wrap {
    width: 200px;
    height: 200px;
  }

  .hero__tagline-top {
    font-size: 1.2rem;
  }

  .hero__tagline-bottom {
    font-size: 2.8rem;
  }

  .hero__subtitle {
    font-size: 1rem;
  }

  /* Grids */
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  /* VFX Showcase */
  .vfx-showcase {
    gap: 3rem;
  }

  .vfx-card__body {
    padding: 1.5rem;
  }

  .vfx-card__body h3 {
    font-size: 1.25rem;
  }

  .vfx-card__description {
    font-size: 0.8rem;
  }

  .creature-shelf {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .creature-slot__name {
    font-size: 1rem;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  /* Specs */
  .specs-grid {
    grid-template-columns: 1fr;
  }

  /* Team */
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Locations */
  .locations {
    flex-direction: column;
    align-items: center;
  }

  /* Product Hero */
  .product-hero__header {
    flex-direction: column;
    gap: 1.5rem;
  }

  .product-hero__cta {
    align-items: stretch;
    width: 100%;
  }

  .product-hero__title {
    font-size: 2.2rem;
  }

  /* Banner variant – taller ratio so content isn't clipped on mobile */
  .product-hero.product-hero--banner {
    aspect-ratio: 3 / 4;
    align-items: flex-end;
    padding-bottom: 2rem;
  }

  .product-hero.product-hero--banner .product-hero__header {
    padding: 0 1rem;
  }

  .product-hero.product-hero--banner .product-hero__info {
    padding: 1.25rem 1.25rem;
    flex-direction: column;
    gap: 1rem;
  }

  .product-hero.product-hero--banner .product-hero__cta {
    width: 100%;
  }

  .product-hero.product-hero--banner .product-hero__title {
    font-size: 1.8rem;
  }

  .product-hero.product-hero--banner .product-hero__description {
    font-size: 0.95rem;
  }

  /* Gallery */
  .gallery__grid,
  .gallery__grid--two-col,
  .gallery__grid--three-col {
    grid-template-columns: 1fr;
  }

  /* Tech Table */
  .tech-table__row {
    grid-template-columns: 1fr;
  }

  .tech-table__label {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 1rem;
  }

  .tech-table__value {
    padding: 0.75rem 1rem;
  }

  /* Feature Highlights */
  .feature-highlights {
    grid-template-columns: 1fr;
  }

  .deliverables-grid,
  .proof-grid {
    grid-template-columns: 1fr;
  }

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

  .product-meta-row {
    gap: 0.5rem;
  }

  /* Two Column */
  .two-column {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .two-column--reverse {
    direction: ltr;
  }

  /* Collaborator Grid */
  .collaborator-grid {
    grid-template-columns: 1fr;
  }

  /* Sticky CTA */
  .sticky-cta {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
  }

  .sticky-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Logo Scroller */
  .logo-scroller {
    padding: 1.5rem 0;
  }

  .logo-scroller__header {
    margin-bottom: 2rem;
    padding: 0 1rem;
  }

  .logo-scroller__header h3 {
    font-size: 1.2rem;
  }

  .logo-scroller__header p {
    font-size: 0.85rem;
  }

  .logo-scroller__track {
    gap: 1.5rem;
  }

  .logo-scroller__item {
    width: 160px;
    height: 80px;
  }

  .logo-scroller__wrapper {
    max-width: 100%;
  }

  .logo-scroller__wrapper::before,
  .logo-scroller__wrapper::after {
    width: 60px;
  }

  .logo-placeholder {
    font-size: 0.6rem;
  }
}

/* ========== Tablet: 769px to 1024px ========== */
@media (min-width: 769px) and (max-width: 1024px) {
  .creature-shelf {
    grid-template-columns: repeat(3, 1fr);
  }

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

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

  .hero__tagline-top {
    font-size: 1.5rem;
  }

  .hero__tagline-bottom {
    font-size: 3.5rem;
  }

  .hero__logo-wrap {
    width: 240px;
    height: 240px;
  }

  .hero__inner {
    gap: 2.5rem;
  }

  .product-hero__title {
    font-size: 3rem;
  }

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

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

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