/* ============================================================
   MJCA SAMOA — FULL DESIGN REVAMP
   Injected via <link> after existing stylesheets
   Keeps teal/green palette, modern government aesthetic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── DESIGN TOKENS ────────────────────────────────────────── */
:root {
  --primary:       #0e7490;   /* deep teal */
  --primary-dark:  #0c4a6e;   /* navy teal */
  --primary-light: #e0f2fe;   /* sky tint */
  --accent:        #16a34a;   /* green */
  --accent-light:  #dcfce7;   /* green tint */
  --gold:          #ca8a04;   /* warm gold accent */
  --dark:          #0f172a;   /* near black */
  --mid:           #475569;   /* slate */
  --light:         #f1f5f9;   /* light bg */
  --white:         #ffffff;
  --border:        #e2e8f0;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:     0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:     0 12px 40px rgba(0,0,0,.14);
  --radius:        12px;
  --radius-sm:     8px;
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'DM Sans', system-ui, sans-serif;
}

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

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}
body {
  font-family: var(--font-body) !important;
  color: var(--dark) !important;
  background: #f8fafc !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

p { line-height: 1.75 !important; }

a { transition: color .2s, opacity .2s; }



/* ── CRITICAL: Prevent inline-block slides causing horizontal overflow ── */
.w-slider,
.w-slider-mask {
  overflow: hidden !important;
  max-width: 100% !important;
  white-space: normal !important;
}
.w-slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  display: block !important;
  opacity: 0 !important;
  overflow: hidden !important;
}
.w-slide:first-child {
  opacity: 1 !important;
  z-index: 1 !important;
}
.w-slider { height: 520px !important; }
@media (max-width: 767px) {
  .w-slider,
  .w-slider-mask,
  .w-slide { height: 320px !important; }
}

/* section-3 shell — let navbar.js style handle visuals */
.section-3 {
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 100% !important;
}

/* Hide Serving Samoa top bar */


.text-block-20, .text-block-21 {
  color: rgba(255,255,255,0.9) !important;
  font-size: 12px !important;
  font-family: var(--font-body) !important;
}

/* Logo area */
.logo-section { padding: 8px 0 !important; }

.paragraph-16 {
  color: var(--primary-dark) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: var(--font-display) !important;
  line-height: 1.3 !important;
}

.paragraph-17 {
  color: var(--mid) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  font-family: var(--font-body) !important;
  width: auto !important;
  display: block !important;
}

/* Nav links */
.nav-link-copy {
  color: var(--dark) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  width: auto !important;
  min-width: auto !important;
  border-radius: var(--radius-sm) !important;
  transition: background .2s, color .2s !important;
  letter-spacing: 0.01em;
}

.nav-link-copy:hover {
  background: var(--primary-light) !important;
  color: var(--primary-dark) !important;
  border-radius: var(--radius-sm) !important;
}

.nav-link-copy.w--current {
  color: var(--primary) !important;
  font-weight: 600 !important;
  background: var(--primary-light) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 14px !important;
}

/* Dropdown */
.dropdown-list-2 {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 8px !important;
  min-width: 260px !important;
  margin-top: 4px !important;
}

.drpdwn {
  color: var(--dark) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 9px 14px !important;
  border-radius: var(--radius-sm) !important;
  text-decoration: none !important;
  display: block !important;
  transition: background .15s, color .15s !important;
}

.drpdwn:hover {
  background: var(--primary-light) !important;
  color: var(--primary-dark) !important;
}

/* ── HERO (internal page hero) ────────────────────────────── */
.it-hero {
  background-color: #0e5c42 !important;
  background-image: url('../images/bg-tribal-teal.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-blend-mode: overlay !important;
  padding: 48px 5% 48px !important;
  position: relative;
  overflow: hidden;
}

.it-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.it-hero .heading-21,
.it-hero h1 {
  color: var(--white) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 4vw, 48px) !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
  position: relative;
  z-index: 1;
}

.it-hero .paragraph-29,
.it-hero p {
  color: rgba(255,255,255,0.85) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  max-width: 900px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-family: var(--font-body) !important;
  position: relative;
  z-index: 1;
}

/* ── MAIN CONTENT AREA ────────────────────────────────────── */
.section-41 {
  background: #f8fafc !important;
  padding: 48px 5% !important;
}

