/* Responsive Design System — Precision Mobile & Tablet Breakpoints */

/* ==========================================================================
   Global Mobile Base & Prevention of Overflow
   ========================================================================== */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  -webkit-text-size-adjust: 100%;
}

img, svg, video {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Laptop Breakpoint: <= 1280px
   ========================================================================== */
@media (max-width: 1280px) {
  :root {
    --fs-7xl: 3.5rem;   /* 56px */
    --fs-6xl: 2.75rem;  /* 44px */
    --fs-5xl: 2.25rem;  /* 36px */
    --fs-4xl: 1.875rem; /* 30px */
  }

  .container {
    padding: 0 1.5rem;
  }

  .hero__inner {
    gap: 40px;
  }
}

/* ==========================================================================
   Tablet / Small Laptop: <= 1024px
   ========================================================================== */
@media (max-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero__visual {
    margin: 0 auto;
  }

  .work-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .work-hero__desc {
    max-width: 100%;
  }

  .work-projects__row--large {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .work-projects__row--small {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .work-projects__row--small > .work-card:last-child {
    grid-column: span 2;
  }

  .featured-partners__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   Tablet & Mobile Breakpoint: <= 768px
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --fs-7xl: 2.25rem;   /* 36px */
    --fs-6xl: 2rem;      /* 32px */
    --fs-5xl: 1.75rem;   /* 28px */
    --fs-4xl: 1.5rem;    /* 24px */
    --fs-3xl: 1.25rem;   /* 20px */
  }

  .container {
    padding: 0 16px;
  }

  /* Navigation Header */
  .nav__inner {
    height: 64px !important;
    padding: 0 16px !important;
  }

  .nav__links {
    display: none !important;
  }

  .nav__cta-btn {
    display: none !important;
  }

  .nav__hamburger {
    display: flex !important;
  }

  .nav__logo {
    font-size: 18px !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  .nav__logo-icon {
    width: 24px !important;
    height: 24px !important;
  }

  .nav__actions {
    gap: 8px !important;
  }

  .nav__notify-btn {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
  }

  /* Hero Section (Clean Stacking, Zero Overlap) */
  .hero {
    padding-top: 88px !important;
    padding-bottom: 40px !important;
    overflow: visible;
  }

  .hero__inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 36px !important;
    align-items: stretch !important;
  }

  .hero__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  .hero__title {
    font-size: clamp(28px, 7.5vw, 42px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 16px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  .hero__text {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #4B5563 !important;
    margin-bottom: 24px !important;
    max-width: 100% !important;
  }

  .hero__actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 12px !important;
    margin-bottom: 28px !important;
  }

  .hero__btn-consult {
    width: 100% !important;
    justify-content: center !important;
    height: 50px !important;
    font-size: 15px !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
  }

  .hero__link-explore {
    text-align: center !important;
    display: block !important;
    padding: 6px 0 !important;
    font-size: 14px !important;
  }

  .hero__trust-strip {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .hero__trust-label {
    font-size: 12px !important;
  }

  .hero__trust-logos {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px 20px !important;
    width: 100% !important;
  }

  .hero__brand-logo {
    font-size: 15px !important;
  }

  /* Responsive Hero Visual Graphic */
  .hero__visual {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    transform: none !important;
  }

  .hero__arch-block {
    display: none !important;
  }

  .hero__trend-circle {
    display: none !important;
  }

  .hero__stat-card {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 160px !important;
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }

  .hero__stat-num {
    font-size: 42px !important;
    margin-bottom: 6px !important;
  }

  .hero__traffic-card {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 190px !important;
    padding: 22px 18px !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .hero__traffic-left {
    max-width: 100% !important;
    padding-bottom: 0 !important;
    gap: 10px !important;
  }

  .hero__traffic-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  .hero__traffic-bars {
    width: 100% !important;
    height: 80px !important;
    justify-content: space-between !important;
  }

  /* All Multi-Column Grids -> 1 Column */
  .services-intro__inner,
  .stats-how__inner,
  .blog-section__cards,
  .services__grid,
  .value-props__grid,
  .resources__grid,
  .contact-main__grid,
  .contact-hero__grid,
  .featured-partners__grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .how-we-work__title {
    padding-left: 0 !important;
    font-size: 22px !important;
  }

  .how-we-work {
    min-height: auto !important;
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }

  /* Case Studies Section */
  .case-studies {
    margin: 0 !important;
    padding: 32px 16px !important;
    border-radius: 20px !important;
  }

  .case-studies__heading {
    font-size: 24px !important;
  }

  .case-studies__showcase {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Case Studies / Our Work Page */
  .work-hero {
    padding-top: 88px !important;
    padding-bottom: 32px !important;
  }

  .work-hero__title {
    font-size: clamp(28px, 7.5vw, 40px) !important;
    line-height: 1.15 !important;
  }

  .work-hero__stats-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .work-hero__stats-grid__top {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .work-stat-card {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }

  .work-stat-card__num {
    font-size: 28px !important;
  }

  .work-intro {
    padding: 28px 0 20px !important;
  }

  .work-intro__title {
    font-size: clamp(20px, 5vw, 26px) !important;
    line-height: 1.25 !important;
  }

  .work-projects__row--large,
  .work-projects__row--small {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .work-projects__row--small > .work-card:last-child {
    grid-column: span 1 !important;
  }

  .work-card__media--large {
    height: 200px !important;
  }

  .work-card__media--small {
    height: 180px !important;
  }

  .work-card__body {
    padding: 20px 16px !important;
  }

  .work-testimonial {
    padding: 36px 16px !important;
    margin-bottom: 36px !important;
    border-radius: 20px !important;
  }

  .work-testimonial__quote-mark {
    font-size: 32px !important;
    margin-bottom: 10px !important;
  }

  .work-testimonial__quote {
    font-size: 18px !important;
    line-height: 1.45 !important;
    margin-bottom: 20px !important;
  }

  /* FAQ */
  .faq__inner {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 22px 16px !important;
    border-radius: 18px !important;
  }

  .faq__title {
    font-size: 22px !important;
  }

  /* CTA Banners */
  .cta-banner,
  .agency-cta-banner,
  .newsletter-banner {
    padding: 32px 18px !important;
    border-radius: 18px !important;
  }

  .cta-banner__inner,
  .agency-cta-banner,
  .newsletter-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .cta-banner__title,
  .agency-cta-banner__title,
  .newsletter-banner__title {
    font-size: clamp(22px, 5.5vw, 28px) !important;
    line-height: 1.2 !important;
  }

  /* Contact Page */
  .contact-hero {
    padding-top: 88px !important;
    padding-bottom: 28px !important;
  }

  .contact-hero__right {
    justify-content: center !important;
    width: 100% !important;
  }

  .contact-hero__placeholder-outer {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 180px !important;
    aspect-ratio: 16 / 9 !important;
    padding: 12px !important;
    border-radius: 20px !important;
  }

  /* Agency Page (Value Engine) */
  .agency-hero {
    padding-top: 88px !important;
    padding-bottom: 28px !important;
  }

  .agency-hero__grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .agency-hero__right {
    justify-content: center !important;
    width: 100% !important;
  }

  .agency-hero__placeholder {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 240px !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 20px !important;
  }

  .contact-form-card {
    padding: 22px 16px !important;
    border-radius: 16px !important;
  }

  .contact-form__row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Footer */
  .footer {
    padding: 48px 0 24px !important;
  }

  .footer__inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 16px !important;
    padding-bottom: 32px !important;
  }

  .footer__brand {
    grid-column: span 2 !important;
  }

  .footer__bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
    padding-top: 20px !important;
  }
}

/* ==========================================================================
   Mobile Phone Breakpoint: <= 480px (iPhone & Android)
   ========================================================================== */
@media (max-width: 480px) {
  .work-hero__stats-grid__top {
    grid-template-columns: 1fr !important;
  }

  .footer__inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .footer__brand {
    grid-column: span 1 !important;
  }

  /* Input fields (Ensure 16px to prevent iOS auto-zoom on focus) */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }
}