/* ============================================================
   Phoenix Forge Studios — responsive.css
   All breakpoints in one place.
   ============================================================ */

@media (max-width:960px){
  .div-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr;gap:26px}
}

@media (max-width:860px){
  .hero-in{grid-template-columns:1fr;text-align:center;gap:24px}
  .hero .eyebrow{display:inline-block}
  .hero p{margin-inline:auto}
  .hero-cta{justify-content:center}
  .hero-art{order:-1}
  .hero-art img{width:min(58%,260px)}
  .flag-grid{grid-template-columns:1fr;gap:26px}
  .flag-visual{min-height:260px}
}

@media (max-width:760px){
  .nav-links{position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;gap:0;
    background:rgba(11,7,16,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);padding:10px 0;
    transform:translateY(-120%);transition:transform .3s ease;pointer-events:none}
  .nav-links.open{transform:translateY(0);pointer-events:auto}
  .nav-links a{width:100%;padding:14px 24px;font-size:1rem}
  .nav-links .nav-cta{margin:8px 24px;text-align:center}
  .nav-toggle{display:flex}
}

@media (max-width:640px){
  .val-grid{grid-template-columns:1fr;gap:8px}
  .foot-cols{gap:32px}
}

@media (max-width:520px){
  .div-grid{grid-template-columns:1fr}
}