/* =============================================
   SITE-WIDE RESPONSIVE — all pages & sections
   Loaded last on every page after page-specific CSS
   ============================================= */

html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Passive scroll showcases — all viewports (iPhone landscape is often >768px) */
section.seo-partner[class*='-showcase'].is-passive {
  overflow: visible !important;
}

.seo-partner.geo-partner-showcase.is-passive,
.seo-partner.seo-partner-showcase.is-passive,
.seo-partner.mobiledev-partner-showcase.is-passive,
.seo-partner.webdev-partner-showcase.is-passive,
.seo-partner.uiux-partner-showcase.is-passive,
.seo-partner.dm-partner-showcase.is-passive,
.seo-partner.crm-partner-showcase.is-passive,
.seo-cases-showcase.is-passive,
.testimonial-showcase.is-passive,
.blog-hero-showcase.is-passive,
.about-trust-showcase.is-passive,
.pf-trust-showcase.is-passive,
.process-showcase.is-passive,
.services-showcase.is-passive {
  overflow: visible !important;
}

.geo-partner-showcase.is-passive:not(.is-marquee) .geo-partner-cards-viewport,
.seo-partner-showcase.is-passive:not(.is-marquee) .seo-partner-showcase-cards-viewport,
.mobiledev-partner-showcase.is-passive:not(.is-marquee) .mobiledev-partner-cards-viewport,
.webdev-partner-showcase.is-passive:not(.is-marquee) .webdev-partner-cards-viewport,
.uiux-partner-showcase.is-passive:not(.is-marquee) .uiux-partner-cards-viewport,
.dm-partner-showcase.is-passive:not(.is-marquee) .dm-partner-cards-viewport,
.crm-partner-showcase.is-passive:not(.is-marquee) .crm-partner-cards-viewport,
.about-trust-showcase.is-passive:not(.is-marquee) .about-trust-cards-viewport,
.pf-trust-showcase.is-passive .pf-trust-cards-viewport,
.seo-cases-showcase.is-passive:not(.is-marquee) .seo-cases-viewport,
.blog-hero-showcase.is-passive:not(.is-marquee) .blog-featured-viewport,
.hero-trust-scroll.is-passive:not(.is-marquee) .hero-trust-viewport {
  overflow-x: auto !important;
  overflow-y: hidden;
  width: 100%;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pinch-zoom;
  overscroll-behavior-x: contain;
  scroll-snap-type: none !important;
  scroll-behavior: auto;
  scrollbar-width: none;
}

.hero-trust-scroll.is-passive:not(.is-marquee) .hero-trust-viewport::-webkit-scrollbar,
.about-trust-showcase.is-passive:not(.is-marquee) .about-trust-cards-viewport::-webkit-scrollbar,
.pf-trust-showcase.is-passive .pf-trust-cards-viewport::-webkit-scrollbar,
.seo-partner-showcase.is-passive .seo-partner-showcase-cards-viewport::-webkit-scrollbar,
.geo-partner-showcase.is-passive .geo-partner-cards-viewport::-webkit-scrollbar,
.mobiledev-partner-showcase.is-passive .mobiledev-partner-cards-viewport::-webkit-scrollbar,
.webdev-partner-showcase.is-passive .webdev-partner-cards-viewport::-webkit-scrollbar,
.uiux-partner-showcase.is-passive .uiux-partner-cards-viewport::-webkit-scrollbar,
.dm-partner-showcase.is-passive .dm-partner-cards-viewport::-webkit-scrollbar,
.crm-partner-showcase.is-passive .crm-partner-cards-viewport::-webkit-scrollbar,
.seo-cases-showcase.is-passive:not(.is-marquee) .seo-cases-viewport::-webkit-scrollbar,
.blog-hero-showcase.is-passive:not(.is-marquee) .blog-featured-viewport::-webkit-scrollbar {
  display: none;
}

/* Passive carousel tracks — flex nowrap so track overflows the viewport */
.about-trust-showcase.is-passive:not(.is-marquee) .about-trust-cards-track,
.pf-trust-showcase.is-passive .pf-trust-cards-track,
.seo-partner-showcase.is-passive:not(.is-marquee) .seo-partner-showcase-cards-track,
.geo-partner-showcase.is-passive:not(.is-marquee) .geo-partner-cards-track,
.mobiledev-partner-showcase.is-passive:not(.is-marquee) .mobiledev-partner-cards-track,
.webdev-partner-showcase.is-passive:not(.is-marquee) .webdev-partner-cards-track,
.uiux-partner-showcase.is-passive:not(.is-marquee) .uiux-partner-cards-track,
.dm-partner-showcase.is-passive:not(.is-marquee) .dm-partner-cards-track,
.crm-partner-showcase.is-passive:not(.is-marquee) .crm-partner-cards-track,
.hero-trust-scroll.is-passive:not(.is-marquee) .hero-trust-track,
.seo-cases-showcase.is-passive:not(.is-marquee) .seo-cases-track,
.blog-hero-showcase.is-passive:not(.is-marquee) .blog-featured-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  min-width: 100%;
  transform: none !important;
}

