/* Mini mobile version: loaded on every page, active only on phones/tablets */
@media (max-width: 767px), (pointer: coarse) and (max-width: 1024px) {
  html { width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
  body { width: 100%; overflow-x: hidden; touch-action: manipulation; }

  *, *::before, *::after { box-sizing: border-box; }
  img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
  a, button, input, textarea, select { -webkit-tap-highlight-color: transparent; }

  :root {
    --space-ys: 1rem;
    --space-ym: 1.25rem;
    --space-yl: 1.5rem;
  }

  .custom-cursor { display: none !important; }
  body::before, body::after { opacity: .55; transform: scale(.75); }

  .container,
  .nav-inner,
  header.container,
  main.container,
  section.container,
  footer.container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  header.container,
  main.container,
  section.container,
  footer.container {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .nav { position: sticky !important; top: 0; z-index: 50; }
  .nav-inner {
    gap: .6rem !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    padding-top: .65rem !important;
    padding-bottom: .65rem !important;
  }
  .nav a,
  .nav .brand {
    font-size: .82rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  h1 { font-size: clamp(1.8rem, 9vw, 2.55rem) !important; line-height: .98 !important; }
  h2 { font-size: clamp(1.25rem, 6vw, 1.55rem) !important; line-height: 1.08 !important; }
  h3 { font-size: 1.05rem !important; }
  p, li, label, input, textarea, select { font-size: .95rem !important; }

  .hero,
  .card,
  .tile,
  .linkx,
  .tilt-card,
  .studio-card {
    border-radius: 16px !important;
  }

  .hero {
    min-height: 260px !important;
    padding: 1rem !important;
    overflow: hidden !important;
  }
  .hero__content {
    max-width: 100% !important;
    padding: .25rem !important;
  }
  .hero__bg {
    background-size: cover !important;
    background-position: center center !important;
    transform: none !important;
    opacity: .86 !important;
  }
  .hero__overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.74), rgba(0,0,0,.50) 52%, rgba(0,0,0,.72)) !important;
  }
  .chip { font-size: .78rem !important; padding: .3rem .55rem !important; max-width: 100%; }

  #parallax-bg > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }

  .grid,
  .grid-contact,
  .grid-page,
  .lg\:grid-cols-3,
  .lg\:grid-cols-2,
  .sm\:grid-cols-2,
  .sm\:grid-cols-3,
  .md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  .lg\:col-span-2,
  .lg\:col-span-1,
  .sm\:col-span-2,
  .md\:col-span-2 {
    grid-column: auto !important;
  }

  .tile,
  .linkx {
    min-height: auto !important;
    padding: .9rem !important;
    overflow: hidden !important;
    transform: none !important;
  }
  .tile:hover,
  .linkx:hover,
  .btn:hover,
  .proj:hover { transform: none !important; }

  .tilex .tile__content {
    height: auto !important;
    min-height: 74px !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }
  .tilex .tile__header,
  .tilex .tile__desc {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .tilex .tile__desc { margin-top: .35rem !important; font-size: .86rem !important; opacity: .78 !important; }
  .tilex .tile__media {
    position: relative !important;
    width: 100% !important;
    height: 120px !important;
    margin-top: .75rem !important;
    clip-path: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    opacity: .92 !important;
  }
  .tilex .tile__media::before {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .tilt-wrap,
  .tilt-card,
  .tilt-surface {
    transform: none !important;
    perspective: none !important;
  }
  .tilt-card {
    aspect-ratio: 4 / 5 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .tilt-img > img,
  .img-main {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }
  .tilt-content {
    padding: .85rem !important;
    transform: none !important;
  }
  .tilt-glare { display: none !important; }

  .studio-card {
    min-height: 96px !important;
    padding: .9rem !important;
    transform: none !important;
    overflow: hidden !important;
  }
  .studio-img {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 110px !important;
    margin-top: .75rem !important;
    transform: none !important;
    opacity: .9 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }
  .studio-img img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .proj {
    padding: .85rem !important;
    gap: .8rem !important;
    align-items: flex-start !important;
  }
  .proj img,
  img.w-16.h-16 {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
    flex: 0 0 48px !important;
  }
  .space-list { max-height: none !important; overflow: visible !important; }

  .linkx .desc {
    position: static !important;
    transform: none !important;
    opacity: .78 !important;
    margin-top: .45rem !important;
  }
  .linkx .header { transform: none !important; opacity: 1 !important; }
  .linkx .ico { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; }

  form,
  .field,
  input,
  textarea,
  select,
  button,
  .btn {
    max-width: 100% !important;
  }
  input,
  textarea,
  select {
    min-height: 46px !important;
    border-radius: 12px !important;
  }
  textarea, .textarea { min-height: 130px !important; }
  .btn { width: 100% !important; justify-content: center !important; }

  iframe,
  .embed-card iframe {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 12px !important;
  }

  .game-wrap {
    width: calc(100vw - 20px) !important;
    height: 62vh !important;
    border-radius: 14px !important;
  }

  .p-7, .p-10, .lg\:p-12, .sm\:p-10 { padding: 1rem !important; }
  .p-5, .sm\:p-6, .sm\:p-7 { padding: .95rem !important; }
  .gap-6 { gap: 1rem !important; }
  .gap-4 { gap: .85rem !important; }
  .mt-8 { margin-top: 1.1rem !important; }
  .mt-6 { margin-top: .9rem !important; }

  [style*="margin-top:var(--space-ym)"] { margin-top: 1rem !important; }
}

@media (max-width: 380px) {
  .container,
  .nav-inner,
  header.container,
  main.container,
  section.container,
  footer.container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  h1 { font-size: clamp(1.55rem, 8vw, 2.05rem) !important; }
  .hero { min-height: 230px !important; }
  .tilex .tile__media, .studio-img { height: 96px !important; }
  .tilt-card { aspect-ratio: 1 / 1.18 !important; }
}