/* ==========================================================================
   BRANDD AID CREATIVE AGENCY - RESPONSIVE STYLESHEET
   Harmonized with Brandd_Aid_Suhana_Final.html Design Reference
   ========================================================================== */

/* --- Medium Desktops & Laptops (1025px - 1200px) --- */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
  .philosophy-front-title {
    font-size: clamp(1.65rem, 2.2vw, 2.2rem);
  }
}

/* --- Laptops & Small Desktops (max-width: 1024px) --- */
@media screen and (max-width: 1024px) {
  .desktop-nav {
    display: none !important;
  }

  .menu-toggle,
  .menu-btn {
    display: flex !important;
  }

  .hero-top-split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .hero-illust-card {
    max-width: 440px;
    margin-inline: auto;
  }

  .hero-bottom-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .hero-visual-card {
    max-width: 520px;
    margin-inline: auto;
  }

  .manifesto-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .manifesto-media-card {
    max-width: 480px;
    margin-inline: auto;
  }

  .philosophy-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .svc-card__link,
  .svc {
    grid-template-columns: 1fr;
  }

  .svc-card__media,
  .svc-media {
    order: -1;
    max-width: 440px;
    margin-inline: auto;
    width: 100%;
  }

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

  .testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }

  .testimonial-card:nth-child(2) {
    margin-top: 0;
  }

  .cta-enquiry-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .faq-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .faq-sticky-content {
    position: static;
  }

  .footer-top-row,
  .foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

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

  .application-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

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

/* --- Tablets (max-width: 768px) --- */
@media screen and (max-width: 768px) {
  .section {
    padding-block: clamp(3rem, 7vw, 5rem);
  }

  .header-cta .btn {
    display: none;
  }

  .hero-principles-meta {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .principle-block {
    transform: none !important;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .job-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
  }

  .job-action {
    width: 100%;
  }

  .job-action .btn {
    width: 100%;
  }

  .slider-projects .slider__slide {
    flex: 0 0 clamp(270px, 78vw, 360px);
  }

  .cta-banner-box {
    padding: 3rem 1.5rem;
  }

  .cta-enquiry-box {
    padding: 2rem 1.5rem;
  }

  .cta-enquiry-head {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .btn-flip-back {
    align-self: flex-start;
  }

  .svc-card,
  .svc {
    position: relative !important;
    top: auto !important;
  }

  .footer-bottom-bar,
  .foot-base {
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
  }
}

/* --- Mobile Devices (max-width: 520px) --- */
@media screen and (max-width: 520px) {
  .philosophy-front-title {
    font-size: clamp(1.35rem, 6.2vw, 1.95rem);
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .footer-top-row,
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .career-perks-grid {
    grid-template-columns: 1fr;
  }

  .perks-grid {
    grid-template-columns: 1fr;
  }

  .faq-content-inner {
    padding-inline: 0.2rem 1rem;
  }

  .slider-projects .slider__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
}

/* --- Reduced Motion Preferences --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .spin,
  .cta-rotating-badge,
  .marquee-content {
    animation: none !important;
  }
}