/* Division overview/objectives blocks */
.div-block-50 {
  background: var(--white) !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 32px !important;
  margin-bottom: 24px !important;
  transition: box-shadow .2s !important;
}

.div-block-50:hover {
  box-shadow: var(--shadow-md) !important;
}

.div-block-51 {
  border-bottom: 2px solid var(--primary-light) !important;
  padding-bottom: 16px !important;
  margin-bottom: 20px !important;
  padding-left: 0 !important;
}

.heading-30 {
  color: var(--primary-dark) !important;
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  padding-left: 0 !important;
  position: relative;
  padding-left: 16px !important;
}

.heading-30::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
  border-radius: 4px;
}

.paragraph, .paragraph-copy {
  color: var(--mid) !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

/* Section cards (Our Sections) */
.link-block-29 {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 24px !important;
  transition: all .25s !important;
  text-decoration: none !important;
  margin-bottom: 16px !important;
}

.link-block-29:hover {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

.heading-43, .heading-39, .heading-40, .heading-41, .heading-42 {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--dark) !important;
}

/* Team sidebar */
.div-block-53 {
  background: var(--white) !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
}

.team-header {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
  padding: 20px 24px !important;
}

.heading-31 {
  color: var(--white) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ── FOOTER ───────────────────────────────────────────────── */
.section-4 {
  background: var(--dark) !important;
  padding: 60px 5% 0 !important;
}

.footer-content {
  grid-template-columns: 1.5fr 1fr 1.5fr !important;
  gap: 48px !important;
  max-width: 1200px !important;
  margin: 0 auto 48px !important;
  padding-bottom: 48px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.heading-7 {
  color: var(--white) !important;
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--primary) !important;
  display: inline-block !important;
}

.paragraph-9 {
  color: rgba(255,255,255,0.6) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
}

.paragraph-9 a {
  color: rgba(255,255,255,0.7) !important;
  text-decoration: none !important;
  transition: color .2s !important;
}

.paragraph-9 a:hover {
  color: var(--white) !important;
}

.footer-bottom {
  background: rgba(0,0,0,0.3) !important;
  padding: 20px 5% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.text-block-6 {
  color: rgba(255,255,255,0.4) !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  text-align: left !important;
}

/* ── HOMEPAGE HERO SLIDER ─────────────────────────────────── */
.hero-slider { margin-top: 68px !important; }
.hero-slider {
  margin-top: 115px !important;
}

/* ── VISION/MISSION CARDS ─────────────────────────────────── */
.link-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 36px 28px !important;
  text-decoration: none !important;
  transition: all .25s !important;
}

.link-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px) !important;
  border-color: var(--primary) !important;
}

.link-icon {
  background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
  border-radius: var(--radius-sm) !important;
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
}

.mission-title {
  color: var(--primary-dark) !important;
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  margin-bottom: 12px !important;
}

