/* ===================================================
   ACTIVATION FACTORY — Responsive Stylesheet v2
   Covers all mobile/tablet breakpoints site-wide.

   KEY PRINCIPLE: This file must be the LAST stylesheet
   loaded so it can override everything before it.

   Breakpoints used:
     1200px  large tablet / small laptop
     1024px  tablet landscape
     960px   tablet portrait (nav collapse)
     768px   mobile landscape
     640px   mobile portrait
     480px   small mobile
     380px   very small mobile
=================================================== */


/* ============================================================
   0. CRITICAL GLOBAL — prevent ANY horizontal overflow
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

img, video, svg, iframe, embed, object {
  max-width: 100%;
}

/* ============================================================
   0b. UTILITY CLASSES
   ============================================================ */

/* grid-gap-lg: used on grid-2 sections that had inline gap:80px */
.grid-gap-lg {
  gap: 80px;
}

/* inline-grid-2: used in about.html for the 2×2 stat badges */
.inline-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* case-studies-grid: replaces the minmax(360px) inline grid */
.case-studies-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

@media (max-width: 1024px) {
  .case-studies-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   1. CONTAINER — controlled padding at every breakpoint
   ============================================================ */

@media (max-width: 1024px) {
  .container {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (max-width: 768px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* ============================================================
   2. SECTION SPACING
   ============================================================ */

@media (max-width: 768px) {
  .section    { padding-top: 56px; padding-bottom: 56px; }
  .section-sm { padding-top: 40px; padding-bottom: 40px; }
}

@media (max-width: 480px) {
  .section    { padding-top: 44px; padding-bottom: 44px; }
  .section-sm { padding-top: 32px; padding-bottom: 32px; }
}


/* ============================================================
   3. TYPOGRAPHY SCALING
   ============================================================ */

@media (max-width: 768px) {
  h1 { font-size: clamp(1.9rem, 7vw, 2.6rem) !important; }
  h2 { font-size: clamp(1.5rem, 5.5vw, 2rem) !important; }
  h3 { font-size: clamp(1.1rem, 4vw, 1.5rem) !important; }
  .lead { font-size: 0.95rem; max-width: 100% !important; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.4rem !important; }
}


/* ============================================================
   4. NAVIGATION
   ============================================================ */

@media (max-width: 960px) {
  .nav-links         { display: none !important; }
  .nav-toggle        { display: flex !important; }
  .nav-cta .btn      { display: none !important; }
  .logo img          { height: 34px; }
}

/* Mobile nav dropdown */
.mobile-nav {
  /* Ensure it never causes horizontal scroll */
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

@media (max-width: 480px) {
  .mobile-nav { padding: 24px 16px; }
  .mobile-nav a { font-size: 0.9rem; padding: 12px 0; }
}


/* ============================================================
   5. TICKER / MARQUEE — must not widen the page
   ============================================================ */

.ticker-wrap {
  overflow: hidden;
  max-width: 100vw;
  width: 100%;
}

.ticker-inner {
  /* white-space: nowrap is needed for the scroll effect,
     but overflow: hidden on the wrapper handles clipping */
  will-change: transform;
}


/* ============================================================
   6. HOMEPAGE HERO
   ============================================================ */

@media (max-width: 960px) {
  .hero {
    padding-top: calc(var(--header-height, 80px) + 40px);
    min-height: auto;
    padding-bottom: 60px;
  }
  .hero-content   { text-align: center; }
  .hero-desc      { max-width: 100% !important; margin: 0 auto 36px; }
  .btn-group      { justify-content: center; flex-wrap: wrap; }
  .hero-visual    { display: none !important; }
}

@media (max-width: 768px) {
  .hero-stats {
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 0;
    padding-top: 32px;
    justify-content: center;
  }
  .hero-stat-value { font-size: 1.9rem; }
  .hero-scroll     { display: none !important; }
}

@media (max-width: 480px) {
  .hero { padding-bottom: 44px; }
  .hero-tag { font-size: 0.62rem; padding: 6px 12px; }
  .hero-stat-value { font-size: 1.6rem; }
  /* Ensure hero stats wrap to 2x2 on very small phones */
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}


/* ============================================================
   7. GRID-2 WITH LARGE GAP (grid-gap-lg class)
   ============================================================ */

@media (max-width: 1024px) {
  .grid-gap-lg { gap: 48px !important; }
}

@media (max-width: 768px) {
  /* Collapse grid-2 to single column */
  .grid-2,
  .grid-gap-lg {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

@media (max-width: 480px) {
  .grid-2,
  .grid-gap-lg {
    gap: 28px !important;
  }
}


/* ============================================================
   8. GLOBAL GRID COLLAPSE
   ============================================================ */

@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr !important; }
  .grid-3 { grid-template-columns: 1fr !important; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr !important; }
}


/* ============================================================
   9. INLINE-GRID-2 (about.html stat badges)
   ============================================================ */

@media (max-width: 480px) {
  .inline-grid-2 {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* ============================================================
   10. FEATURED WORK GRID (homepage — 5 cards)
   ============================================================ */

@media (max-width: 1024px) {
  .featured-work-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
  }
  .featured-work-grid .fw-main {
    grid-column: 1 / 3 !important;
    grid-row: auto !important;
  }
  .featured-work-grid .fw-main .work-card-placeholder {
    aspect-ratio: 16/7 !important;
  }
  .featured-work-grid .fw-top-right,
  .featured-work-grid .fw-top-far,
  .featured-work-grid .fw-bot-right,
  .featured-work-grid .fw-bot-far {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (max-width: 640px) {
  .featured-work-grid {
    grid-template-columns: 1fr !important;
  }
  .featured-work-grid .fw-main {
    grid-column: 1 !important;
  }
  .featured-work-grid .fw-main .work-card-placeholder {
    aspect-ratio: 4/3 !important;
  }
  .featured-work-grid [class*="fw-"] .work-card-placeholder {
    aspect-ratio: 4/3 !important;
  }
}


/* ============================================================
   11. STATS STRIP
   ============================================================ */

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stat-item {
    padding: 28px 16px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  .stat-item:nth-child(odd)  { border-right: 1px solid rgba(255,255,255,0.06) !important; }
  .stat-item:nth-child(3),
  .stat-item:nth-child(4)    { border-bottom: none !important; }
}

@media (max-width: 480px) {
  .stat-number { font-size: 2rem !important; }
  .stat-item   { padding: 20px 12px !important; }
}


/* ============================================================
   12. DIFF GRID (homepage why-us)
   ============================================================ */

@media (max-width: 768px) {
  .diff-grid { grid-template-columns: 1fr !important; }
  .diff-item { padding: 24px 20px; }
}


/* ============================================================
   13. ABOUT STRIP (homepage)
   ============================================================ */

@media (max-width: 960px) {
  .about-strip {
    flex-direction: column !important;
    padding: 40px 32px !important;
    gap: 36px !important;
  }
  .about-strip-visual {
    width: 100% !important;
    flex-direction: row !important;
  }
  .about-badge { flex: 1; }
}

@media (max-width: 480px) {
  .about-strip { padding: 28px 20px !important; }
  .about-badge-num { font-size: 1.6rem; }
}


/* ============================================================
   14. SERVICE CARDS
   ============================================================ */

@media (max-width: 768px) {
  .service-card { padding: 28px 22px; }
}


/* ============================================================
   15. CTA BANNER
   ============================================================ */

@media (max-width: 768px) {
  .cta-banner .container {
    flex-direction: column !important;
    text-align: center;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    gap: 24px !important;
  }
  .cta-banner-text h2 { font-size: 1.7rem !important; }
}


/* ============================================================
   16. TESTIMONIALS
   ============================================================ */

@media (max-width: 768px) {
  .testimonial-card { padding: 28px 22px; }
  .testimonial-text { font-size: 0.93rem; }
}


/* ============================================================
   17. FOOTER
   ============================================================ */

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    margin-bottom: 40px !important;
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center;
    gap: 12px !important;
  }
  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px !important;
  }
  .site-footer { padding: 48px 0 28px; }
}

@media (max-width: 480px) {
  .footer-desc { max-width: 100% !important; }
}


/* ============================================================
   18. PAGE HERO (inner pages — about, services, work, contact)
   ============================================================ */

@media (max-width: 768px) {
  .page-hero       { min-height: auto !important; }
  .page-hero-content { padding: 44px 0 !important; }
}

@media (max-width: 480px) {
  .page-hero-content { padding: 36px 0 !important; }
}


/* ============================================================
   19. WORK PAGE — case studies grid & portfolio
   ============================================================ */

/* .case-studies-grid already defined above with responsive rules */

/* Portfolio grid */
@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .portfolio-grid .work-card.featured {
    grid-column: span 2 !important;
  }
}

@media (max-width: 480px) {
  .portfolio-grid {
    grid-template-columns: 1fr !important;
  }
  .portfolio-grid .work-card.featured {
    grid-column: span 1 !important;
  }
  .portfolio-grid .work-card.featured .work-card-placeholder {
    aspect-ratio: 4/3 !important;
  }
}

/* Client spotlight */
@media (max-width: 1024px) {
  .client-spotlight { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 640px) {
  .client-spotlight { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Filter bar */
@media (max-width: 640px) {
  .filter-bar { gap: 8px; }
  .filter-btn { padding: 7px 14px; font-size: 0.72rem; }
}

/* Work card body */
@media (max-width: 480px) {
  .work-card-body  { padding: 20px 18px; }
  .work-card-title { font-size: 0.98rem; }
  .work-card-desc  { font-size: 0.83rem; }
}


/* ============================================================
   20. CASE STUDY PAGES — HERO
   ============================================================ */

@media (max-width: 768px) {
  .cs-hero         { min-height: 55vh !important; }
  .cs-hero-content { padding: 52px 0 44px !important; }
  .cs-hero-title   { font-size: clamp(1.6rem, 5.5vw, 2.2rem) !important; max-width: 100% !important; }
  .cs-hero-subtitle { font-size: 0.92rem !important; max-width: 100% !important; }
}

@media (max-width: 480px) {
  .cs-hero         { min-height: 46vh !important; }
  .cs-hero-title   { font-size: 1.55rem !important; }
  .cs-hero-meta    { gap: 8px !important; flex-wrap: wrap !important; }
}


/* ============================================================
   21. CASE STUDY — STATS BAR
   ============================================================ */

@media (max-width: 768px) {
  .cs-stats-bar .container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .cs-stat {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 22px 14px !important;
  }
  .cs-stat:nth-child(odd)  {
    border-right: 1px solid rgba(255,255,255,0.06) !important;
  }
  .cs-stat:last-child,
  .cs-stat:nth-last-child(2):nth-child(odd) {
    border-bottom: none !important;
  }
}

@media (max-width: 480px) {
  .cs-stat-value { font-size: 1.35rem !important; }
  .cs-stat-label { font-size: 0.66rem !important; }
}


/* ============================================================
   22. CASE STUDY — BODY (main + sidebar layout)
   ============================================================ */

@media (max-width: 1200px) {
  .cs-body {
    grid-template-columns: 1fr 260px !important;
    gap: 36px !important;
  }
}

@media (max-width: 1024px) {
  .cs-body {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Sidebar: 2-col card layout on tablet */
  .cs-sidebar {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }

  .cs-sidebar .cs-sidebar-cta {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 640px) {
  .cs-sidebar {
    grid-template-columns: 1fr !important;
  }
  .cs-sidebar .cs-sidebar-cta {
    grid-column: 1 !important;
  }
}

@media (max-width: 480px) {
  .cs-sidebar-card { padding: 20px 16px !important; }
  .cs-detail-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
  }
  .cs-detail-value { text-align: left !important; }
}


/* ============================================================
   23. CASE STUDY — CONTENT BLOCKS
   ============================================================ */

@media (max-width: 768px) {
  .cs-main h2      { font-size: 1.25rem; margin-top: 32px; }
  .cs-quote        { padding: 18px 22px; }
  .cs-quote p      { font-size: 0.95rem !important; }
  .cs-outcomes     { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .cs-deliverables { grid-template-columns: 1fr !important; }
  .cs-gallery      { grid-template-columns: 1fr !important; gap: 12px; }
  .cs-gallery-item.wide {
    grid-column: span 1 !important;
    aspect-ratio: 4/3 !important;
  }
}

@media (max-width: 480px) {
  .cs-outcomes { grid-template-columns: 1fr !important; }
  .cs-outcome  { padding: 18px 14px !important; }
  .cs-outcome-value { font-size: 1.3rem !important; }
}


/* ============================================================
   24. CASE STUDY — RELATED PROJECTS GRID
   ============================================================ */

@media (max-width: 1024px) {
  .cs-related-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 640px) {
  .cs-related-grid { grid-template-columns: 1fr !important; }
}


/* ============================================================
   25. DOLMEN — CAMPAIGN TAB SYSTEM
   ============================================================ */

.campaign-tabs-nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
}
.campaign-tabs-nav::-webkit-scrollbar { display: none; }

@media (max-width: 768px) {
  .campaign-tab-btn { padding: 12px 14px !important; font-size: 0.7rem !important; }

  .campaign-panel-header {
    grid-template-columns: 1fr !important;
    padding: 22px !important;
    gap: 16px !important;
  }
  .campaign-panel-badge {
    text-align: left !important;
    min-width: unset !important;
  }
}

@media (max-width: 560px) {
  .campaign-tab-btn { padding: 10px 10px !important; font-size: 0.66rem !important; }
  .campaign-tab-btn .tab-count { display: none; }
}

@media (max-width: 480px) {
  .campaign-highlights { grid-template-columns: 1fr !important; }
  .partnership-banner  { grid-template-columns: 1fr !important; padding: 22px !important; }
  .scope-grid          { grid-template-columns: 1fr !important; }
}


/* ============================================================
   26. DATE PALM EXPO — PARTNER & EDITION CARDS
   ============================================================ */

@media (max-width: 768px) {
  .cs-partners        { grid-template-columns: 1fr !important; }
  .cs-edition-compare { grid-template-columns: 1fr !important; }
}


/* ============================================================
   27. SERVICES PAGE — service section inner
   ============================================================ */

/* Already handled by the inline <style> in services.html at 1024px,
   but add a mobile-specific override for safety */
@media (max-width: 768px) {
  .service-section-inner {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .service-section:nth-child(even) .service-section-inner {
    direction: ltr !important;
  }
}


/* ============================================================
   28. CONTACT PAGE
   ============================================================ */

@media (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .contact-info-card { padding: 28px 22px !important; }
}

@media (max-width: 480px) {
  .form-control { padding: 12px 14px; font-size: 0.9rem; }
}


/* ============================================================
   29. ABOUT PAGE — inline stat grid (2×2)
   ============================================================ */

/* .inline-grid-2 already collapses above */
@media (max-width: 768px) {
  .inline-grid-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}


/* ============================================================
   30. LEGAL PAGES (privacy / terms)
   ============================================================ */

@media (max-width: 1024px) {
  .legal-layout {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .legal-toc {
    position: static !important;
    max-height: none !important;
  }
}

@media (max-width: 768px) {
  .legal-hero { padding-top: calc(var(--header-height, 80px) + 40px) !important; }
}


/* ============================================================
   31. BUTTONS — responsive sizing
   ============================================================ */

@media (max-width: 480px) {
  .btn { padding: 12px 20px; font-size: 0.8rem; gap: 8px; }
  .btn-group { gap: 12px; }
}


/* ============================================================
   32. BREADCRUMBS
   ============================================================ */

@media (max-width: 640px) {
  .cs-breadcrumb,
  .breadcrumb {
    flex-wrap: wrap;
    font-size: 0.7rem;
    gap: 6px !important;
  }
}


/* ============================================================
   33. SECTOR / INDUSTRY CHIPS
   ============================================================ */

@media (max-width: 480px) {
  .sector-chip    { padding: 9px 14px; font-size: 0.78rem; }
  .industry-tag   { padding: 8px 16px; font-size: 0.78rem; }
}


/* ============================================================
   34. PROCESS STEPS
   ============================================================ */

@media (max-width: 480px) {
  .process-step { gap: 16px; }
  .process-num  { width: 36px; height: 36px; font-size: 0.7rem; flex-shrink: 0; }
}


/* ============================================================
   35. CLIENT LOGOS GRID
   ============================================================ */

@media (max-width: 640px) {
  .clients-grid { gap: 28px 32px !important; }
  .client-logo  { font-size: 0.72rem !important; }
}


/* ============================================================
   36. SECTION HEADER — centered + section-header spacing
   ============================================================ */

@media (max-width: 768px) {
  .section-header { margin-bottom: 28px; }
}


/* ============================================================
   37. WORK CARD — general
   ============================================================ */

@media (max-width: 768px) {
  .work-card-body  { padding: 22px 20px; }
}

@media (max-width: 480px) {
  .work-card-body  { padding: 18px 16px; }
  .work-card-title { font-size: 0.95rem; }
}


/* ============================================================
   38. HERO STATS — ensure 4 stats never overflow
   ============================================================ */

@media (max-width: 640px) {
  .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-top: 36px !important;
    margin-bottom: 0 !important;
  }
  .hero-stat-value { font-size: 1.7rem; }
}


/* ============================================================
   39. NAV INNER — prevent logo + toggle overflow
   ============================================================ */

.nav-inner {
  min-width: 0;
}

.logo {
  min-width: 0;
  flex-shrink: 1;
}


/* ============================================================
   40. CASE STUDY CARD (work.html) — prevent overflow
   ============================================================ */

.case-study-card {
  min-width: 0;
  width: 100%;
}

@media (max-width: 768px) {
  .case-study-body    { padding: 22px 20px !important; }
  .case-study-metrics { gap: 20px; flex-wrap: wrap; }
  .case-study-metric-value { font-size: 1.2rem; }
}

@media (max-width: 480px) {
  .case-study-body { padding: 18px 14px !important; }
}


/* ============================================================
   41. ABOUT PAGE — visual box & stat grid (targeted fixes)
   ============================================================ */

/* The about-visual-box has padding controlled by about.html <style>.
   Ensure its children never overflow. */
.about-visual-box {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.about-stat-grid {
  width: 100%;
  box-sizing: border-box;
}

.about-stat-item {
  box-sizing: border-box;
  min-width: 0;
  word-break: break-word;
}

@media (max-width: 768px) {
  .about-visual-box { padding: 28px 20px !important; }
  .about-stat-grid  { gap: 10px !important; }
  .about-stat-num   { font-size: 1.6rem !important; }
  .about-stat-item  { padding: 16px 12px !important; }
}

@media (max-width: 480px) {
  .about-visual-box { padding: 18px 14px !important; }
  .about-stat-num   { font-size: 1.35rem !important; }
  .about-stat-item  { padding: 12px 10px !important; }
}


/* ============================================================
   42. CS-BODY padding reduction on mobile
   ============================================================ */

@media (max-width: 768px) {
  /* The --spacing-xl (96px) padding is too large on mobile */
  .cs-body {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  /* Section wrapper around cs-body */
  .cs-body-section {
    padding-top: 40px !important;
  }
}

@media (max-width: 480px) {
  .cs-body {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .cs-body-section {
    padding-top: 28px !important;
  }
}


/* ============================================================
   43. CAMPAIGN HIGHLIGHTS — ensure proper wrapping
   ============================================================ */

.campaign-highlights {
  box-sizing: border-box;
}

.campaign-highlight {
  box-sizing: border-box;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
  .campaign-highlights {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .campaign-highlight { padding: 20px 18px !important; }
}

@media (max-width: 480px) {
  .campaign-highlights {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}


/* ============================================================
   44. CAMPAIGN PANEL — padding reduction & safe layout
   ============================================================ */

.campaign-panel-header {
  box-sizing: border-box;
  min-width: 0;
}

@media (max-width: 768px) {
  .campaign-panel-header {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
    gap: 14px !important;
  }
  .campaign-panel-title { font-size: 1.25rem !important; }
  .campaign-panel-desc  { max-width: 100% !important; font-size: 0.85rem !important; }
  .campaign-panel-badge { min-width: unset !important; padding: 14px 16px !important; text-align: left !important; }
}

@media (max-width: 480px) {
  .campaign-panel-header { padding: 16px !important; }
  .campaign-panel-title  { font-size: 1.1rem !important; }
}


/* ============================================================
   45. SCOPE GRID & PARTNERSHIP BANNER — safe on mobile
   ============================================================ */

.scope-grid {
  box-sizing: border-box;
}

.scope-item {
  box-sizing: border-box;
  min-width: 0;
  word-wrap: break-word;
}

@media (max-width: 640px) {
  .scope-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .scope-item { padding: 14px !important; }
}

@media (max-width: 480px) {
  .partnership-banner { padding: 18px !important; grid-template-columns: 1fr !important; gap: 16px !important; }
  .partnership-banner-title { font-size: 1.05rem !important; }
}


/* ============================================================
   46. GLOBAL OVERFLOW SAFEGUARDS — catch-all for any missed element
   ============================================================ */

/* Prevent any grid or flex child from protruding the viewport */
.container > *,
.container > * > * {
  min-width: 0;
}

@media (max-width: 768px) {
  /* Any element with a fixed min-width or explicit width should scale down */
  [style*="min-width"],
  [style*="width: "] {
    max-width: 100% !important;
  }

  /* Ensure tables scroll horizontally rather than breaking layout */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Ensure no direct child of .container exceeds its width */
  .container {
    overflow: hidden;
  }
}

@media (max-width: 480px) {
  /* Extra protection on very small screens */
  .section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow: visible;
  }
}