/* Homepage-only mobile refinements. Desktop and shared page components remain unchanged. */
@media (max-width: 767px) {
  html:has(.homepage-experience),
  body:has(.homepage-experience) {
    max-width: 100%;
    overflow-x: hidden;
  }

  .page-content.homepage-experience {
    min-width: 0;
    overflow: hidden;
  }

  .homepage-experience :is(.container, .about-agency-container, .portfolio-container,
    .our-work-container, .client-logos-container, .expertise-container,
    .feedback-main-wrapper, .home-contact-container) {
    max-width: 100%;
  }

  /* Keep the shared fixed header compact and above all homepage surfaces. */
  body:has(.homepage-experience) #site-header,
  body:has(.homepage-experience) .header {
    position: fixed;
    top: 0;
    z-index: 10000;
  }

  body:has(.homepage-experience) #site-header .navbar-brand img,
  body:has(.homepage-experience) .header .navbar-brand img {
    max-height: 38px;
    width: auto;
  }

  .homepage-experience h1 {
    font-size: clamp(2.2rem, 11vw, 3.15rem) !important;
    line-height: 1.04 !important;
    overflow-wrap: anywhere;
  }

  .homepage-experience :is(.theme-title h2, .portfolio-heading, .our-work-heading,
    .industries-section-title, .expertise-section-title, .gr-center-heading,
    .homepage-blog-section .theme-title h2) {
    font-size: clamp(1.9rem, 8.5vw, 2.35rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
  }

  .latest-news-experience .theme-title h2 {
    font-size: clamp(1.9rem, 8.5vw, 2.35rem) !important;
    line-height: 1.08 !important;
  }

  .homepage-experience p {
    font-size: max(14px, .92rem);
    line-height: 1.58;
  }

  /* Hero */
  .homepage-experience .banner-text.banner-two {
    padding: 24px 16px 34px !important;
  }

  .homepage-experience .banner-two-btm {
    margin-top: 18px;
  }

  .homepage-experience .banner-two-btm p {
    max-width: 100%;
  }

  /* Services: readable two-up cards, with a single-column fallback for 320px. */
  .homepage-experience .homepage-services-section {
    padding-inline: 16px;
  }

  .homepage-experience .homepage-services-section .container {
    padding-inline: 0;
  }

  .homepage-experience .homepage-services-section .row.align-items-end {
    row-gap: 16px;
  }

  .homepage-experience .homepage-services-section .service-item {
    height: 100%;
  }

  .homepage-experience .homepage-services-section .service-desc {
    padding: 20px 16px;
  }

  .homepage-experience .homepage-services-section .service-title h4,
  .homepage-experience .homepage-services-section .service-title h4 a {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  .homepage-experience .homepage-services-section .service-desc p {
    font-size: 13px;
    line-height: 1.5;
  }

  /* About image, copy and counters retain their content order without narrow columns. */
  .homepage-experience .about-agency-section {
    padding-inline: 16px;
  }

  .homepage-experience .about-agency-container {
    padding-inline: 0 !important;
  }

  .homepage-experience .about-main-heading {
    font-size: clamp(1.95rem, 8.7vw, 2.4rem) !important;
    line-height: 1.08 !important;
  }

  .homepage-experience .about-main-heading br {
    display: none;
  }

  .homepage-experience .about-stats-row {
    gap: 12px !important;
  }

  /* Portfolio: one fully contained touch target; navigation is superseded by swiping. */
  .homepage-experience .portfolio-section {
    padding-block: 60px 64px !important;
  }

  .homepage-experience .portfolio-container {
    padding-inline: 16px !important;
  }

  .homepage-experience .portfolio-header {
    margin-bottom: 22px;
  }

  .homepage-experience .portfolio-swiper {
    padding: 20px 0 16px !important;
    overflow: visible !important;
  }

  .homepage-experience .portfolio-arrow {
    display: none !important;
  }

  .homepage-experience .portfolio-card {
    min-height: 0;
  }

  .homepage-experience .card-bezel {
    border-width: 4px;
    border-radius: 17px;
  }

  .homepage-experience .card-viewport,
  .homepage-experience .screenshot-layer,
  .homepage-experience .iframe-stage {
    border-radius: 12px;
  }

  /* A single, usable video per swipe replaces the existing narrow two-up layout. */
  .homepage-experience .our-work-section {
    padding-block: 52px 58px;
  }

  .homepage-experience .our-work-container {
    padding-inline: 16px;
  }

  .homepage-experience .our-work-swiper {
    padding: 12px 0 16px;
  }

  .homepage-experience .our-work-info-overlay {
    padding: 42px 16px 14px;
  }

  .homepage-experience .our-work-item-title {
    font-size: 16px !important;
  }

  .homepage-experience .our-work-item-desc {
    font-size: 13px !important;
    -webkit-line-clamp: 2;
  }

  /* Keep logo marquees from generating an off-canvas scroll area. */
  .homepage-experience .client-logos-section,
  .homepage-experience .client-logos-viewport {
    overflow: hidden;
  }

  /* Mobile industries keep two equal, touch-friendly columns. */
  .homepage-experience .industries-section {
    padding-block: 48px 54px;
  }

  .homepage-experience .industries-section .container {
    padding-inline: 16px !important;
  }

  .homepage-experience .industries-header {
    margin-bottom: 26px;
  }

  .homepage-experience .industries-section-subtitle {
    font-size: 14px;
  }

  .homepage-experience .industries-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 10px !important;
  }

  .homepage-experience .industries-link-anchor {
    min-height: 52px !important;
    padding: 8px 6px !important;
    align-items: center !important;
  }

  .homepage-experience .industries-link-text {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  /* Team and review cards stay legible and never clip at their carousel edges. */
  .homepage-experience .team-expertise-section {
    padding-block: 50px 58px;
  }

  .homepage-experience .expertise-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .homepage-experience .feedback-main-wrapper {
    padding-inline: 16px;
  }

  .homepage-experience .feedback-carousel-container,
  .homepage-experience .gr-slider-wrap {
    overflow: hidden;
  }

  .homepage-experience .feedback-arrow-btn {
    display: none;
  }

  .homepage-experience .gr-section {
    padding-block: 56px 58px;
  }

  .homepage-experience .gr-section .container {
    padding-inline: 16px;
  }

  .homepage-experience .gr-card {
    min-height: 0;
  }

  /* Blog cards, contact form and card use the available viewport width. */
  .homepage-experience .homepage-blog-section,
  .latest-news-experience {
    padding-inline: 16px;
  }

  .homepage-experience .homepage-blog-section .container,
  .latest-news-experience .container {
    padding-inline: 0;
  }

  .homepage-experience .home-contact-section {
    padding-inline: 16px !important;
  }

  .homepage-experience .home-contact-container {
    padding-inline: 0 !important;
  }

  .homepage-experience .home-contact-fields {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .homepage-experience .home-contact-card {
    max-height: min(390px, 108vw);
  }

  /* Footer keeps all links, but uses tap-friendly columns and compact legal controls. */
  body:has(.homepage-experience) .ask-footer-main {
    padding-inline: 16px;
  }

  body:has(.homepage-experience) .ask-footer-main .container {
    padding-inline: 0;
  }

  body:has(.homepage-experience) .ask-footer-links-list a,
  body:has(.homepage-experience) .ask-footer-resource-list a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }

  body:has(.homepage-experience) .ask-footer-resources-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px;
  }

  body:has(.homepage-experience) .ask-footer-resource-col:last-child {
    grid-column: 1 / -1;
  }

  /* Floating WhatsApp remains reachable without covering the full bottom edge. */
  body:has(.homepage-experience) .ask-contact-widget {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
  }

  body:has(.homepage-experience) .ask-contact-widget.pos-bottom-left {
    left: max(14px, env(safe-area-inset-left));
    right: auto;
  }

  /* Mobile animation travel is deliberately short to avoid perceptible layout jumps. */
  .homepage-experience .home-reveal,
  .homepage-experience .home-reveal.home-reveal-scale,
  .latest-news-experience .home-reveal,
  .latest-news-experience .home-reveal.home-reveal-scale {
    transform: translate3d(0, 12px, 0) scale(.995);
    transition-duration: .42s, .48s;
  }

  .homepage-experience .home-reveal.is-revealed,
  .latest-news-experience .home-reveal.is-revealed {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 359px) {
  .homepage-experience .homepage-services-section .services-cards-row > [class*="col-"] {
    width: 100%;
  }

  .homepage-experience .homepage-services-section .service-desc {
    padding: 20px;
  }

  .homepage-experience .about-stats-row,
  .homepage-experience .expertise-cards-grid,
  body:has(.homepage-experience) .ask-footer-resources-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:has(.homepage-experience) .ask-footer-resource-col:last-child {
    grid-column: auto;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .homepage-experience .portfolio-container,
  .homepage-experience .our-work-container,
  .homepage-experience .feedback-main-wrapper {
    padding-inline: 24px;
  }

  .homepage-experience .industries-links-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .homepage-experience .home-reveal,
  .homepage-experience .home-reveal.home-reveal-scale,
  .latest-news-experience .home-reveal,
  .latest-news-experience .home-reveal.home-reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}