/* =================================================================
   IMAGE & MEDIA RESPONSIVE FIXES
   ================================================================= */

/* Ensure all images are responsive */
.dnd-module img,
.charik-constrained img,
.hs-module img {
  max-width: 100% !important;
  height: auto !important;
}

/* Fix any iframe or video elements */
.dnd-module iframe,
.dnd-module video,
.charik-constrained iframe,
.charik-constrained video,
.hs-module iframe,
.hs-module video {
  max-width: 100% !important;
  height: auto !important;
}

/* =================================================================
   OVERRIDE ANY CONFLICTING STYLES
   ================================================================= */

/* Override Tailwind or other CSS frameworks that might interfere */
.row-fluid [class*="span"],
.dnd-row .dnd-column {
  width: auto !important;
  flex-shrink: 0 !important;
}

/* Ensure proper spacing between modules */
.dnd-module + .dnd-module {
  margin-top: 0 !important;
}

/* Fix for nested content */
.dnd-module > * {
  width: 100% !important;
  max-width: 100% !important;
}

/* =================================================================
   ADDITIONAL HUBSPOT COMPATIBILITY FIXES
   ================================================================= */

/* Fix any HubSpot form styling conflicts */
.hs-form .hs-form-field {
  margin-bottom: 1rem;
}

.hs-form .hs-input {
  width: 100%;
  box-sizing: border-box;
}

/* Fix HubSpot CTA button conflicts */
.hs-cta-wrapper {
  display: inline-block;
}

/* Ensure HubSpot rich text content doesn't break */
.hs-richtext {
  max-width: 100%;
  word-wrap: break-word;
}

/* Fix any HubSpot table responsiveness */
.hs-richtext table {
  width: 100%;
  overflow-x: auto;
  display: block;
  white-space: nowrap;
}

@media(max-width: 767px) {
  .hs-richtext table {
    font-size: 14px;
  }
}

/* =================================================================
   NUCLEAR OPTION - OVERRIDE EVERYTHING ON MOBILE
   ================================================================= */

@media (max-width: 767px) {
  /* Override HubSpot's potential inline styles */
  .dnd-section,
  .dnd-row,
  .row-fluid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  
  /* Target every possible HubSpot column class */
  .dnd-section > *,
  .dnd-row > *,
  .row-fluid > *,
  [class*="col-"],
  [class*="span"],
  [class*="dnd-column"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    flex: none !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    float: none !important;
    display: block !important;
    margin: 0 0 30px 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    clear: both !important;
    position: relative !important;
  }
  
  /* Last child cleanup */
  .dnd-section > *:last-child,
  .dnd-row > *:last-child,
  .row-fluid > *:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Override any CSS grid if HubSpot uses it */
  .dnd-section,
  .dnd-row {
    display: flex !important;
    grid-template-columns: none !important;
    grid-auto-columns: none !important;
  }
  
  /* Force display block on everything that might be flex/grid */
  .dnd-section .dnd-column,
  .dnd-row .dnd-column,
  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    float: none !important;
    clear: both !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
  }
}

/* =================================================================
   DEBUGGING HELPERS (Remove in production)
   ================================================================= */

/* Uncomment these to debug layout issues */
/*
.row-fluid {
  border: 2px solid red !important;
  background: rgba(255, 0, 0, 0.1) !important;
}

.row-fluid [class*="span"] {
  border: 1px solid blue !important;
  background: rgba(0, 0, 255, 0.1) !important;
  min-height: 100px !important;
}

.dnd-row {
  border: 2px solid green !important;
  background: rgba(0, 255, 0, 0.1) !important;
}

.dnd-column {
  border: 1px solid orange !important;
  background: rgba(255, 165, 0, 0.1) !important;
  min-height: 100px !important;
}

.charik-constrained {
  border: 2px solid purple !important;
  background: rgba(128, 0, 128, 0.1) !important;
}
*/

/* =================================================================
   CHARIK WEBSITE - OPTIMIZED STYLES WITH HUBSPOT LAYOUT FIX
   Header & Footer Components
   ================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* =================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ================================================================= */

