/* OBRAC_WIDTH_PARITY_HOME_V2 — About / What We Do use Home horizontal rhythm.
 * Normalize both the outer shells and Elementor's nested structural gutters.
 * Keep Work-built typography, cards, media, spacing and motion intact.
 */

/* Regular content: Home uses a 32px outer gutter and a full-width shell capped at 1280px. */
body.page-id-11 .obrac-section:not(.obrac-hero),
body.page-id-13 .obrac-section:not(.obrac-hero) {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

body.page-id-11 .obrac-section:not(.obrac-hero) > .obrac-shell,
body.page-id-13 .obrac-section:not(.obrac-hero) > .obrac-shell {
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Home removes Elementor's default 10px horizontal padding from structural
 * containers. Do the same here so the visible content starts at the same x,
 * not merely the outer shell. */
body.page-id-11 .obrac-section > .obrac-shell > :is(.obrac-stack,.obrac-grid-2,.obrac-grid-3,.obrac-grid-4,.obrac-split,.obrac-hero-grid),
body.page-id-13 .obrac-section > .obrac-shell > :is(.obrac-stack,.obrac-grid-2,.obrac-grid-3,.obrac-grid-4,.obrac-split,.obrac-hero-grid) {
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Inner-page heroes had two additional Elementor gutters: one on hero-grid
 * and another on hero-copy/actions. Those made 390px mobile content begin at
 * x=44/54 while Home begins at x=24. */
body.page-id-11 .obrac-hero .obrac-hero-copy,
body.page-id-13 .obrac-hero .obrac-hero-copy,
body.page-id-11 .obrac-hero .obrac-actions,
body.page-id-13 .obrac-hero .obrac-actions {
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Desktop Home hero is intentionally near edge-to-edge inside Elementor's 10px parent gutter. */
@media (min-width: 1025px) {
  body.page-id-11 .obrac-hero > .obrac-shell,
  body.page-id-13 .obrac-hero > .obrac-shell {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Tablet follows Home: one 32px gutter owned by the section, not a second inset on the shell. */
@media (max-width: 1024px) {
  body.page-id-11 .obrac-hero,
  body.page-id-13 .obrac-hero {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  body.page-id-11 .obrac-hero > .obrac-shell,
  body.page-id-13 .obrac-hero > .obrac-shell {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Mobile follows Home's 24px page gutter. */
@media (max-width: 767px) {
  body.page-id-11 .obrac-section:not(.obrac-hero),
  body.page-id-13 .obrac-section:not(.obrac-hero),
  body.page-id-11 .obrac-hero,
  body.page-id-13 .obrac-hero {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  body.page-id-11 .obrac-section:not(.obrac-hero) > .obrac-shell,
  body.page-id-13 .obrac-section:not(.obrac-hero) > .obrac-shell {
    width: 100% !important;
  }
}