/* Responsive overrides — all @media breakpoints */

@media (prefers-reduced-motion: reduce){
    .ambient{ animation:none; }
  }
@media (max-width: 860px){ .nav-links{ display:none; } }
@media (max-width:860px){
    .nav-burger{ display:flex; }
  }
@media (min-width:861px){ .mobile-nav{ display:none; } }
@media (max-width:700px){
    .ribbon-tag{ font-size:.6rem; padding:6px 11px; }
    .ribbon-btn{ font-size:.76rem; padding:11px 18px; }
  }
@media (max-width:700px){
    .peek-text{ font-size:clamp(1.6rem, 9vw, 2.4rem); }
    .peek-tr{ top:46%; right:-4%; }
    .peek-bl{ bottom:20%; left:-4%; }
  }
@media (max-width: 900px){
    .pin-wrapper{ height:auto; }
    .pin-stage{
      position:relative; height:auto; min-height:0; overflow:visible;
      display:flex; flex-direction:column; align-items:center;
      padding:130px 20px 60px;
    }
    .hero-copy{
      position:relative; top:auto; left:auto; transform:none;
      width:100%; max-width:560px; margin:0 auto 40px;
    }
    /* Decorative bleed-off-screen text and the small comment-bubble tags are
       tuned for a wide pinned stage; on a stacked column they'd just float
       over other content, so they're hidden rather than repositioned. */
    .peek-text, .ribbon-tag{ display:none; }
    .card-stage{
      position:relative; left:auto; top:auto; transform:none !important;
      width:min(72vw,300px); height:auto; aspect-ratio:340 / 440; margin:0 auto 28px;
    }
    .ribbon-cta{
      position:relative; left:auto; top:auto; transform:none;
      opacity:1 !important; pointer-events:auto; margin:0 auto 8px;
      justify-content:center; flex-wrap:wrap;
    }
    .scroll-hint{ display:none; }
    .about-copy{
      position:relative !important; left:auto; top:auto; transform:none !important;
      width:100%; max-width:560px; margin:56px auto 0; padding-top:0; text-align:left;
      opacity:1 !important; visibility:visible !important;
    }
    .pin-wrapper{
      height:auto !important;
      min-height:auto !important;
    }
    .hero-copy{
      padding:0 12px;
      max-width:92vw;
      margin:0 auto 32px;
      text-align:center;
    }
    .card-stage{
      width:min(86vw,320px);
      max-width:340px;
      margin:0 auto 28px;
    }
    .about-copy{
      max-width:92vw;
      padding:0 16px;
      margin:36px auto 0;
    }
    .about-heading{ font-size:clamp(2rem, 6vw, 2.7rem); }
    .about-para{ font-size:1rem; line-height:1.75; max-width:100%; }
    .projects-carousel{
      flex-direction:column;
      align-items:center;
      gap:18px;
    }
    .carousel-arrow{ width:48px; height:48px; }
    .projects-viewport{ width:92vw; height:auto; min-height:340px; }
    .proj-card{ width:min(84vw,320px); margin-left:calc(min(84vw,320px) / -2); }
    .proc-card{ aspect-ratio:auto; min-height:320px; }
    .proc-card-photo img{ max-height:100%; }
  }

/* force stacking order on small screens so About text stays above cards */
@media (max-width:900px){
  .about-copy{ z-index:6; }
  .card-stage{ z-index:2; }
}

/* Mobile safeguard: ensure injected project cards are visible and participate
   in normal flow when GSAP inline transforms are still present. This uses
   high-specificity !important rules only for small screens. */
@media (max-width:900px){
  .card-stage, .card-stage * { transform: none !important; opacity: 1 !important; visibility: visible !important; }
  .card-stage{ position:relative !important; overflow:visible !important; display:block !important; }
  .pcard{ position:relative !important; display:block !important; transform:none !important; opacity:1 !important; visibility:visible !important; box-shadow:none !important; }
  .pcard .pcard-inner{ transform:none !important; }
}

  @media (max-width:768px){
    .pin-stage{ padding:110px 18px 50px; }
    .card-stage{ width:min(68vw,260px); }
  }

  @media (max-width:480px){
    .pin-stage{ padding:96px 16px 40px; }
    .hero-copy{ margin-bottom:28px; }
    .card-stage{ width:min(62vw,220px); margin-bottom:20px; }
    .ribbon-cta{ gap:10px; }
    .about-copy{ margin-top:36px; }
  }