:root {
  --primary-color: #2b74ff;
  --text-primary: #111;
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;
  --border-hover: #d1d5db;
  --bg-secondary: #f9fafb;
  --bg-secondary-hover: #f3f4f6;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.08);
  --transition: all 0.2s ease;
  --font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --max-width: 1260px;
  --padding-mobile: 16px;
  --padding-desktop: 40px;
}

/* =================================================================
   SCOPED FONT APPLICATION - SAFER FOR HUBSPOT
   ================================================================= */

/* More specific font application - excludes HubSpot's system classes */
body:not(.hs-landing-page),
html:not(.hs-landing-page),
.hs-page-wrapper *:not([class*="hs-"]):not([class*="dnd-"]):not(.row-fluid):not([class*="span"]):not([class*="tw-"]),
.dnd-section *:not([class*="hs-"]):not(.row-fluid):not([class*="span"]):not([class*="tw-"]) {
  font-family: var(--font-family) !important;
}

/* Base HTML elements with safer selectors */
body {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0;
  padding: 0;
}

/* =================================================================
   TYPOGRAPHY - SCOPED TO AVOID HUBSPOT CONFLICTS
   ================================================================= */

/* Headings - exclude HubSpot grid and rich text areas */
h1:not(.row-fluid h1):not(.span12 h1):not(.hs-richtext h1),
h2:not(.row-fluid h2):not(.span12 h2):not(.hs-richtext h2),
h3:not(.row-fluid h3):not(.span12 h3):not(.hs-richtext h3),
h4:not(.row-fluid h4):not(.span12 h4):not(.hs-richtext h4),
h5:not(.row-fluid h5):not(.span12 h5):not(.hs-richtext h5),
h6:not(.row-fluid h6):not(.span12 h6):not(.hs-richtext h6) {
  font-family: var(--font-family) !important;
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-top: 0;
}

/* Paragraphs - exclude HubSpot areas */
p:not(.row-fluid p):not(.span12 p):not(.hs-richtext p) {
  font-family: var(--font-family) !important;
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Links - exclude HubSpot areas and header links */
a:not(.row-fluid a):not(.span12 a):not(.hs-richtext a):not(.hs-button):not(.ch-header a) {
  font-family: var(--font-family) !important;
  color: var(--primary-color);
  text-decoration: none;
}

/* Form elements - exclude HubSpot forms */
button:not(.hs-button):not([class*="hs-"]),
input:not(.hs-input):not([class*="hs-"]),
textarea:not(.hs-input):not([class*="hs-"]),
select:not(.hs-input):not([class*="hs-"]) {
  font-family: var(--font-family) !important;
}

/* =================================================================
   LAYOUT CONTAINERS - SAFE WITH INCREASED SPECIFICITY
   ================================================================= */

/* Increase specificity for your containers to override HubSpot defaults */
.site-content .page-container,
body .page-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding-mobile);
}

@media(min-width: 768px) {
  .site-content .page-container,
  body .page-container { 
    padding: 0 var(--padding-desktop); 
  }
}

/* Alternative containers with increased specificity */
.site-content .container,
.site-content .main-container,
body .container:not(.hs-richtext .container),
body .main-container:not(.hs-richtext .main-container) {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding-mobile);
}

@media(min-width: 768px) {
  .site-content .container,
  .site-content .main-container,
  body .container:not(.hs-richtext .container),
  body .main-container:not(.hs-richtext .main-container) { 
    padding: 0 var(--padding-desktop); 
  }
}

/* Section spacing with increased specificity */
.site-content .section,
body .section:not(.dnd-section) {
  padding: 60px 0;
}

@media(min-width: 768px) {
  .site-content .section,
  body .section:not(.dnd-section) { 
    padding: 80px 0; 
  }
}

.site-content .section-sm,
body .section-sm {
  padding: 40px 0;
}

@media(min-width: 768px) {
  .site-content .section-sm,
  body .section-sm { 
    padding: 60px 0; 
  }
}

/* =================================================================
   DRAG & DROP AREA STYLES - HUBSPOT COMPATIBLE
   ================================================================= */

/* Main content area */
.site-content {
  min-height: 50vh;
}

/* =================================================================
   HUBSPOT LAYOUT FIX - MOBILE-FIRST APPROACH
   ================================================================= */