.link-description, .mission {
  color: var(--mid) !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* ── SERVICE CARDS (homepage) ─────────────────────────────── */
.service-cards {
  background: var(--primary-light) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(14,116,144,0.12) !important;
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.button, .btn, [class*="button"] {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  border-radius: var(--radius-sm) !important;
  letter-spacing: 0.02em !important;
}

/* ── MOBILE RESPONSIVENESS ────────────────────────────────── */
@media (max-width: 991px) {
  

  .it-hero {
    padding: 90px 5% 48px !important;
  }

  .it-hero .heading-21 {
    font-size: 28px !important;
  }

  .footer-content {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .div-block-50 {
    padding: 24px !important;
  }
}

@media (max-width: 767px) {
  .nav-link-copy {
    font-size: 15px !important;
    padding: 12px 16px !important;
    width: 100% !important;
    text-align: left !important;
    border-radius: 0 !important;
  }

  .it-hero {
    padding: 80px 5% 40px !important;
  }

  .it-hero .paragraph-29,
  .it-hero p {
    white-space: normal !important;
    font-size: 14px !important;
  }

  .heading-30 {
    font-size: 19px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
  }

  .section-41 {
    padding: 32px 5% !important;
  }
}

@media (max-width: 479px) {
  .it-hero .heading-21 {
    font-size: 24px !important;
  }

  .div-block-50 {
    padding: 18px !important;
  }
}

/* ── HOMEPAGE SECTIONS ────────────────────────────────────── */

/* Leadership messages section */
.section-5, [class*="leadership"] {
  background: var(--white) !important;
  padding: 60px 5% !important;
}

/* Stats/numbers section */
.section-2 {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
}

/* News section bg */
.section-6, .section-7 {
  background: var(--light) !important;
}

/* ── UTILITY OVERRIDES ────────────────────────────────────── */

/* Remove inline styles that conflict */
.w-layout-blockcontainer {
  max-width: 1200px !important;
}

/* Improve image rounding */
img { border-radius: 4px; }



/* Focus styles for accessibility */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--primary) !important;
  outline-offset: 3px !important;
}

/* ── PRINT ────────────────────────────────────────────────── */
@media print {
  .headerg, .section-4 { display: none !important; }
  body { background: white !important; }
}

/* ── HERO SLIDER FIX ──────────────────────────────────────── */
.hero-slider {
  margin-top: 115px !important;
  height: 520px !important;
  min-height: 520px !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
}

.slider.w-slider {
  height: 520px !important;
  min-height: 520px !important;
}

.w-slider-mask {
  height: 520px !important;
  min-height: 520px !important;
}

.slide, .slide-2, .slide-3, .slide-copy {
  height: 520px !important;
  min-height: 520px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-left: 5% !important;
}

.slide {
  background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('../images/5.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 1 !important;
}

.slide-2 {
  background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('../images/3.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
}

.slide-3 {
  background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('../images/Untitled-design.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
}

.slide-content, .slide-content2 {
  max-width: 700px !important;
  padding: 40px !important;
  text-align: left !important;
}

.heading {
  color: var(--white) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(32px, 5vw, 56px) !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
  margin-bottom: 16px !important;
  line-height: 1.1 !important;
}

.paragraph-2, .paragraph-3 {
  color: rgba(255,255,255,0.92) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  font-family: var(--font-body) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}

/* Slider arrows */
.w-slider-arrow-left, .w-slider-arrow-right {
  background: rgba(255,255,255,0.15) !important;
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  backdrop-filter: blur(4px) !important;
  transition: background .2s !important;
}

.w-slider-arrow-left:hover, .w-slider-arrow-right:hover {
  background: rgba(255,255,255,0.3) !important;
}

/* Slider dots */
.w-slider-nav .w-slider-dot {
  background: rgba(255,255,255,0.4) !important;
  border-radius: 50% !important;
  width: 10px !important;
  height: 10px !important;
}

.w-slider-nav .w-slider-dot.w-active {
  background: var(--white) !important;
}

@media (max-width: 767px) {
  .hero-slider,
  .slider.w-slider,
  .w-slider-mask,
  .slide, .slide-2, .slide-3 {
    height: 380px !important;
    min-height: 380px !important;
  }
  .heading {
    font-size: 28px !important;
  }
  .paragraph-2, .paragraph-3 {
    font-size: 16px !important;
  }
}

/* ── HERO SLIDER CRITICAL FIX (slide-copy is first slide) ── */
.slide-copy {
  background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../images/4.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  height: 520px !important;
  min-height: 520px !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-left: 5% !important;
  margin-top: 0 !important;
  overflow: visible !important;
}

/* Force w-slider-mask to show height before JS loads */
.w-slider-mask {
  height: 520px !important;
  min-height: 520px !important;
  overflow: hidden !important;
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* w-slide height handled by the CRITICAL fix block above */

.slider.w-slider {
  overflow: hidden !important;
  max-width: 100% !important;
}

@media (max-width: 767px) {
  .slide-copy,
  .w-slider-mask {
    height: 320px !important;
    min-height: 320px !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
}

/* ── BODY FLEX FIX ────────────────────────────────────────── */
body { padding-top: 0 !important; }
body {
  display: block !important;
  flex-flow: unset !important;
  justify-content: unset !important;
}

.body-4 {
  display: block !important;
  flex-flow: unset !important;
  justify-content: unset !important;
}


/* Fix page content top offset — header is now 76px (was 115px with headertop) */
.hero-slider { margin-top: 0 !important; }
.it-hero,
section[class*="section-"]:first-of-type,
.section-33:first-child { margin-top: 0 !important; }


/* Fix all page hero sections to clear fixed navbar */

/* ── HEADER WRAPPER — strips all webflow styling, navbar.js handles everything ── */
/* ── Headerg: kill ALL webflow background/sizing — navbar.js owns the visual ── */
.headerg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 0 !important;
  overflow: visible !important;
  z-index: 1000 !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
/* Strip all nested webflow wrappers inside headerg */
.headerg .nav-container,
.headerg .w-container,
.headerg .w-layout-blockcontainer,
.headerg .section-3,
.headerg .navbar-copy {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  background-image: none !important;
}
/* Hide old static nav elements — navbar.js replaces them */
.headertop { display: none !important; }
.headerg .navbar-copy.w-nav:not(.mjca-nav-root) { display: none !important; }


/* ── FIX HORIZONTAL OVERFLOW ──────────────────────────────── */
/* Slider mask must clip overflowing slides */
.hero-slider,
.w-slider,
.w-slider-mask {
  overflow: hidden !important;
  max-width: 100% !important;
}

/* Mobile drawer must not overflow horizontally when closed */
.mjca-mobile-drawer {
  overflow: hidden !important;
  max-width: 100% !important;
}

/* Prevent any section from overflowing */
section, .section-23, .section-40, #hp-search-bar {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* ── CLEAR FIXED NAVBAR (76px) ──────────────────────────── */
.it-hero,
.green-hero,
.faq-hero,
.sch-hero,
.search-hero,
.art-hero,
.hero-slider {
  margin-top: 76px !important;
}
body {
  padding-top: 0 !important;
}

/* Hero subtitles — single line with ellipsis on all hero types */
.green-hero p,
.green-hero .green-hero-sub,
.art-hero p,
.faq-hero p,
.sch-hero p,
.search-hero p {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* Service page sidebars - static position, aligned to top */
.div-block-46,
.div-block-52 {
  position: relative !important;
  top: auto !important;
  align-self: start !important;
}
.w-layout-grid.grid-11 {
  align-items: start !important;
}

/* ── Mobile hero slider fix ───────────────────────────────────── */
.hero-slider,
.slider.w-slider,
.w-slider-mask {
  overflow: hidden !important;
  max-width: 100vw !important;
}
@media (max-width: 767px) {
  .hero-slider {
    margin-top: 76px !important;
    overflow: hidden !important;
  }
  .slider {
    height: 320px !important;
    overflow: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }
  .w-slider-mask {
    height: 320px !important;
    overflow: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  .w-slide,
  .hero-slide-dynamic {
    height: 320px !important;
    max-width: 100vw !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  .hero-slide-dynamic {
    background-size: cover !important;
    background-position: center 30% !important;
  }
  .hero-slide-dynamic .slide-text {
    padding: 20px 16px !important;
  }
  .hero-slide-dynamic .slide-text h1 {
    font-size: 22px !important;
    margin-bottom: 8px !important;
  }
  .hero-slide-dynamic .slide-text p {
    font-size: 14px !important;
  }
  .w-slider-arrow-left,
  .w-slider-arrow-right {
    width: 36px !important;
  }
}

/* ── Footer full width fix ─────────────────────────────────────── */
.section-4 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background-color: #0f2137 !important;
}
.section-4 .w-container,
.section-4 .w-layout-blockcontainer {
  max-width: 100% !important;
  padding: 0 !important;
}
.mjca-footer {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* ── Mobile full width fix ─────────────────────────────────────── */
@media (max-width: 767px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .w-container,
  .w-layout-blockcontainer,
  .nav-container,
  .container-6 {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .section-3,
  .headerg {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── Mobile overflow fix ────────────────────────────────────────── */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .w-layout-blockcontainer,
  .w-container,
  .nav-container,
  .container-6,
  .section-3 {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* ── Prevent horizontal overflow on mobile ─────────────────────── */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
@media (max-width: 767px) {
  .w-container,
  .container-6,
  .nav-container,
  .section-3,
  .headerg,
  .w-layout-blockcontainer {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* ── Fix all fixed-width elements causing horizontal overflow on mobile ── */
@media (max-width: 767px) {
  .div-block-4-copy,
  .div-block-16,
  .dropdown-wrapper,
  [class*="div-block"],
  [class*="container"],
  [class*="section"] {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* Kill any fixed px widths on common webflow elements */
  .w-layout-blockcontainer,
  .w-container,
  .w-layout-grid {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}