/**
 * Mobile & tablet responsive overrides only.
 * All rules live inside max-width media queries — desktop/laptop (992px+) is unchanged.
 */

/* ========== TABLET (max 991px) ========== */
@media screen and (max-width: 991px) {
  html,
  body {
    overflow-x: hidden;
  }

  .page-wrapper {
    overflow-x: hidden;
    max-width: 100%;
  }

  .main-container.w-container {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  h1,
  .home-hero-heading,
  .home-hero-heading h1,
  .home-hero-heading h2,
  .home-hero-wrapper h1,
  .inner-page-hero-wrapper .inner-page-heading,
  .inner-page-hero-wrapper .inner-page-heading h1,
  .inner-page-hero-wrapper h1,
  .typography-tag-name.h1 {
    font-size: 44px !important;
    line-height: 1.12 !important;
  }

  h2,
  .services-heading,
  .services-heading h2,
  .services-title,
  .services-title h2,
  .works-heading,
  .works-heading h2,
  .cta-heading,
  .cta-heading h2,
  .faq-heading,
  .faq-heading h2,
  .brands-heading,
  .brands-heading h2,
  .testslider-heading,
  .testslider-heading h2,
  .about-title,
  .about-title h2,
  .heading,
  .typography-tag-name.h2,
  .exp-highlight-title {
    font-size: 34px !important;
    line-height: 1.15 !important;
  }

  h3,
  .typography-tag-name.h3 {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }

  h4,
  .typography-tag-name.h4 {
    font-size: 24px !important;
    line-height: 1.35 !important;
  }

  h5,
  .typography-tag-name.h5 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  .section-global.home {
    overflow-x: hidden !important;
  }

  .home-hero-over {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: clamp(200px, 22vw, 300px) !important;
  }

  .page-wrapper.home-one .home-hero-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    margin-top: 48px !important;
  }

  .page-wrapper.home-one .home-hero-text-wrapper {
    max-width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .page-wrapper.home-one .home-hero-image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 48px !important;
  }

  .page-wrapper.home-one img.home-hero-image {
    height: auto !important;
    max-height: min(70vw, 460px) !important;
    min-height: 280px !important;
    width: 100% !important;
  }

  .about-wrapper.home-about {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .about-wrapper.home-about .about-image-wrap.home-about {
    padding-right: 0 !important;
    padding-top: 0 !important;
    height: auto !important;
    position: relative !important;
  }

  .about-wrapper.home-about .about-title {
    position: static !important;
    margin: 0 0 16px !important;
  }

  .about-wrapper.home-about .about-text-wrap {
    padding-top: 0 !important;
    height: auto !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .about-wrapper.home-about .about-text-wrap h4.about-text,
  .about-wrapper.home-about .about-text-wrap .about-text,
  .about-wrapper.home-about .about-text-wrap [class^="about-text-"] {
    font-size: 20px !important;
    line-height: 1.55 !important;
  }

  .about-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 24px !important;
  }

  .navbar-container {
    max-width: 100% !important;
  }

  .navbar-wrapper {
    height: auto !important;
    min-height: 58px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .navbar-logo-text {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  .navbar-menu-wrapper {
    display: flex !important;
  }

  .section-cta .cta-block,
  .cta-block {
    padding: 40px 24px !important;
  }

  .section-faq .faq-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  .work-list.works {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ========== MOBILE (max 767px) ========== */
@media screen and (max-width: 767px) {
  .main-container.w-container {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .space {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .section-global {
    padding-top: 96px !important;
    padding-bottom: 60px !important;
  }

  .section-global.home {
    padding-top: 88px !important;
    padding-bottom: 0 !important;
  }

  h1,
  .home-hero-heading,
  .home-hero-heading h1,
  .home-hero-heading h2,
  .home-hero-wrapper h1,
  .inner-page-hero-wrapper .inner-page-heading,
  .inner-page-hero-wrapper .inner-page-heading h1,
  .inner-page-hero-wrapper h1,
  .typography-tag-name.h1 {
    font-size: 34px !important;
    line-height: 1.12 !important;
  }

  h2,
  .services-heading,
  .services-heading h2,
  .services-title,
  .services-title h2,
  .works-heading,
  .works-heading h2,
  .cta-heading,
  .cta-heading h2,
  .faq-heading,
  .faq-heading h2,
  .brands-heading,
  .brands-heading h2,
  .testslider-heading,
  .testslider-heading h2,
  .about-title,
  .about-title h2,
  .heading,
  .typography-tag-name.h2,
  .exp-highlight-title {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  h3,
  .typography-tag-name.h3 {
    font-size: 26px !important;
  }

  h4,
  .typography-tag-name.h4 {
    font-size: 22px !important;
  }

  .page-wrapper.home-one .home-hero-wrapper {
    margin-top: 32px !important;
    gap: 20px !important;
  }

  .page-wrapper.home-one .home-hero-text-wrapper {
    padding-bottom: 8px !important;
  }

  .page-wrapper.home-one .home-hero-image-wrapper {
    padding-bottom: 32px !important;
  }

  .page-wrapper.home-one img.home-hero-image {
    max-height: min(78vw, 380px) !important;
    min-height: 240px !important;
  }

  .home-hero-over {
    height: clamp(140px, 30vw, 220px) !important;
  }

  .home-hero-intro {
    max-width: 100% !important;
    font-size: 16px !important;
    margin-bottom: 24px !important;
  }

  .home-hero-highlights {
    gap: 20px 24px !important;
  }

  .home-hero-button {
    width: 100%;
  }

  .home-hero-button .primary-button {
    width: 100%;
    justify-content: center;
  }

  .home-hero-review {
    flex-wrap: wrap;
    gap: 12px !important;
  }

  .about-wrapper.home-about {
    gap: 24px !important;
  }

  .about-wrapper.home-about .about-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }

  .about-wrapper.home-about .about-text-wrap h4.about-text,
  .about-wrapper.home-about .about-text-wrap .about-text,
  .about-wrapper.home-about .about-text-wrap [class^="about-text-"] {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }

  .about-metrics {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-top: 20px !important;
  }

  .about-metric-value {
    font-size: 24px !important;
  }

  .insight-blog-image-wrap {
    min-height: 240px !important;
  }

  .insight-blog-image {
    height: 240px !important;
    min-height: 240px !important;
  }

  .page-wrapper.home-one .testimonials-card {
    clip-path: none !important;
    margin-bottom: 0 !important;
  }

  .page-wrapper.home-one .testslider-mask {
    overflow: hidden !important;
  }

  .exp-highlight-section {
    padding: 64px 16px 72px !important;
  }

  .exp-highlight-header {
    margin-bottom: 36px !important;
    text-align: center !important;
  }

  .navbar-wrapper {
    min-height: 56px !important;
    padding: 10px 14px !important;
  }

  .navbar-logo-text {
    font-size: 20px !important;
    white-space: normal !important;
  }

  .navbar-button-wrapper {
    display: none !important;
  }

  .section-footer .footer-nav-link,
  .section-footer .footer-text,
  .section-footer .footer-nav-static,
  .section-footer .footer-nav-title {
    font-size: 17px !important;
  }

  .section-footer .footer-navigation-wrapper {
    gap: 28px !important;
  }

  .section-cta .cta-block,
  .cta-block {
    padding: 32px 20px !important;
  }

  .work-list.works {
    grid-template-columns: 1fr !important;
  }

  .works-text-wrapper {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }

  .services-work-wrapper,
  .services-wrapper {
    grid-template-columns: 1fr !important;
  }

  #experience .container {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  #home-experience-mount {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* ========== SMALL PHONE (max 479px) ========== */
@media screen and (max-width: 479px) {
  h1,
  .home-hero-heading,
  .home-hero-heading h1,
  .home-hero-heading h2,
  .home-hero-wrapper h1,
  .inner-page-hero-wrapper .inner-page-heading,
  .inner-page-hero-wrapper .inner-page-heading h1,
  .inner-page-hero-wrapper h1,
  .typography-tag-name.h1 {
    font-size: 30px !important;
  }

  h2,
  .services-heading,
  .services-heading h2,
  .works-heading,
  .works-heading h2,
  .cta-heading,
  .cta-heading h2,
  .faq-heading,
  .faq-heading h2,
  .exp-highlight-title {
    font-size: 26px !important;
  }

  .navbar-logo-text {
    font-size: 19px !important;
  }

  .about-wrapper.home-about .about-text-wrap h4.about-text,
  .about-wrapper.home-about .about-text-wrap .about-text,
  .about-wrapper.home-about .about-text-wrap [class^="about-text-"] {
    font-size: 16px !important;
  }

  .section-footer .footer-nav-link,
  .section-footer .footer-text,
  .section-footer .footer-nav-static,
  .section-footer .footer-nav-title {
    font-size: 16px !important;
  }

  .home-hero-highlights {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .insight-blog-image-wrap {
    min-height: 210px !important;
  }

  .insight-blog-image {
    height: 210px !important;
    min-height: 210px !important;
  }
}

/* ========== MOBILE CENTER ALIGNMENT (footer & navbar excluded) ========== */
@media screen and (max-width: 991px) {
  .page-wrapper .section-global:not(.section-footer):not(.section-navbar),
  .page-wrapper .exp-highlight-section,
  .page-wrapper #experience,
  .page-wrapper .cred-section {
    text-align: center !important;
  }

  .page-wrapper .home-hero-wrapper,
  .page-wrapper .home-hero-text-wrapper,
  .page-wrapper .home-hero-heading,
  .page-wrapper .home-hero-intro,
  .page-wrapper .home-hero-button,
  .page-wrapper .home-hero-review,
  .page-wrapper .home-hero-highlights,
  .about-wrapper.home-about,
  .about-wrapper.home-about .about-title,
  .about-wrapper.home-about .about-text-wrap,
  .about-wrapper.home-about .about-image-wrap,
  .about-metrics,
  .about-metric,
  .services-heading,
  .services-title,
  .works-heading,
  .works-text-wrapper,
  .section-works .works-wrapper,
  .services-wrapper,
  .services-work-wrapper,
  .service-item,
  .services-text-wrap,
  .insight-blog-card .insight-blog-content,
  .insight-blog-meta,
  .exp-highlight-header,
  .exp-highlight-card,
  .exp-highlight-card-body,
  .exp-highlight-category,
  .career-head,
  .career-card-body,
  .career-meta,
  .career-role,
  .career-org,
  .testslider-heading,
  .testimonials-card,
  .testslider-text-wrap,
  .cred-header,
  .cred-eyebrow,
  .cred-card-body,
  .cred-card-badge,
  .cred-card-institution,
  .cred-card-degree,
  .cred-card-focus,
  .cred-card-description,
  .section-faq .faq-heading,
  .section-faq .faq-wrapper,
  .section-faq .faq-item,
  .section-faq .faq-question,
  .section-faq .faq-answer,
  .section-faq .faq-answer-text,
  .section-cta .cta-block,
  .cta-heading,
  .cta-text,
  .inner-page-hero-wrapper,
  .inner-page-hero-text-wrapper,
  .typography-tag,
  .brands-heading,
  .brands-wrapper {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .page-wrapper .home-hero-wrapper,
  .page-wrapper .home-hero-text-wrapper,
  .about-wrapper.home-about,
  .about-wrapper.home-about .about-text-wrap,
  .works-text-wrapper,
  .home-hero-review,
  .home-hero-highlights,
  .home-hero-button,
  .insight-blog-meta,
  .career-meta,
  .services-text-wrap {
    display: flex !important;
    flex-direction: column !important;
  }

  .career-card-body ul {
    list-style-position: inside;
    padding-left: 0 !important;
    text-align: center !important;
  }

  .career-card-body li {
    text-align: center !important;
  }

  .career-nav {
    justify-content: center !important;
  }

  .primary-button,
  .works-button-wrapper,
  .insight-blog-read-more {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .page-wrapper.home-one .home-hero-image-wrapper,
  .about-wrapper.home-about .about-image-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Footer — keep original left-aligned layout */
  .section-footer,
  .section-footer .footer-navigation-wrapper,
  .section-footer .footer-navigation-wrap,
  .section-footer .footer-nav-wrap,
  .section-footer .footer-nav-link,
  .section-footer .footer-text,
  .section-footer .footer-nav-title,
  .section-footer .footer-nav-static {
    text-align: left !important;
    align-items: flex-start !important;
  }

  .section-footer .footer-navigation-wrapper {
    justify-content: space-between !important;
  }

  .exp-highlight-card-body {
    align-items: center !important;
  }

  .exp-highlight-category {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Credentials — center badge, prevent card content crop */
  .cred-card-badge {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .cred-stack-slot,
  .cred-stack-slot.is-featured {
    height: auto !important;
  }

  .cred-card {
    height: auto !important;
    overflow: visible !important;
  }

  .cred-card-body {
    height: auto !important;
    grid-template-rows: auto !important;
    justify-items: center !important;
  }

  .cred-card-institution,
  .cred-card-focus {
    min-height: auto !important;
  }
}