/* ==========================================================================
   RESPONSIVE
========================================================================== */

/* ===== Large desktop tighten ===== */
@media (max-width:1200px){
  .hero__portrait{ width:30vw; }
}

/* ===== Tablet ===== */
@media (max-width:1024px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; }

  .hero__portrait{ display:none; }
  .hero__inner{ max-width:640px; }

  .about__grid{ grid-template-columns:1fr; gap:56px; }
  .about__media{ max-width:420px; margin-inline:auto; }

  .brand-block__grid,
  .brand-block--reverse .brand-block__grid{
    grid-template-columns:1fr;
  }
  .brand-block__slider{ order:-1; max-width:480px; margin-inline:auto; width:100%; }

  .contact__grid{ grid-template-columns:1fr; gap:50px; }

  .skills__grid{ grid-template-columns:1fr 1fr; gap:40px 32px; }

  .masonry{ columns:2 280px; }
  .gallery__grid{ columns:3 220px; }
  .insta__grid{ grid-template-columns:repeat(3,1fr); }
}

/* ===== Mobile ===== */
@media (max-width:680px){
  .container{ padding-inline:20px; }
  .section{ padding:90px 0; }

  .hero{ padding-top:110px; text-align:start; }
  .hero__eyebrow{ margin-bottom:20px; }
  .hero__title-line{ font-size:clamp(32px,11vw,52px); }
  .hero__desc{ font-size:15.5px; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ justify-content:center; }
  .hero__stats{ gap:28px; }
  .hero__stat-num{ font-size:26px; }

  .about__media-card{ position:static; margin-top:16px; width:fit-content; }

  .edu-card{ padding:28px 22px; }
  .edu-card__years{ margin-inline-start:0; }
  .edu-card__stats{ gap:20px; }

  .timeline{ padding-inline-start:30px; }
  .timeline__dot{ left:-30px; width:14px; height:14px; }
  [dir="rtl"] .timeline__dot{ right:-30px; left:auto; }
  .timeline__card{ padding:22px 20px; }

  .masonry{ columns:1; }
  .gallery__grid{ columns:2 160px; padding-inline:20px; }
  .insta__grid{ grid-template-columns:repeat(2,1fr); padding-inline:20px; }

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

  .contact__actions{ flex-direction:column; }
  .contact__actions .btn{ justify-content:center; }
  .contact__form{ padding:26px 22px; }

  .footer__inner{ flex-direction:column; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }

  .back-to-top{ width:44px;height:44px;bottom:20px;right:20px; }
  [dir="rtl"] .back-to-top{ right:auto; left:20px; }

  .loader__mark{ width:70px;height:70px; }
  .loader__counter{ font-size:34px; }
  .loader__bar{ width:180px; }
}