/* Container class for modules that need width constraints - MOBILE FIRST */
.charik-constrained {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--padding-mobile);
}

@media(min-width: 768px) {
  .charik-constrained {
    max-width: var(--max-width);
    padding: 0 var(--padding-desktop);
  }
}

/* Ensure DND modules don't have unnecessary constraints */
.site-content .dnd-module {
  max-width: 100%;
  box-sizing: border-box;
}

/* Typography within constrained content */
.charik-constrained h1,
.charik-constrained h2,
.charik-constrained h3,
.charik-constrained h4,
.charik-constrained h5,
.charik-constrained h6 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.charik-constrained p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

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

/* =================================================================
   HEADER STYLES
   ================================================================= */

.ch-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  font-family: var(--font-family);
}

.ch-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--padding-mobile);
}

.ch-inner {
  min-height: 69px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}

@media(min-width: 992px) {
  .ch-container { 
    padding: 0 var(--padding-desktop); 
  }
}

/* Logo */
.ch-logo :is(img, svg) {
  height: 36px;
  max-height: 36px;
  width: auto;
  display: block;
}

.ch-logo a {
  display: flex;
  align-items: center;
}

/* Navigation */
.ch-nav {
  display: none;
  justify-self: center;
}

.ch-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ch-nav > ul {
  display: flex;
  gap: 32px;
  align-items: center;
}

.ch-nav a {
  display: inline-block;
  padding: 8px 0;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.2;
  transition: var(--transition);
}

.ch-nav a:hover {
  color: var(--primary-color);
  background: rgba(0, 0, 0, 0.04);
}

.ch-nav li {
  position: relative;
}

.ch-nav li.has-sub > a::after {
  content: "▾";
  margin-left: 6px;
  font-size: 11px;
}

.ch-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px;
  box-shadow: var(--shadow-lg);
  margin-top: 4px;
}

.ch-nav li.has-sub::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
  z-index: 1;
}

.ch-dropdown a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
}

.ch-dropdown a:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--primary-color);
}

@media(min-width: 992px) {
  .ch-nav { 
    display: block; 
  }
}

/* Right cluster */
.ch-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Actions */
.ch-actions {
  display: none;
}

@media(min-width: 992px) {
  .ch-actions {
    display: inline-flex;
    gap: 12px;
    align-items: center;
  }
}

.ch-actions .link,
.ch-actions .primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  line-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}

.ch-actions .link {
  color: var(--text-primary);
  font-weight: 500;
}

.ch-actions .link:hover {
  color: var(--primary-color);
}

.ch-actions .primary {
  background: var(--primary-color);
  color: #fff;
  border: 0;
}

.ch-actions .primary:hover {
  filter: brightness(0.95);
}

/* Language switcher */
.ch-lang {
  display: none;
  position: relative;
}

@media(min-width: 992px) {
  .ch-lang { 
    display: block; 
  }
}

.ch-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}

.ch-lang-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--border-hover);
}

.ch-lang-arrow {
  transition: transform 0.2s;
}

.ch-lang.open .ch-lang-arrow {
  transform: rotate(180deg);
}

.ch-lang-dropdown {
  position: absolute;
  top: 44px;
  right: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px;
  box-shadow: var(--shadow-lg);
  min-width: 120px;
  z-index: 1000;
}

.ch-lang-dropdown[hidden] {
  display: none;
}

.ch-lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color 0.2s;
}

.ch-lang-option:hover {
  background: var(--bg-secondary);
}

.ch-lang-option.active {
  background: rgba(17, 17, 17, 0.04);
  pointer-events: none;
}

.ch-lang-flag img {
  width: 20px;
  height: auto;
}

/* Mobile hamburger */
.ch-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: var(--transition);
}

.ch-toggle:hover {
  background: var(--bg-secondary);
}

@media(min-width: 992px) {
  .ch-toggle { 
    display: none; 
  }
}

.ch-toggle svg {
  width: 20px;
  height: 20px;
}

/* Mobile drawer */
.ch-drawer {
  position: fixed;
  inset: 69px 0 0 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.02);
}

.ch-drawer[hidden] {
  display: none;
}

