* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* ── CSS Grid layout ── */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  max-width: 960px;
  margin: 0 auto;
}

/* Nested rows reset to fill their parent */
.row .row {
  max-width: none;
  margin: 0 -10px;
}

.column, .columns {
  min-height: 1px;
  padding: 0 10px;
  position: relative;
}

.row .one     { grid-column: span 1; }
.row .two     { grid-column: span 2; }
.row .three   { grid-column: span 3; }
.row .four    { grid-column: span 4; }
.row .five    { grid-column: span 5; }
.row .six     { grid-column: span 6; }
.row .seven   { grid-column: span 7; }
.row .eight   { grid-column: span 8; }
.row .nine    { grid-column: span 9; }
.row .ten     { grid-column: span 10; }
.row .eleven  { grid-column: span 11; }
.row .twelve,
.row .tweleve { grid-column: span 12; }

/* Clearfix kept for legacy non-grid `.clearfix` containers only.
   NOTE: do NOT add :before/:after to `.row` — they become grid items
   and break the column layout. */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.first { padding-left: 0; }
.last  { padding-right: 0; }

/* ── Mobile / small tablet: stack all columns (≤959px so the legacy
   1000px-wide layout never tries to fit into a sub-1000 viewport) ── */
@media only screen and (max-width: 959px) {
  body {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  .row {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .row .row {
    margin: 0;
  }

  .column, .columns {
    display: block;
    width: 100% !important;
  }
}