@media (max-height: 760px) and (min-width: 901px){
    .hero-copy{ top:20%; }
    .hero-heading{ font-size:clamp(2.1rem, 4.4vw, 3.2rem); }
    .card-stage{ top:68%; width:280px; height:360px; }
  }
@media (max-width:760px){
    .gameart-float-hammer{ display:none; }
    .gameart-banner{ min-height:0; padding:44px 20px; }
  }
@media (max-width:640px){
    .gameart-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  }
@media (max-width:760px){
    .test-photo-cluster{ max-width:640px; }
  }

  @media (prefers-reduced-motion: reduce){
    .tpc-slot{ animation:none; }
  }
@media (max-width:760px){
    .test-cluster{ height:320px; max-width:440px; }
    .avatar-chip{ transform:scale(.7); }
    .avatar-chip:hover{ transform:scale(.86) !important; }
    .featured-card{ width:168px; padding:16px 12px 14px; }
    .feat-avatar{ width:72px; height:72px; }
  }

  @media (max-width:480px){
    .test-cluster{ height:260px; max-width:340px; }
    .avatar-chip{ transform:scale(.52); }
    .avatar-chip:hover{ transform:scale(.64) !important; }
  }
@media (max-width:640px){
    .t-card{ width:280px; }
  }
@media (max-width:640px){
    .tool-lane{ height:150px; }
    .tools-grid{ min-height:clamp(430px, 82vw, 500px); }
    .tool-icon{ margin-top:-40px; }
  }
@media (max-width:640px){
    .tool-card{ width:78px; height:80px; border-radius:16px; padding:8px 6px; gap:4px; }
    .tool-card .icon{ width:22px; height:22px; }
    .tool-card .t-name{ font-size:.54rem; }
    .tool-card .t-cat{ font-size:.5rem; }
  }
@media (max-width:640px){ .carousel-arrow{ width:42px; height:42px; } .carousel-arrow svg{ width:16px; height:16px; } }
@media (max-width:760px){ .projects-viewport{ width:min(90vw,420px); height:clamp(300px,90vw,400px); } }
@media (max-width:760px){
    .proj-card{
      width:min(64vw,240px); margin-left:calc(min(64vw,240px) / -2);
      margin-top:calc(min(64vw,240px) * -0.625);
    }
  }
@media (max-width:760px){
    .proj-desc, .proj-fieldtag{ display:none; }
  }
@media (prefers-reduced-motion: reduce){
    .services-head .eyebrow, .services-heading, .services-sub, .services-cta{
      opacity:1; transform:none; transition:none;
    }
  }
@media (max-width: 1080px){
    .services-top{ grid-template-columns: 1fr; }
    .services-head{ grid-column:1; padding-right:0; margin-bottom:14px; }
    .services-top .svc-card.row1{ grid-column: span 1; }
    .services-grid-lower{ grid-template-columns: repeat(3,1fr); }
    .svc-card.featured{ grid-column: span 3; grid-row: auto; min-height:320px; }
  }

  @media (max-width: 900px){
    .services-top{
      display:grid !important;
      grid-template-columns: 1fr !important;
      gap:16px !important;
    }
    .services-top .svc-card.row1{
      display:block !important;
      width:100% !important;
      min-height:240px !important;
    }
    .services-grid-lower{
      grid-template-columns: 1fr !important;
      grid-auto-rows: auto !important;
      gap:16px !important;
    }
    .services-top .svc-card,
    .services-grid-lower .svc-card{
      min-height:220px !important;
    }
    .svc-card.featured{
      grid-column: auto !important;
      grid-row: auto !important;
      min-height:280px !important;
    }
  }
@media (max-width:820px){ .contact-lower{ grid-template-columns:1fr; } }
@media (hover:none){ .cc-ring, .cc-dot{ display:none; } }
@media (max-width:640px){
  .contact-buttons-row{
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
  }
  .glass-btn{
    width:calc(50% - 14px);
    flex-direction:column;
    align-items:center;
    padding:0;
  }
  .glass-btn .label{
    text-align:center;
    width:100%;
  }
}

