/* =========================================================
   THE ANAYET — responsive breakpoints (mobile-first, min-width)
   320 / 480 / 640 / 768 / 1024 / 1280 / 1600
   ========================================================= */

/* very small phones (<= 360px) */
@media (max-width:360px){
  :root{--gutter:14px}
  .brand{font-size:1.35rem}
  .btn{padding:11px 16px;font-size:.96rem}
  .hero-actions .btn{flex:1 1 100%}
  .float-card{padding:9px 12px}
  .float-card b{font-size:1.05rem}
  .fc-projects{right:-2px}
  .fc-based{left:-2px}
  .chip{font-size:.86rem;padding:7px 10px}
}

/* large phones */
@media (min-width:480px){
  .hero-actions .btn{flex:0 1 auto}
  .info-trio{grid-template-columns:1fr}
  .c-act{display:inline-flex}
}

/* small tablets */
@media (min-width:640px){
  .grid-services{grid-template-columns:repeat(2,1fr)}
  .form-grid.two{grid-template-columns:1fr 1fr}
  .form-foot{grid-template-columns:auto 1fr}
  .stats{grid-template-columns:repeat(4,auto);justify-content:space-between;gap:14px}
  .stat,.stat:nth-child(odd){border-left:1px solid var(--line);padding-left:18px}
  .stat:first-child{border-left:0;padding-left:0}
  .info-trio{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr}
  .foot-bottom{flex-direction:row;justify-content:space-between}
  .modal{align-items:center;padding:24px}
  .modal-box{border-radius:22px;padding:30px}
  .page-hero .script{display:block}
}

/* tablets */
@media (min-width:768px){
  .about-grid{grid-template-columns:minmax(260px,.8fr) 1.5fr;align-items:start}
  .about-photo{position:sticky;top:calc(var(--header-h) + 16px)}
  .cta-band{grid-template-columns:1.4fr auto;align-items:center}
  .cta-band .actions{justify-content:flex-end}
  .proj-card{flex-direction:row;align-items:stretch}
  .grid-projects.is-single .proj-card .pc-copy{flex:1 1 40%}
}

/* laptops: desktop navigation + two-column hero */
@media (min-width:1024px){
  :root{--header-h:78px}
  .menu-toggle,.mobile-menu{display:none}
  .nav-links{display:flex;gap:clamp(18px,2.6vw,38px)}
  .nav-cta{display:flex}
  .hero-grid{grid-template-columns:1.12fr .88fr;gap:56px}
  .hero-media{margin-inline:0 0;max-width:none}
  .grid-services{grid-template-columns:repeat(3,1fr)}
  .contact-grid{grid-template-columns:.95fr 1.05fr;align-items:start}
  .foot-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}
  .grid-projects{grid-template-columns:repeat(2,1fr)}
  .proj-card .pc-copy{flex:1 1 42%}
  .proj-card .pc-img{flex:1 1 58%;aspect-ratio:16/9;align-self:center}
  .fc-projects{right:-26px}
  .fc-based{left:-30px}
}

/* mid-width laptops: keep project cards stacked in 2 cols so text never squeezes */
@media (min-width:1024px) and (max-width:1279px){
  .proj-card{flex-direction:column-reverse}
  .proj-card .pc-img{flex:none;aspect-ratio:16/9;align-self:auto}
}

/* desktop */
@media (min-width:1280px){
  .proj-card{flex-direction:row}
  .proj-card .pc-img{flex:1 1 58%;aspect-ratio:16/9;align-self:center}
}

/* wide monitors */
@media (min-width:1600px){
  :root{--wrap:1320px}
  html{font-size:17px}
}

/* landscape phones: short viewports */
@media (max-height:480px) and (orientation:landscape){
  .mobile-menu{padding-top:8px}
  .mobile-menu a.m-link{padding:10px 4px;font-size:1.1rem}
}

/* hover-less devices: remove sticky hover states, keep tap targets large */
@media (hover:none){
  .proj-card:hover,.svc-card:hover,.c-item:hover,.btn:hover{transform:none}
}