.geo-partner-showcase.is-passive .geo-partner-pin,
.seo-partner-showcase.is-passive .seo-partner-showcase-pin,
.mobiledev-partner-showcase.is-passive .mobiledev-partner-pin,
.webdev-partner-showcase.is-passive .webdev-partner-pin,
.uiux-partner-showcase.is-passive .uiux-partner-pin,
.dm-partner-showcase.is-passive .dm-partner-pin,
.crm-partner-showcase.is-passive .crm-partner-pin,
.seo-cases-showcase.is-passive .seo-cases-sticky,
.about-trust-showcase.is-passive .about-trust-pin,
.pf-trust-showcase.is-passive .pf-trust-pin,
.process-showcase.is-passive .process-showcase-pin,
.services-showcase.is-passive .services-showcase-pin {
  overflow: visible !important;
}

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

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

/* ----- Tablet (1024px) ----- */
@media (max-width: 1024px) {
  :root {
    --pad-x: 32px;
  }

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

  /* Service pages: stack text/media before 768 rules in page CSS */
  .seo-split,
  .seo-dark-box,
  .seo-solutions-box {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  .seo-dark-box-img,
  .seo-split-img {
    max-width: 100%;
    justify-self: center;
  }

  .seo-solutions-tags,
  .geo-solutions-tags,
  .mobiledev-applications-tags,
  .webdev-solutions-tags,
  .uiux-applications-tags,
  .dm-applications-tags,
  .crm-applications-tags {
    max-width: 100%;
  }

  .about-hero-inner {
    padding-left: 32px;
    padding-right: 32px;
  }

  .about-intro-split,
  .about-framework-wrap,
  .about-process-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-trust-grid {
    grid-template-columns: 1fr;
  }

  /* Service pages — process: image above, step details below */
  .seo-process .seo-process-row,
  .seo-process .seo-process-row.is-reverse {
    grid-template-columns: 1fr !important;
    gap: 24px;
    align-items: start;
  }

  .seo-process .seo-process-row .seo-process-img {
    order: 1 !important;
    max-width: 100%;
    width: 100%;
  }

  .seo-process .seo-process-row .seo-process-copy {
    order: 2 !important;
  }

  .seo-process .seo-process-img img {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    display: block;
    border-radius: 12px;
  }

  /* Mobile app hero — 2 images left, phone mockup right (like landing about) */
  .mobiledev-hero-visual {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: stretch;
    gap: 10px;
    flex-direction: unset;
    max-width: 100%;
    margin: 0;
    justify-content: stretch;
  }

  .mobiledev-hero-sidecards {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: none;
    min-height: 0;
    height: 100%;
  }

  .mobiledev-hero-small {
    border-radius: 12px;
    overflow: hidden;
    min-height: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  }

  .mobiledev-hero-small:first-child {
    flex-shrink: 0;
  }

  .mobiledev-hero-small:first-child img {
    width: 100%;
    height: auto;
    aspect-ratio: 210 / 158;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .mobiledev-hero-small:last-child {
    flex: 1;
    display: flex;
    min-height: 0;
  }

  .mobiledev-hero-small:last-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .mobiledev-hero-phone {
    grid-column: 2;
    grid-row: 1;
    flex: unset;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    aspect-ratio: 300 / 520;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    position: relative;
    background: #d4e8dc;
  }

  /* Composite asset — crop to hand + phone on the right (matches desktop) */
  .mobiledev-hero-phone img {
    width: 215%;
    height: 100%;
    margin-left: -115%;
    max-width: none;
    object-fit: cover;
    object-position: 88% center;
    display: block;
  }

  .codebrit-panel {
    flex-direction: column;
  }

  .codebrit-letter-wrap {
    width: 100%;
    min-height: 120px;
  }

  .process-cards {
    flex-direction: column;
    gap: 20px;
  }

  .process-card {
    width: 100%;
  }

  .projects-header {
    text-align: left;
  }

  .projects-subtitle {
    max-width: none;
  }
}

/* ----- Small tablet / large phone (768px) ----- */
@media (max-width: 768px) {
  :root {
    --pad-x: 24px;
    --section-y: 64px;
  }

  /* Landing about — keep 2-up left + video right on mobile (like services branding) */
  .section-about .about-media {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    flex-direction: unset;
    flex-wrap: unset;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    gap: 10px;
  }

  .section-about .about-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
  }

  .section-about .about-img-top {
    width: 100%;
    height: auto;
    aspect-ratio: 200 / 158;
    flex-shrink: 0;
    border-radius: 14px;
  }

  .section-about .about-phone-wrap {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 14px;
  }

  .section-about .about-img-phone {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: unset;
    border-radius: 14px;
    object-fit: cover;
    object-position: center center;
  }

  .section-about .about-red-card {
    bottom: 8px;
    width: 92%;
    padding: 4px 6px;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
  }

  .section-about .about-red-num {
    margin-bottom: 0;
    font-size: clamp(0.85rem, 3.8vw, 1.1rem);
    flex-shrink: 0;
  }

  .section-about .about-red-text {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
    font-size: clamp(5px, 1.7vw, 7px);
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .section-about .about-avatars {
    flex-shrink: 0;
  }

  .section-about .about-avatar {
    width: clamp(11px, 3.2vw, 14px);
    height: clamp(11px, 3.2vw, 14px);
  }

  .section-about .about-video-wrap {
    width: 100%;
    max-width: none;
    flex: unset;
    min-width: 0;
    height: auto;
    aspect-ratio: 478 / 520;
    border-radius: 16px;
  }

  .section-about .about-video {
    height: 100%;
    object-fit: cover;
  }

  /* 100vw slides cause horizontal scroll when scrollbar is present */
  .testimonial-slide {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  .blog-featured-track .blog-featured-card {
    min-width: min(88vw, 100%);
  }

  /* Scroll-pin sections: static layout only when JS enables passive mode */
  .about-services-showcase.is-passive .about-services-pin,
  .services-showcase.is-passive .services-showcase-pin,
  .process-showcase.is-passive .process-showcase-pin,
  .testimonial-showcase.is-passive .testimonial-pin,
  .blog-hero-showcase.is-passive .blog-hero-pin,
  .hero-trust-scroll.is-passive .hero-trust-pin,
  .about-trust-showcase.is-passive .about-trust-pin,
  .pf-trust-showcase.is-passive .pf-trust-pin,
  .about-process-showcase.is-passive .about-process-pin,
  .seo-partner-showcase.is-passive .seo-partner-showcase-pin,
  .geo-partner-showcase.is-passive .geo-partner-pin,
  .mobiledev-partner-showcase.is-passive .mobiledev-partner-pin,
  .webdev-partner-showcase.is-passive .webdev-partner-pin,
  .uiux-partner-showcase.is-passive .uiux-partner-pin,
  .dm-partner-showcase.is-passive .dm-partner-pin,
  .crm-partner-showcase.is-passive .crm-partner-pin,
  .seo-cases-showcase.is-passive .seo-cases-sticky {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .about-hero,
  .seo-hero,
  .blog-hero,
  .pf-hero {
    min-height: auto;
  }

  .about-hero-inner,
  .seo-hero-inner {
    padding: 20px 24px 56px;
    min-height: auto;
  }

  .about-hero-content,
  .seo-hero-content {
    padding-top: 24px;
    max-width: none;
  }

  .about-hero-title {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .section-about,
  .about-intro,
  .about-trust,
  .about-services-dark,
  .about-process,
  .about-framework-pin {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .projects {
    padding: 72px 0 80px;
  }

  .projects-title {
    font-size: clamp(1.75rem, 6vw, 2.25rem);
  }

  .projects-subtitle {
    font-size: 14px;
    line-height: 1.7;
  }

  .hero-trust {
    gap: 8px;
  }

  .hero-trust-scroll:not(.is-passive) .trust-card {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  .hero-trust-scroll.is-passive:not(.is-marquee) .trust-card {
    flex: 0 0 auto !important;
    scroll-snap-align: none;
  }

  .award-section {
    padding-left: 24px;
    padding-right: 24px;
  }

  .calculator-wrap {
    padding-left: 0;
    padding-right: 0;
  }

  .faq-heading {
    font-size: clamp(1.75rem, 5vw, 2.25rem);
  }

  .reviews-heading {
    font-size: clamp(1.75rem, 5vw, 2.25rem);
  }

  .different-title {
    font-size: clamp(1.75rem, 5vw, 2.25rem);
  }

  .insights-title {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  /* Service pages (seo.css base) */
  .seo-split,
  .seo-dark-box,
  .seo-partner-grid,
  .seo-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  .seo-partner-header {
    grid-template-columns: 1fr !important;
  }

  .seo-partner-intro {
    max-width: none;
  }

  .seo-cases-carousel {
    padding-left: 20px;
    padding-right: 20px;
  }

  .seo-cta .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .seo-cta-inner {
    padding: 32px 24px;
  }

  .seo-dark-box {
    padding: 32px 24px;
  }

  .seo-contact-form .footer-form-grid {
    grid-template-columns: 1fr;
  }

  /* GEO page */
  .geo-solutions-box,
  .geo-benefits-grid {
    grid-template-columns: 1fr;
  }

  .geo-solutions-box {
    padding: 32px 24px;
  }

  /* Portfolio */
  .pf-filters {
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  .pf-hero-content {
    min-height: 320px;
    padding: 32px 0 40px;
  }

  /* Blog */
  .blog-hero-inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .blog-featured-body {
    padding: 0 20px 22px;
  }

  /* Blog detail */
  .bd-hero {
    padding: 32px 0;
  }

  .bd-article {
    padding: 0 4px;
  }

  .bd-related-grid {
    grid-template-columns: 1fr;
  }

  /* Contact */
  .contact-hero-panel {
    padding: 32px 24px 40px;
  }

  .contact-trusted {
    padding: 48px 24px;
  }

  /* Case studies */
  .sym-hero-inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .sym-problem-layout,
  .sym-dark-panel,
  .gsh-problem-layout {
    padding: 32px 24px;
  }

  .sym-more-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* Partner carousels — prevent card min-width overflow (desktop pin mode only) */
  .seo-partner-showcase:not(.is-passive) .seo-partner-showcase-cards-track .seo-partner-card,
  .geo-partner-showcase:not(.is-passive) .geo-partner-cards-track .seo-partner-card,
  .mobiledev-partner-showcase:not(.is-passive) .mobiledev-partner-cards-track .seo-partner-card,
  .webdev-partner-showcase:not(.is-passive) .webdev-partner-cards-track .seo-partner-card,
  .uiux-partner-showcase:not(.is-passive) .uiux-partner-cards-track .seo-partner-card,
  .dm-partner-showcase:not(.is-passive) .dm-partner-cards-track .seo-partner-card,
  .crm-partner-showcase:not(.is-passive) .crm-partner-cards-track .seo-partner-card,
  .about-trust-showcase:not(.is-passive) .about-trust-cards-track .about-trust-card,
  .pf-trust-showcase:not(.is-passive) .pf-trust-cards-track .seo-partner-card {
    min-width: 0;
    max-width: 100%;
  }

  /* Service page contact forms */
  .seo-contact-page .seo-service-tags,
  .seo-contact-page .seo-budget-tags,
  .webdev-contact-page .webdev-service-tags,
  .webdev-contact-page .webdev-budget-tags,
  .mobiledev-contact-page .mobiledev-service-tags,
  .mobiledev-contact-page .mobiledev-budget-tags,
  .uiux-contact-page .uiux-service-tags,
  .uiux-contact-page .uiux-budget-tags,
  .dm-contact-page .dm-service-tags,
  .dm-contact-page .dm-budget-tags,
  .geo-contact .geo-service-tags,
  .geo-contact .geo-budget-tags,
  .crm-service-tags--grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .geo-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .geo-hero-actions .hero-btn-talk,
  .geo-hero-actions .geo-btn-outline {
    width: 100%;
    justify-content: center;
  }

  .mobiledev-applications-video,
  .webdev-solutions-video,
  .uiux-applications-video,
  .dm-applications-video,
  .crm-applications-video,
  .geo-solutions-video {
    max-width: 100%;
    overflow: hidden;
  }

  .mobiledev-hero-visual,
  .webdev-hero-collage,
  .dm-hero-visual,
  .uiux-hero-visual {
    max-width: 100%;
    overflow: hidden;
  }

}

/* ----- Phone landscape (640px) ----- */
@media (max-width: 640px) {
  .trust-card {
    flex: 1 1 100%;
  }

  .hero-headline {
    font-size: clamp(2.25rem, 11vw, 3rem);
  }

  .hero-content {
    min-height: auto;
  }

  .seo-case-slide {
    padding: 28px 20px;
  }

  .seo-services-grid {
    gap: 16px;
  }

  .pf-showcase-visual--liftout .pf-showcase-phones {
    padding: 24px 12px;
  }

  .pf-phone {
    max-width: 100px;
  }

  .sym-screens-grid,
  .gsh-screens-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }

  .sym-screen-item,
  .gsh-screen-frame {
    max-width: none;
    width: 100%;
    margin-top: 0 !important;
  }

  .sym-screen-item:nth-child(even) {
    margin-top: 16px !important;
  }

  .carr-screens-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }

  .mobiledev-hero-grid,
  .webdev-hero-grid,
  .uiux-hero-grid,
  .dm-hero-grid,
  .crm-hero-grid {
    grid-template-columns: 1fr;
  }

  .bd-sidebar {
    flex-direction: column;
  }

  .bd-share-box,
  .bd-cta-box {
    min-width: 0;
    width: 100%;
  }
}

/* ----- Phone (480px) ----- */
@media (max-width: 480px) {
  :root {
    --pad-x: 20px;
    --section-y: 56px;
  }

  .hero-nav-actions .hero-btn-hire,
  .about-hero-content .hero-btn-talk,
  .hero-side .hero-btn-talk {
    padding: 11px 18px;
    font-size: 13px;
  }

  .about-btn,
  .about-intro-btn,
  .service-cta,
  .insights-btn,
  .projects-cta {
    width: 100%;
    justify-content: center;
  }

  .project-card {
    max-width: 100%;
  }

  .seo-hero-title {
    font-size: clamp(1.75rem, 8vw, 2.125rem);
  }

  .seo-section-title {
    font-size: clamp(1.5rem, 6vw, 1.875rem);
  }

  .seo-cta-title {
    font-size: clamp(1.5rem, 6vw, 1.875rem);
  }

  .seo-cases-carousel {
    padding-left: 12px;
    padding-right: 12px;
  }

  .seo-case-arrow {
    width: 36px;
    height: 36px;
  }

  .pf-explore {
    padding: 56px 0 64px;
  }

  .pf-showcase-copy {
    padding: 28px 20px;
  }

  .pf-trust {
    padding: 64px 0;
  }

  .about-trust-card {
    padding: 24px 20px;
  }

  .about-accordion-item {
    padding: 16px 0;
  }

  .codebrit-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  .codebrit-tab:not(.is-active) .codebrit-collapsed {
    min-height: 220px;
    width: 56px;
    flex-shrink: 0;
  }

  .footer-legal {
    flex-direction: column;
    gap: 12px;
  }

  .footer-copyright {
    white-space: normal;
  }

  .sym-problem-phone img,
  .sym-solution-phones img,
  .sym-conclusion-visual img,
  .gsh-mockup-viewport img,
  .carr-mockup-viewport img {
    max-width: min(180px, 100%);
    margin-inline: auto;
    display: block;
  }

  .carr-screens-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .bd-toc {
    padding: 20px 16px;
  }

  .bd-faq-item {
    padding: 16px 0;
  }

  .seo-partner-showcase.is-passive:not(.is-marquee) .seo-partner-card,
  .geo-partner-showcase.is-passive:not(.is-marquee) .seo-partner-card,
  .mobiledev-partner-showcase.is-passive:not(.is-marquee) .seo-partner-card,
  .webdev-partner-showcase.is-passive:not(.is-marquee) .seo-partner-card,
  .uiux-partner-showcase.is-passive:not(.is-marquee) .seo-partner-card,
  .dm-partner-showcase.is-passive:not(.is-marquee) .seo-partner-card,
  .crm-partner-showcase.is-passive:not(.is-marquee) .seo-partner-card,
  .about-trust-showcase.is-passive:not(.is-marquee) .about-trust-card,
  .pf-trust-showcase.is-passive .pf-trust-card {
    flex: 0 0 min(82vw, 320px) !important;
    min-width: 240px !important;
    max-width: none !important;
    scroll-snap-align: none;
  }

  .hero-trust-scroll.is-passive:not(.is-marquee) .trust-card {
    flex: 0 0 min(72vw, 240px) !important;
    min-width: 180px !important;
    max-width: none !important;
    scroll-snap-align: none;
  }

  .hero-trust-scroll.is-marquee .trust-card {
    flex: 0 0 auto !important;
    min-width: 180px !important;
    max-width: none !important;
  }

  .seo-partner-showcase:not(.is-passive) .seo-partner-showcase-cards-track .seo-partner-card,
  .geo-partner-showcase:not(.is-passive) .geo-partner-cards-track .seo-partner-card,
  .mobiledev-partner-showcase:not(.is-passive) .mobiledev-partner-cards-track .seo-partner-card,
  .webdev-partner-showcase:not(.is-passive) .webdev-partner-cards-track .seo-partner-card,
  .uiux-partner-showcase:not(.is-passive) .uiux-partner-cards-track .seo-partner-card,
  .dm-partner-showcase:not(.is-passive) .dm-partner-cards-track .seo-partner-card,
  .crm-partner-showcase:not(.is-passive) .crm-partner-cards-track .seo-partner-card,
  .about-trust-showcase:not(.is-passive) .about-trust-cards-track .about-trust-card,
  .pf-trust-showcase:not(.is-passive) .pf-trust-cards-track .seo-partner-card {
    flex: 0 0 calc(100% - 24px);
    min-width: 0;
  }

  .seo-solutions-tag,
  .geo-solutions-tag,
  .mobiledev-applications-tag,
  .webdev-solutions-tag,
  .uiux-applications-tag,
  .dm-applications-tag,
  .crm-applications-tag {
    white-space: normal;
    text-align: center;
  }

  .seo-hero-btn-outline,
  .geo-btn-outline,
  .seo-cta-btn,
  .seo-partner-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .contact-service-tags {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-service-tag {
    width: 100%;
    text-align: center;
  }
}

/* CODEBRIT framework — tap-to-expand on mobile/tablet (passive mode) */
@media (max-width: 1024px) {
  .about-framework.is-codebrit-passive .about-framework-pin {
    padding: 64px 0;
  }

  .about-framework.is-codebrit-passive .codebrit-tabs {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    overflow: visible;
  }

  .about-framework.is-codebrit-passive .codebrit-mobile-panel {
    width: 100%;
    min-height: 260px;
    flex-shrink: 0;
    position: relative;
  }

  .about-framework.is-codebrit-passive .codebrit-mobile-panel-slide {
    width: 100%;
  }

  .about-framework.is-codebrit-passive .codebrit-mobile-panel-slide[hidden] {
    display: none !important;
  }

  .about-framework.is-codebrit-passive .codebrit-mobile-panel-slide .codebrit-expanded {
    display: flex;
    min-height: 260px;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.08);
  }

  .about-framework.is-codebrit-passive .codebrit-pills-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
    overflow: hidden;
    width: 100%;
    flex-shrink: 0;
    touch-action: manipulation;
  }

  /* Keep every letter fixed in place — override desktop order:-1 / flex grow on active */
  .about-framework.is-codebrit-passive .codebrit-tab,
  .about-framework.is-codebrit-passive .codebrit-tab.is-active {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    order: 0 !important;
  }

  .about-framework.is-codebrit-passive .codebrit-tab {
    cursor: pointer;
    touch-action: manipulation;
  }

  .about-framework.is-codebrit-passive .codebrit-tab .codebrit-expanded {
    display: none !important;
  }

  .about-framework.is-codebrit-passive .codebrit-tab .codebrit-collapsed {
    display: flex !important;
  }

  .about-framework.is-codebrit-passive .codebrit-tab.is-active .codebrit-collapsed {
    border: 2px solid var(--red);
    box-shadow: none;
  }

  .about-framework.is-codebrit-passive .codebrit-tab:not(.is-active) .codebrit-collapsed {
    border: 1px solid #ebebeb;
  }

  .about-framework.is-codebrit-passive .codebrit-collapsed {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 4px 10px;
    box-sizing: border-box;
  }

  .about-framework.is-codebrit-passive .codebrit-letter {
    font-size: clamp(1.25rem, 4.5vw, 2rem);
  }

  .about-framework.is-codebrit-passive .codebrit-icon {
    width: 36px;
    height: 36px;
  }

  .about-framework.is-codebrit-passive .codebrit-icon svg {
    width: 16px;
    height: 16px;
  }

  .about-framework.is-codebrit-passive .codebrit-dark {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 20px 24px;
  }

  .about-framework.is-codebrit-passive .codebrit-letter-lg {
    font-size: 2.75rem;
  }

  .about-framework.is-codebrit-passive .codebrit-content {
    padding: 24px;
  }

  .about-framework.is-codebrit-passive .codebrit-content p {
    max-width: none;
  }
}