.ch-panel {
  margin-left: auto;
  width: 100%;
  max-width: 384px;
  height: calc(100vh - 69px);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.ch-panel-inner {
  height: 100%;
  overflow: auto;
  padding: 24px;
}

.ch-mnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ch-mnav a {
  display: block;
  font-size: 14px;
  color: var(--text-primary);
  text-decoration: none;
}

.ch-mnav .sub {
  margin-left: 12px;
  border-left: 2px solid var(--border-color);
  padding-left: 10px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ch-mactions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}

.ch-mactions a {
  display: block;
  text-decoration: none;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-align: center;
  color: var(--text-primary);
  transition: var(--transition);
}

.ch-mactions a:hover {
  background: var(--bg-secondary);
}

.ch-mactions a.primary {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

.ch-mactions a.primary:hover {
  filter: brightness(0.95);
}

.ch-mlang {
  margin-top: 16px;
}

.ch-mlang a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: var(--transition);
}

.ch-mlang a:hover {
  background: var(--bg-secondary);
}

/* =================================================================
   FOOTER STYLES
   ================================================================= */

.cf-footer {
  border-top: 1px solid var(--border-color);
  background: #fff;
  font-family: var(--font-family);
}

.cf-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px var(--padding-mobile);
}

@media(min-width: 768px) {
  .cf-container { 
    padding: 40px var(--padding-desktop); 
  }
}

/* Main wrapper - responsive grid */
.cf-wrap {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media(min-width: 768px) {
  .cf-wrap {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media(min-width: 1024px) {
  .cf-wrap {
    grid-template-columns: 1.8fr 0.8fr 0.8fr 0.8fr;
    gap: 32px;
  }
}

/* Left column */
.cf-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

@media(min-width: 768px) {
  .cf-left { 
    align-items: flex-start; 
  }
}

.cf-logo {
  margin-bottom: 4px;
}

.cf-logo :is(img, svg) {
  height: 36px;
  max-height: 36px;
  width: auto;
  display: block;
}

.cf-copy {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 400;
}

/* Actions section */
.cf-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
}

@media(min-width: 768px) {
  .cf-actions {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
  }
}

.cf-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
  white-space: nowrap;
}

.cf-contact:hover {
  background: var(--bg-secondary-hover);
  border-color: var(--border-hover);
}

/* Social media icons */
.cf-social {
  display: flex;
  gap: 9px;
  align-items: center;
}

.cf-soc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  text-decoration: none;
  color: var(--text-secondary);
  transition: var(--transition);
}

.cf-soc:hover {
  background: var(--bg-secondary-hover);
  border-color: var(--border-hover);
  color: #374151;
}

.cf-soc svg {
  width: 18px;
  height: 18px;
}

/* Right columns */
.cf-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  text-align: center;
}

@media(min-width: 768px) {
  .cf-columns {
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
    grid-column: span 2;
  }
}

@media(min-width: 1024px) {
  .cf-columns {
    grid-column: auto;
    display: contents;
  }
}

.cf-col h4 {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-color);
  font-weight: 600;
}

.cf-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cf-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  transition: color 0.2s;
}

.cf-links a:hover {
  color: var(--primary-color);
}

/* Mobile spacing improvements */
@media(max-width: 767px) {
  .cf-wrap {
    gap: 40px;
  }
  
  .cf-columns {
    gap: 32px;
  }
}

/* =================================================================
   HUBSPOT DRAG & DROP LAYOUT SYSTEM - CRITICAL FIX
   Add this to the END of your styles.css file
   ================================================================= */

/* Reset any box-sizing that might interfere */
*,
*:before,
*:after {
  box-sizing: border-box;
}

/* =================================================================
   HUBSPOT GRID SYSTEM - FORCE PROPER LAYOUT
   ================================================================= */