@media (max-width:560px){
  .footer-social{ order:0; }
  .site-footer{ justify-content:center; text-align:center; }
  .nav-right{ gap:6px; }
  .mobile-nav-links a{ font-size:1.4rem; }
  .glass-btn .circle{ width:52px; height:52px; }
  .glass-btn{
    width:100%;
    flex-direction:row;
    justify-content:flex-start;
    padding:0 12px;
  }
  .glass-btn .label{
    text-align:left;
    margin-left:12px;
    width:auto;
  }
  .contact-buttons-row{ gap:12px; }
}

  @media (max-width:640px){ .proc-section{ border-radius:26px; padding:30px 14px; } }
@media (max-width:900px){
    .proc-head{ min-height:0; }
    .proc-head-illus{ display:none; }
  }

  @media (max-width:640px){
    .proc-headline{ font-size:44px; }
    .proc-head{ flex-direction:column; align-items:flex-start; gap:32px; }
  }
@media (max-width:1100px){ .proc-cards-row{ grid-template-columns:repeat(3, 1fr); row-gap:40px; } }

  @media (max-width:640px){ .proc-cards-row{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:1100px){ .proc-card{ transform:translateY(20px) !important; } .proc-card.in-view{ transform:translateY(0) !important; } }
@media (max-width:1100px){ .proc-steps-row{ grid-template-columns:repeat(3, 1fr); row-gap:32px; } }

  @media (max-width:640px){ .proc-steps-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){
  .proc-summary{
    padding:22px 20px;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
  .proc-summary-left{
    flex:1 1 100%;
    width:100%;
    gap:14px;
    margin-bottom:12px;
  }
  .proc-summary-right{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:14px;
  }
  .proc-summary-right span{
    font-size:.95rem;
    white-space:normal;
    flex:1 1 auto;
    min-width:140px;
  }
  .proc-summary-cta{
    width:auto;
    min-width:150px;
    justify-content:space-between;
    padding:0 14px 0 18px;
    flex:0 0 auto;
  }
  .proc-summary-cta .proc-arrow-wrap{
    width:30px;
    height:30px;
  }
  .proc-summary-cta .proc-arrow-wrap svg{
    width:12px;
    height:12px;
  }
  .proc-progress,
  .proc-progress-label{ display:none; }
}

/* Additional small-screen tweaks for improved mobile layout */
@media (max-width:860px){
  .nav{ padding:14px 16px; }
  .logo img{ height:30px; max-width:140px; }
  .nav-right{ gap:8px; }
}

@media (max-width:480px){
  .hero-heading{ font-size:clamp(1.8rem,6.6vw,2.6rem); }
  .about-para, .contact-sub, .projects-sub{ font-size:.95rem; }
  .ribbon-btn{ padding:10px 14px; }
}

/* Comprehensive mobile collapse rules to ensure each section stacks cleanly */
@media (max-width:900px){
  .gameart-grid{ grid-template-columns:repeat(1,1fr); }
  .tools-grid{ min-height:420px; }
  .services-top{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .services-top .svc-card{
    min-height:240px !important;
  }
  .services-top .svc-card.row1{
    min-height:260px !important;
  }
  .services-grid-lower{
    grid-template-columns:1fr !important;
    grid-auto-rows:auto;
    gap:16px !important;
  }
  .services-grid-lower .svc-card{
    min-height:220px !important;
  }
  .proc-cards-row{ grid-template-columns:1fr !important; }
  .proc-steps-row{ grid-template-columns:1fr !important; }
  .projects-viewport{ width:94vw; height:auto; }
  .proj-card{ width:86vw !important; margin-left:calc(86vw / -2) !important; }
  .test-photo-cluster, .test-cluster{ max-width:100%; height:auto; }
  .avatar-card{ min-height:auto; padding:18px; }
  .avatar-photo-wrap{ aspect-ratio:1/1; height:auto; }
  .contact-banner{
    padding:clamp(32px,7vw,48px) clamp(20px,5vw,28px) 36px;
    min-height:auto;
  }
  .contact-heading-block{ max-width:100%; }
  .contact-heading-block > .eyebrow,
  .contact-heading-block > .contact-heading{ margin-left:0; }
  .contact-heading{ font-size:clamp(1.85rem,6.4vw,2.4rem); line-height:1.08; }
  .contact-sub{ max-width:100%; }
  .contact-buttons-row{ justify-content:flex-start; gap:16px; margin-top:26px; }
  .glass-btn{ flex:1 1 min(220px,70%); }
  .glass-btn .circle{ width:56px; height:56px; }
  .contact-banner{ padding:28px 16px; min-height:auto; }
  .card-stage{ width:min(80vw,340px); height:auto; aspect-ratio:auto; margin-bottom:18px; }
  .hero-copy{ padding:0 8px; }
  .nav{ padding:12px 14px; }
  .mobile-nav{ padding-top: env(safe-area-inset-top, 12px); padding-bottom: env(safe-area-inset-bottom, 12px); }
  .proc-card{
    width:100%;
    min-height:320px;
    aspect-ratio:auto;
  }
  .proc-cards-row{
    gap:18px;
  }
  .proc-card-photo img{
    width:auto;
    max-width:100%;
    max-height:100%;
  }
}

@media (max-width:720px){
  .services-grid-lower{ grid-template-columns:repeat(2,1fr) !important; }
  .svc-card.featured{ grid-column: span 2 !important; }
  .tools-grid{ min-height:360px; }
}

@media (max-width:640px){
  .nav{ padding:10px 12px; }
  .logo img{ height:28px; }
  .icon-btn{ width:44px; height:44px; }
  .carousel-arrow{ width:44px; height:44px; }
  .hero-heading{ font-size:clamp(1.6rem,6.8vw,2.4rem); }
  .about-copy{ padding:0 6px; }
  .contact-heading{ font-size:clamp(1.6rem,6.8vw,2.2rem); }
  .avatar-photo{ object-position:center 40%; }
}

@media (max-width:480px){
  .nav-right{ gap:6px; }
  .mobile-nav-links a{ font-size:1.4rem; }
  .glass-btn .circle{ width:52px; height:52px; }
  .contact-buttons-row{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }
  .glass-btn{ width:100%; flex-direction:row; justify-content:flex-start; gap:14px; padding:0; }
  .glass-btn .label{ text-align:left; }
  .contact-heading{ font-size:clamp(1.6rem,8vw,2.1rem); }
  .contact-sub{ font-size:.95rem; }
}

/* Phone-specific tweaks (typical portrait phones ~360–420px) */
@media (max-width:420px){
  .nav-burger{ width:48px; height:48px; }
  .logo img{ height:26px; }
  .mobile-nav{ align-items:flex-start; padding-top:20vh; padding-left:20px; padding-right:20px; }
  .mobile-nav-links{ gap:1.2rem; }
  .mobile-nav-links a{ padding:12px 6px; display:block; }
  .hero-copy{ padding:0 12px; }
  .hero-heading{ font-size:clamp(1.4rem,9.2vw,2rem); }
  .card-stage{ width:min(86vw,240px); }
  .pcard{ border-radius:18px; }
  .projects-viewport{ height:auto; }
  .carousel-arrow{ width:40px; height:40px; }
  .contact-heading{ font-size:1.6rem; }
  .contact-buttons-row{ flex-direction:column; align-items:center; gap:10px; }
  .glass-btn{ flex-direction:row; align-items:center; gap:12px; }
}

/* Small tablet (portrait/landscape 600–820px) adjustments */
@media (min-width:421px) and (max-width:820px){
  .gameart-grid{ grid-template-columns:repeat(2,1fr); }
  .tools-grid{ min-height:420px; }
  .projects-viewport{ width:92vw; height:auto; }
  .proj-card{ width:min(68vw,320px); margin-left:calc(min(68vw,320px) / -2); }
  .test-photo-cluster{ max-width:92vw; }
  .contact-banner{ padding:36px 22px; }
}

/* Large tablet / small laptop (<=1024px) */
@media (max-width:1024px){
  .services-grid-lower{ grid-template-columns:repeat(3,1fr); }
  .svc-card.featured{ grid-column: span 3; }
  .proc-cards-row{ grid-template-columns:repeat(3,1fr); }
  .proc-steps-row{ grid-template-columns:repeat(3,1fr); }
  .tools-center{ max-width:520px; }
}