/* --------------------------------------
   GRID SYSTEM
-------------------------------------- */
.container{max-width:1400px!important;margin:0 auto;padding:0 1rem}
.row{display:flex;flex-wrap:wrap;margin:0 -.75rem}
[class^="col-"]{padding:0 .75rem;box-sizing:border-box}

/* 12-column layout (desktop defaults) */
.col-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
.col-2  { flex: 0 0 16.666%; max-width: 16.666%; }
.col-3  { flex: 0 0 25%;     max-width: 25%; }
.col-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.col-5  { flex: 0 0 41.666%; max-width: 41.666%; }
.col-6  { flex: 0 0 50%;     max-width: 50%; }
.col-7  { flex: 0 0 58.333%; max-width: 58.333%; }
.col-8  { flex: 0 0 66.666%; max-width: 66.666%; }
.col-9  { flex: 0 0 75%;     max-width: 75%; }
.col-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.col-12 { flex: 0 0 100%;    max-width: 100%; }

/* Vertical divider between two columns */
.row.with-divider{position:relative}
.row.with-divider::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:linear-gradient(to bottom,transparent,#ccc,transparent);transform:translateX(-50%)}
.row.with-divider > .col-6{padding-left:2rem;padding-right:2rem}
@media (max-width: 768px) {
.row.with-divider::before{display:none}
.row.with-divider > .col-6{padding-left:.75rem;padding-right:.75rem}
}
.row.with-divider-9-3::before {left: 75%;} /* divider at the start of the col-3 */

/* --------------------------------------
   Responsive tweaks
-------------------------------------- */
.site-main{padding-bottom:3rem}
@media (max-width: 768px) {.site-main{padding-bottom:2rem}}
@media (max-width: 1024px) {
.col-1,.col-2,.col-3,.col-5,.col-7,.col-8,.col-9,.col-10,.col-11{flex:0 0 100%;max-width:100%}
.col-4{flex:0 0 50%;max-width:50%}
.col-6{flex:0 0 50%;max-width:50%}
}
@media (max-width: 600px) {[class^="col-"]{flex:0 0 100%;max-width:100%}}

/* Reduce vertical spacing between stacked col-6 on mobile */
@media (max-width: 767px) {
.row.with-divider > [class*="col-"] {margin-bottom: 12px;} /* tighten bottom space between them */
.row.with-divider > [class*="col-"]:last-child {margin-bottom: 0;}  /* optional: remove margin from last col */
.row.with-divider h2.td-block-title {margin-top: 0.5em;margin-bottom: 0.5em;} /* also tighten H2 if needed */
}

@media (max-width: 767px) {
  .row > [class^="col-"] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Wider desktop gutters for visual separation */