/* Main row container */
.row-fluid {
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Column base styles */
.row-fluid [class*="span"] {
  display: block !important;
  float: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 15px !important;
  box-sizing: border-box !important;
  min-height: 1px !important;
}

/* Specific column widths */
.row-fluid .span12 { flex: 0 0 100% !important; max-width: 100% !important; }
.row-fluid .span11 { flex: 0 0 91.66666667% !important; max-width: 91.66666667% !important; }
.row-fluid .span10 { flex: 0 0 83.33333333% !important; max-width: 83.33333333% !important; }
.row-fluid .span9 { flex: 0 0 75% !important; max-width: 75% !important; }
.row-fluid .span8 { flex: 0 0 66.66666667% !important; max-width: 66.66666667% !important; }
.row-fluid .span7 { flex: 0 0 58.33333333% !important; max-width: 58.33333333% !important; }
.row-fluid .span6 { flex: 0 0 50% !important; max-width: 50% !important; }
.row-fluid .span5 { flex: 0 0 41.66666667% !important; max-width: 41.66666667% !important; }
.row-fluid .span4 { flex: 0 0 33.33333333% !important; max-width: 33.33333333% !important; }
.row-fluid .span3 { flex: 0 0 25% !important; max-width: 25% !important; }
.row-fluid .span2 { flex: 0 0 16.66666667% !important; max-width: 16.66666667% !important; }
.row-fluid .span1 { flex: 0 0 8.33333333% !important; max-width: 8.33333333% !important; }

/* =================================================================
   MOBILE RESPONSIVE - AGGRESSIVE STACKING (IMPROVED)
   ================================================================= */

@media (max-width: 767px) {
  /* Force flexbox direction change */
  .row-fluid {
    flex-direction: column !important;
    display: flex !important;
  }
  
  /* Ultra-specific span targeting with highest priority */
  .row-fluid [class*="span"],
  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    margin-bottom: 30px !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    clear: both !important;
  }
  
  .row-fluid [class*="span"]:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Super aggressive DND column stacking */
  .dnd-section .dnd-column,
  .dnd-row .dnd-column,
  [class*="dnd-column"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    clear: both !important;
    display: block !important;
    margin-bottom: 30px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .dnd-section .dnd-column:last-child,
  .dnd-row .dnd-column:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Override any inline styles that might be applied */
  .dnd-section .dnd-column[style*="width"],
  .row-fluid [class*="span"][style*="width"] {
    width: 100% !important;
  }
  
  /* Force any remaining grid elements */
  .span1, .span2, .span3, .span4, .span5, .span6,
  .span7, .span8, .span9, .span10, .span11, .span12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    display: block !important;
    margin-left: 0 !important;
    clear: both !important;
  }
  
  /* Add spacing between modules in stacked columns */
  .dnd-column .dnd-module + .dnd-module {
    margin-top: 20px !important;
  }
  
  /* Reset HubSpot Bootstrap classes */
  .container-fluid,
  .row-fluid {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Override any remaining flexbox properties */
  .row-fluid > * {
    flex-basis: 100% !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }
}

/* =================================================================
   TABLET RESPONSIVE - ADJUST FOR MEDIUM SCREENS
   ================================================================= */

@media (min-width: 768px) and (max-width: 991px) {
  /* Stack 4-column layouts to 2-column on tablet */
  .row-fluid .span3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  
  /* Ensure 3-column layouts work well */
  .row-fluid .span4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  
  /* Adjust constrained content for tablet */
  .charik-constrained {
    padding: 0 30px;
  }
}

/* =================================================================
   DND SPECIFIC FIXES
   ================================================================= */

/* Fix for newer HubSpot DND areas */
.dnd-row {
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dnd-column {
  display: block !important;
  float: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 15px !important;
  box-sizing: border-box !important;
  min-height: 1px !important;
}

/* DND Column widths */
.dnd-column.span12 { flex: 0 0 100% !important; max-width: 100% !important; }
.dnd-column.span6 { flex: 0 0 50% !important; max-width: 50% !important; }
.dnd-column.span4 { flex: 0 0 33.33333333% !important; max-width: 33.33333333% !important; }
.dnd-column.span3 { flex: 0 0 25% !important; max-width: 25% !important; }
.dnd-column.span8 { flex: 0 0 66.66666667% !important; max-width: 66.66666667% !important; }
.dnd-column.span9 { flex: 0 0 75% !important; max-width: 75% !important; }

/* =================================================================
   MODULE CONTAINER FIXES
   ================================================================= */

/* Ensure modules don't break the grid */
.dnd-module {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Fix for HubSpot's module wrapper */
.hs-module {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* =================================================================