/* =========================================================
   RESPONSIVE — tablet (1024px), tablet-small (768px), mobile (560px)
   Mobile is a distinct composition, not a shrunk desktop.
   ========================================================= */

/* ---------- Large desktop guard ---------- */
@media (min-width:2560px){
  :root{ --container:1760px; }
}

/* ---------- Tablet: 1024px ---------- */
@media (max-width:1024px){
  .nav-links{gap:26px;}

  .hero{padding-top:110px;}
  .hero-inner{grid-template-columns:1fr;gap:60px;}
  .hero-portrait{
    order:-1;
    height:56vh;
    max-height:520px;
  }
  .hero-copy{max-width:640px;}
  .hero-desc{max-width:100%;}

  .modal-inner{grid-template-columns:1fr;overflow-y:auto;}
  .modal-media{max-height:50vh;}

  .split-feature{min-height:460px;}

  .masonry{columns:3 200px;}

  .software-grid{grid-template-columns:repeat(4,1fr);}
  .clients-wall{grid-template-columns:repeat(4,1fr);}

  .about-grid{grid-template-columns:1fr;}
  .about-portrait{position:relative;top:0;max-width:420px;}

  .contact-grid{grid-template-columns:1fr;}
  .contact-side{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:40px;}

  .process-grid{grid-template-columns:repeat(3,1fr);row-gap:44px;}
  .process-line{display:none;}
}

/* ---------- Tablet-small / large mobile: 768px ---------- */
@media (max-width:768px){
  :root{ --gutter:20px; }

  .nav-links,.nav-cta{display:none;}
  .nav-burger{display:block;}

  html.has-custom-cursor{cursor:auto !important;}
  html.has-custom-cursor *{cursor:auto !important;}
  .cursor-dot,.cursor-ring{display:none !important;}

  .hero{padding-top:100px;min-height:100svh;}
  .hero-title{font-size:clamp(38px,11vw,58px);}
  .hero-portrait{
    height:44vh;
    min-height:300px;
    max-height:400px;
  }
  .portrait-frame{width:80%;}
  .portrait-thumb{display:none;}
  .hero-actions{flex-direction:column;align-items:flex-start;}
  .hero-scroll{display:none;}

  .section{padding:90px 0;}
  .section-head{flex-direction:column;align-items:flex-start;gap:16px;}

  .masonry{columns:2 160px;column-gap:12px;}
  .g-item{margin-bottom:12px;}

  .filters{gap:8px;}
  .filter-btn{padding:8px 14px;font-size:11px;}

  .modal{padding:16px;}
  .modal-close{top:16px;right:16px;width:36px;height:36px;}
  .modal-nav{padding:0 10px;}

  .split-feature{min-height:380px;}
  .split-feature-content{padding:28px 22px;}

  .service-row{grid-template-columns:40px 1fr auto;gap:14px;}
  .service-tag{display:none;}

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

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

  .footer-top{flex-direction:column;gap:36px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}

  .contact-title{font-size:clamp(36px,11vw,64px);}
  .about-portrait{max-width:100%;}
}

/* ---------- Mobile: 560px and below ---------- */
@media (max-width:560px){
  .loader-mark{font-size:34px;}

  .hero-inner{gap:36px;}
  .hero-portrait{height:38vh;min-height:260px;}
  .eyebrow-tag{margin-bottom:16px;}
  .hero-roles{font-size:12px;gap:6px 16px;}
  .hero-desc{font-size:14px;}
  .btn{padding:14px 22px;font-size:12px;width:100%;justify-content:center;}
  .hero-actions{width:100%;}

  .marquee-track span{font-size:32px;padding:0 20px;}

  .masonry{columns:1;}
  .g-item{width:100%;}

  .modal-inner{max-height:92vh;}
  .modal-info{gap:12px;}
  .modal-meta{grid-template-columns:1fr;}

  .service-row{padding:22px 0;}
  .service-name{font-size:20px;}

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

  .process-grid{grid-template-columns:1fr 1fr;row-gap:32px;}

  .testi-card{width:88vw;padding:24px;}

  .contact-hero{padding:130px 0 60px;}
  .field input,.field select,.field textarea{font-size:16px;}

  .hcard{width:72vw;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .marquee-track{animation:none !important;}
}

/* ---------- Fine pointer only: enable custom cursor ---------- */
@media (hover:hover) and (pointer:fine){
  html.has-custom-cursor{cursor:none;}
}