/*
 * BDLCONSULT Horizon 2027 — layout guard
 *
 * Gutenberg adds is-layout-flow / is-layout-flex classes to Group blocks.
 * The approved BDLCONSULT composition uses named CSS grids instead.  This
 * file is loaded after the theme, builder and block-library styles on both
 * the public site and the editor canvas so a Group cannot silently fall back
 * to a vertical stack.
 */

/* Keep the same compact eyebrow and heading scale in Gutenberg's canvas as on
 * the public page.  WordPress paragraph presets otherwise enlarge these
 * labels on a staging clone. */
body .eyebrow,
.editor-styles-wrapper .eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-transform: uppercase !important;
  font-family: "DM Sans", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  color: var(--blue) !important;
  margin: 0 0 23px !important;
}

body .section-head .eyebrow,
.editor-styles-wrapper .section-head .eyebrow {
  color: var(--blue) !important;
  font-size: 12px !important;
  letter-spacing: .13em !important;
}

/* Keep the exceptions present in the approved static composition. */
body .case-hero .eyebrow,
.editor-styles-wrapper .case-hero .eyebrow {
  margin-bottom: 16px !important;
}

body .contact-form .eyebrow,
.editor-styles-wrapper .contact-form .eyebrow {
  margin-bottom: 0 !important;
}

body .cta .eyebrow,
.editor-styles-wrapper .cta .eyebrow {
  color: #bdd0fa !important;
}

body .detail-grid .eyebrow,
.editor-styles-wrapper .detail-grid .eyebrow {
  font-size: 11px !important;
}

@media (max-width: 680px) {
  body .eyebrow,
  .editor-styles-wrapper .eyebrow,
  body .section-head .eyebrow,
  .editor-styles-wrapper .section-head .eyebrow {
    font-size: 10px !important;
    letter-spacing: .12em !important;
    margin-bottom: 21px !important;
  }
  body .case-hero .eyebrow,
  .editor-styles-wrapper .case-hero .eyebrow {
    margin-bottom: 16px !important;
  }
  body .contact-form .eyebrow,
  .editor-styles-wrapper .contact-form .eyebrow {
    margin-bottom: 0 !important;
  }
}

body .section-head h2,
.editor-styles-wrapper .section-head h2 {
  font-family: Manrope, Arial, sans-serif !important;
  font-size: clamp(35px, 3.5vw, 50px) !important;
  line-height: 1.13 !important;
  font-weight: 700 !important;
  letter-spacing: -.045em !important;
  margin: 0 !important;
}

/* A staging global style must not turn the header into an overlay. */
body header,
body > header {
  position: relative !important;
  top: auto !important;
  z-index: 30 !important;
  margin: 0 !important;
}

/* The original validated HTML used semantic <section> elements.  Gutenberg
 * stores the same editable areas as Group divs, so the browser's original
 * `section { padding: 100px 0; }` rule no longer applied.  Marked top-level
 * sections restore that exact vertical rhythm across every page. */
/* WordPress may wrap post content in one or more `.entry-content`/Group
 * elements depending on the active template.  Target every packaged section,
 * not only a direct child of `main`, so the validated rhythm is identical on
 * the public page, in a staging clone and in the editor canvas. */
body main .bdl-section,
.editor-styles-wrapper .bdl-section {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

body main .bdl-section.case-gallery,
.editor-styles-wrapper .bdl-section.case-gallery {
  padding-top: 65px !important;
}

body main .bdl-section.case-related,
.editor-styles-wrapper .bdl-section.case-related {
  padding-top: 40px !important;
}

body main .bdl-section.extension-section,
.editor-styles-wrapper .bdl-section.extension-section {
  padding-top: 0 !important;
}

body main .bdl-section.map-section,
.editor-styles-wrapper .bdl-section.map-section {
  padding-top: 15px !important;
}

/* Keep the same horizontal frame even when a builder inserts an intermediate
 * wrapper around the section. */
body main .wrap,
.editor-styles-wrapper .wrap {
  width: min(1280px, calc(100% - 96px)) !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body main .bdl-section > .wrap,
.editor-styles-wrapper .bdl-section > .wrap {
  width: min(1280px, calc(100% - 96px)) !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Top-level Gutenberg Groups replace the original semantic sections. Remove
 * the editor's automatic block margins so the only vertical rhythm comes
 * from the validated section paddings above. */
body main > .wp-block-group,
.editor-styles-wrapper > .wp-block-group {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

body main > .wp-block-group > .wrap,
.editor-styles-wrapper > .wp-block-group > .wrap {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

.editor-styles-wrapper .bdl-section,
.editor-styles-wrapper .page-intro,
.editor-styles-wrapper .cta-section {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

body .hero-layout,
body .about-grid,
body .expertise-grid,
body .project-grid,
body .detail-grid,
body .case-hero-grid,
body .case-story,
body .channels,
body .gallery-grid,
body .value-grid,
body .audience-grid,
body .offer-grid,
body .steps,
body .contact-grid,
body .section-head.wp-block-columns,
body .cta-bottom.wp-block-columns,
.editor-styles-wrapper .hero-layout,
.editor-styles-wrapper .about-grid,
.editor-styles-wrapper .expertise-grid,
.editor-styles-wrapper .project-grid,
.editor-styles-wrapper .detail-grid,
.editor-styles-wrapper .case-hero-grid,
.editor-styles-wrapper .case-story,
.editor-styles-wrapper .channels,
.editor-styles-wrapper .gallery-grid,
.editor-styles-wrapper .value-grid,
.editor-styles-wrapper .audience-grid,
.editor-styles-wrapper .offer-grid,
.editor-styles-wrapper .steps,
.editor-styles-wrapper .contact-grid,
.editor-styles-wrapper .section-head.wp-block-columns,
.editor-styles-wrapper .cta-bottom.wp-block-columns {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  flex-direction: initial !important;
  flex-wrap: initial !important;
  align-content: initial !important;
  justify-content: initial !important;
  min-width: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

body .hero-layout,
.editor-styles-wrapper .hero-layout {
  grid-template-columns: minmax(0, 1.07fr) minmax(0, 1fr) !important;
  gap: 50px !important;
  align-items: center !important;
}

body .about-grid,
.editor-styles-wrapper .about-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 85px !important;
  align-items: center !important;
}

body .expertise-grid,
.editor-styles-wrapper .expertise-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 25px !important;
}

body .project-grid,
.editor-styles-wrapper .project-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 26px !important;
}

/* The approved latest reference uses three cards on desktop, including a
 * legacy four-projects list: four cards must wrap as 3 + 1, never 2 + 2. */
body .project-grid.four-projects,
.editor-styles-wrapper .project-grid.four-projects {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* WordPress can carry a stale layout class or an inline grid placement from
 * an earlier converted page. Keep each native Column in normal auto-flow so
 * a card cannot be stranded in column 2 with a large empty area on the left. */
body .hero-layout > *,
body .about-grid > *,
body .expertise-grid > *,
body .project-grid > *,
body .detail-grid > *,
body .case-hero-grid > *,
body .case-story > *,
body .channels > *,
body .gallery-grid > *,
body .value-grid > *,
body .audience-grid > *,
body .offer-grid > *,
body .steps > *,
body .contact-grid > *,
body .section-head.wp-block-columns > *,
body .cta-bottom.wp-block-columns > *,
.editor-styles-wrapper .hero-layout > *,
.editor-styles-wrapper .about-grid > *,
.editor-styles-wrapper .expertise-grid > *,
.editor-styles-wrapper .project-grid > *,
.editor-styles-wrapper .detail-grid > *,
.editor-styles-wrapper .case-hero-grid > *,
.editor-styles-wrapper .case-story > *,
.editor-styles-wrapper .channels > *,
.editor-styles-wrapper .gallery-grid > *,
.editor-styles-wrapper .value-grid > *,
.editor-styles-wrapper .audience-grid > *,
.editor-styles-wrapper .offer-grid > *,
.editor-styles-wrapper .steps > *,
.editor-styles-wrapper .contact-grid > *,
.editor-styles-wrapper .section-head.wp-block-columns > *,
.editor-styles-wrapper .cta-bottom.wp-block-columns > * {
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: stretch !important;
}

/* Keep related projects in a normal full-width flow. This protects the
 * section from a stale `is-layout-grid` class left by an older builder,
 * which created the blank left half visible in the staging capture. */
body main .related > .wrap,
.editor-styles-wrapper .related > .wrap {
  display: block !important;
  width: min(1280px, calc(100% - 96px)) !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body main .related .section-head,
body main .related .project-grid,
.editor-styles-wrapper .related .section-head,
.editor-styles-wrapper .related .project-grid {
  width: 100% !important;
  max-width: none !important;
  grid-column: 1 / -1 !important;
}

/* The generic grid reset above must not erase the intentional breathing room
 * between a section heading and its cards, or between the CTA title and its
 * text/button row. */
body .section-head.wp-block-columns,
.editor-styles-wrapper .section-head.wp-block-columns {
  margin-block-start: 0 !important;
  margin-block-end: 42px !important;
}

body .cta-bottom.wp-block-columns,
.editor-styles-wrapper .cta-bottom.wp-block-columns {
  margin-block-start: 30px !important;
  margin-block-end: 0 !important;
}

body .detail-grid,
.editor-styles-wrapper .detail-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
  gap: 65px !important;
  align-items: center !important;
}

body .case-hero-grid,
.editor-styles-wrapper .case-hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) !important;
  gap: 55px !important;
  align-items: center !important;
}

body .case-story,
.editor-styles-wrapper .case-story {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 80px !important;
  align-items: start !important;
}

body .channels,
.editor-styles-wrapper .channels {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

body .gallery-grid,
.editor-styles-wrapper .gallery-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 30px !important;
}

body .value-grid,
.editor-styles-wrapper .value-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 30px !important;
}

body .audience-grid,
.editor-styles-wrapper .audience-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

body .offer-grid,
.editor-styles-wrapper .offer-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

body .steps,
.editor-styles-wrapper .steps {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 26px !important;
}

body .contact-grid,
.editor-styles-wrapper .contact-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) !important;
  gap: 70px !important;
  align-items: start !important;
}

/* Headings and closing calls-to-action are also real Columns now.  The
 * original site used a flex row; an explicit grid keeps the same geometry in
 * the editor canvas and on the public page while making both sides selectable
 * independently in Gutenberg. */
body .section-head.wp-block-columns,
.editor-styles-wrapper .section-head.wp-block-columns {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 55px !important;
  align-items: end !important;
}

body .cta-bottom.wp-block-columns,
.editor-styles-wrapper .cta-bottom.wp-block-columns {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 35px !important;
  align-items: center !important;
}

body .case-users .section-head.wp-block-columns > .wp-block-column:last-child > p,
.editor-styles-wrapper .case-users .section-head.wp-block-columns > .wp-block-column:last-child > p {
  max-width: 460px !important;
}

/* Preserve the intentional alternating accents after each card is wrapped in
 * a native Column.  The old selectors targeted the card's former direct
 * position and would otherwise make every item look like item 1. */
body .expertise-grid > .wp-block-column:nth-child(2) .expertise-icon,
body .expertise-grid > .wp-block-column:nth-child(4) .expertise-icon,
.editor-styles-wrapper .expertise-grid > .wp-block-column:nth-child(2) .expertise-icon,
.editor-styles-wrapper .expertise-grid > .wp-block-column:nth-child(4) .expertise-icon {
  background: #fff2dd !important;
  color: #945700 !important;
}

body .steps > .wp-block-column:nth-child(2) .step,
.editor-styles-wrapper .steps > .wp-block-column:nth-child(2) .step {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: var(--blue) !important;
}

body .steps > .wp-block-column:nth-child(2) .step > span,
.editor-styles-wrapper .steps > .wp-block-column:nth-child(2) .step > span {
  color: #a8bfec !important;
}

body .steps > .wp-block-column:nth-child(2) .step p,
.editor-styles-wrapper .steps > .wp-block-column:nth-child(2) .step p {
  color: #e1e9f8 !important;
}

body .steps > .wp-block-column:nth-child(2) .step small,
.editor-styles-wrapper .steps > .wp-block-column:nth-child(2) .step small {
  border-color: #5b7cbd !important;
  color: #e1e9f8 !important;
}

body .offer-grid > .wp-block-column:nth-child(2n) .icon,
.editor-styles-wrapper .offer-grid > .wp-block-column:nth-child(2n) .icon {
  background: #fff0db !important;
  color: #945700 !important;
}

body .gallery-grid.gallery-three > .wp-block-column:last-child,
.editor-styles-wrapper .gallery-grid.gallery-three > .wp-block-column:last-child {
  grid-column: 1 / -1 !important;
  max-width: 850px !important;
  width: 100% !important;
  justify-self: center !important;
}

/* Native Columns (and the few legacy Groups that remain) are grid items here.
 * Reset Gutenberg's flex sizing and the default second-column margin so the
 * right-hand image/card cannot be pushed below or away from the first one. */
body .hero-layout > *,
body .about-grid > *,
body .expertise-grid > *,
body .project-grid > *,
body .detail-grid > *,
body .case-hero-grid > *,
body .case-story > *,
body .channels > *,
body .gallery-grid > *,
body .value-grid > *,
body .audience-grid > *,
body .offer-grid > *,
body .steps > *,
body .contact-grid > *,
body .section-head.wp-block-columns > *,
body .cta-bottom.wp-block-columns > *,
.editor-styles-wrapper .hero-layout > *,
.editor-styles-wrapper .about-grid > *,
.editor-styles-wrapper .expertise-grid > *,
.editor-styles-wrapper .project-grid > *,
.editor-styles-wrapper .detail-grid > *,
.editor-styles-wrapper .case-hero-grid > *,
.editor-styles-wrapper .case-story > *,
.editor-styles-wrapper .channels > *,
.editor-styles-wrapper .gallery-grid > *,
.editor-styles-wrapper .value-grid > *,
.editor-styles-wrapper .audience-grid > *,
.editor-styles-wrapper .offer-grid > *,
.editor-styles-wrapper .steps > *,
.editor-styles-wrapper .contact-grid > *,
.editor-styles-wrapper .section-head.wp-block-columns > *,
.editor-styles-wrapper .cta-bottom.wp-block-columns > * {
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: initial !important;
  margin: 0 !important;
  flex-basis: auto !important;
  flex-grow: 0 !important;
}

/* Match the public responsive breakpoints. */
@media (max-width: 960px) {
  body .project-grid,
  .editor-styles-wrapper .project-grid,
  body .project-grid.four-projects,
  .editor-styles-wrapper .project-grid.four-projects {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body main .wrap,
  .editor-styles-wrapper .wrap {
    width: calc(100% - 40px) !important;
  }

  body .hero-layout,
  body .about-grid,
  body .detail-grid,
  body .case-hero-grid,
  body .case-story,
  body .contact-grid,
  body .section-head.wp-block-columns,
  body .cta-bottom.wp-block-columns,
  .editor-styles-wrapper .hero-layout,
  .editor-styles-wrapper .about-grid,
  .editor-styles-wrapper .detail-grid,
  .editor-styles-wrapper .case-hero-grid,
  .editor-styles-wrapper .case-story,
  .editor-styles-wrapper .contact-grid,
  .editor-styles-wrapper .section-head.wp-block-columns,
  .editor-styles-wrapper .cta-bottom.wp-block-columns {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 35px !important;
  }

  body .expertise-grid,
  body .project-grid,
  body .channels,
  body .gallery-grid,
  body .value-grid,
  body .audience-grid,
  body .offer-grid,
  body .steps,
  .editor-styles-wrapper .expertise-grid,
  .editor-styles-wrapper .project-grid,
  .editor-styles-wrapper .channels,
  .editor-styles-wrapper .gallery-grid,
  .editor-styles-wrapper .value-grid,
  .editor-styles-wrapper .audience-grid,
  .editor-styles-wrapper .offer-grid,
  .editor-styles-wrapper .steps {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .project-grid.four-projects,
  .editor-styles-wrapper .project-grid.four-projects {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Match the validated desktop hero rhythm: the hero starts higher and the
 * lead has a deliberate breathing space after the two-line title. */
body main .hero-lead,
.editor-styles-wrapper .hero-lead {
  margin-top: 27px !important;
}
@media (min-width: 961px) {
  body .hero,
  .editor-styles-wrapper .hero {
    padding-top: 32px !important;
  }
  body .hero-lead,
  .editor-styles-wrapper .hero-lead {
    margin-top: 48px !important;
  }
}

/* WordPress core stacks `.wp-block-columns` at 781px.  The approved Contact
 * composition remains a two-column layout on a tablet-sized staging canvas;
 * otherwise the form drops below the blue contact card even though the page
 * still has enough room.  Retain a true single column only on narrow phones. */
@media (min-width: 521px) and (max-width: 781px) {
  body main .contact-grid.wp-block-columns,
  body main .wp-block-columns.contact-grid,
  .editor-styles-wrapper .contact-grid.wp-block-columns {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) !important;
    gap: 35px !important;
    flex-direction: initial !important;
    flex-wrap: initial !important;
  }
}

@media (max-width: 520px) {
  body main .contact-grid.wp-block-columns,
  body main .wp-block-columns.contact-grid,
  .editor-styles-wrapper .contact-grid.wp-block-columns {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 27px !important;
  }
}

/* Typography and control rhythm parity with the approved static pages.  The
 * Gutenberg block library can zero paragraph margins and enlarge native
 * button padding; keep the public canvas and the visual editor identical. */
body main .about-grid > .wp-block-column:last-child > h2,
.editor-styles-wrapper .about-grid > .wp-block-column:last-child > h2 {
  margin: 0 0 27px !important;
}
body main .about-grid > .wp-block-column:last-child > p.wp-block-paragraph:not(.about-pills):not(.eyebrow),
.editor-styles-wrapper .about-grid > .wp-block-column:last-child > p.wp-block-paragraph:not(.about-pills):not(.eyebrow) {
  margin: 0 0 20px !important;
  color: var(--muted) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}
body main .about-grid > .wp-block-column:last-child > p.about-pills,
.editor-styles-wrapper .about-grid > .wp-block-column:last-child > p.about-pills {
  display: flex !important;
  gap: 9px !important;
  flex-wrap: wrap !important;
  margin: 25px 0 28px !important;
  line-height: normal !important;
}
body main .about-grid > .wp-block-column:last-child > .wp-block-button,
.editor-styles-wrapper .about-grid > .wp-block-column:last-child > .wp-block-button {
  margin: 0 !important;
  line-height: 1 !important;
}
body main .wp-block-button.button > .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.button > .wp-block-button__link {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 23px !important;
  width: auto !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 9px 9px 9px 25px !important;
  border: 1px solid transparent !important;
  border-radius: 99px !important;
  background: var(--blue) !important;
  color: #fff !important;
  font-family: "DM Sans", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}
body main .wp-block-button.button.secondary > .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.button.secondary > .wp-block-button__link {
  background: #fff !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
body main .cta .wp-block-button.button > .wp-block-button__link,
.editor-styles-wrapper .cta .wp-block-button.button > .wp-block-button__link {
  background: var(--orange) !important;
  color: #122744 !important;
}
body main .wp-block-button.button > .wp-block-button__link::after,
.editor-styles-wrapper .wp-block-button.button > .wp-block-button__link::after {
  width: 39px !important;
  height: 39px !important;
  flex: 0 0 39px !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  line-height: 1 !important;
}
body main .cta .wp-block-button.button > .wp-block-button__link::after,
.editor-styles-wrapper .cta .wp-block-button.button > .wp-block-button__link::after {
  background: #ffffff55 !important;
  color: #122744 !important;
}
/* The custom class is carried by the native wrapper and its link. Keep the
 * wrapper neutral so only the visible link draws the button. */
body main .wp-block-button.button,
.editor-styles-wrapper .wp-block-button.button {
  display: block !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  line-height: 1 !important;
}
/* Keep the editable hero action row aligned with the approved composition. */
body main p.actions,
.editor-styles-wrapper p.actions {
  display: flex !important;
  align-items: center !important;
  gap: 23px !important;
  flex-wrap: wrap !important;
  margin: 29px 0 0 !important;
  line-height: normal !important;
}
body main p.actions > a.button,
.editor-styles-wrapper p.actions > a.button {
  flex: 0 0 auto !important;
  min-height: 56px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
/* Restore the intentional gap between the action row and the supporting note. */
body main p.hero-note,
.editor-styles-wrapper p.hero-note {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  margin: 35px 0 0 !important;
  line-height: 1.55 !important;
}
body main .expertise-content p.wp-block-paragraph,
.editor-styles-wrapper .expertise-content p.wp-block-paragraph {
  margin-bottom: 22px !important;
  line-height: 1.75 !important;
}
body main .project p.wp-block-paragraph,
.editor-styles-wrapper .project p.wp-block-paragraph {
  margin-bottom: 25px !important;
  line-height: 1.75 !important;
}
body main .offer p.wp-block-paragraph:not(.eyebrow):not(.icon),
body main .step p.wp-block-paragraph,
body main .offer li.wp-block-paragraph,
.editor-styles-wrapper .offer p.wp-block-paragraph:not(.eyebrow):not(.icon),
.editor-styles-wrapper .offer li.wp-block-paragraph,
.editor-styles-wrapper .step p.wp-block-paragraph {
  margin-bottom: 20px !important;
  line-height: 1.8 !important;
}
.editor-styles-wrapper .case-story p.wp-block-paragraph:not(.eyebrow),
body main .case-story p.wp-block-paragraph:not(.eyebrow) {
  margin-bottom: 20px !important;
  line-height: 1.9 !important;
}
body main .case-response p.wp-block-paragraph:not(.eyebrow),
body main .case-extension p.wp-block-paragraph,
body main .contact-info > p.wp-block-paragraph,
.editor-styles-wrapper .case-response p.wp-block-paragraph:not(.eyebrow),
.editor-styles-wrapper .case-extension p.wp-block-paragraph,
.editor-styles-wrapper .contact-info > p.wp-block-paragraph {
  margin-bottom: 20px !important;
}
body main .section-head p.wp-block-paragraph:not(.eyebrow),
body main .cta-bottom p.wp-block-paragraph,
body main .trust-strip p.wp-block-paragraph,
body main .form-note.wp-block-paragraph,
.editor-styles-wrapper .section-head p.wp-block-paragraph:not(.eyebrow),
.editor-styles-wrapper .cta-bottom p.wp-block-paragraph,
.editor-styles-wrapper .trust-strip p.wp-block-paragraph,
.editor-styles-wrapper .form-note.wp-block-paragraph {
  margin-bottom: 0 !important;
}

/* Feature summaries originally ended without an extra paragraph margin. */
body main .case-features .offer p.wp-block-paragraph:not(.eyebrow):not(.icon),
.editor-styles-wrapper .case-features .offer p.wp-block-paragraph:not(.eyebrow):not(.icon) {
  margin-bottom: 0 !important;
}

/* A native image introduces an inner anchor. It is not the card action link:
 * do not inherit its top border or 18px padding, and retain uncropped covers. */
body main .project .project-visual .wp-block-image a,
.editor-styles-wrapper .project .project-visual .wp-block-image a {
  display: block !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
body main .project-visual img:is([src*="fleet-cover"], [src*="stms-cover"], [src*="pscl-01"], [src*="pharma-pharmacy"]),
.editor-styles-wrapper .project-visual img:is([src*="fleet-cover"], [src*="stms-cover"], [src*="pscl-01"], [src*="pharma-pharmacy"]) {
  object-fit: contain !important;
  background: #f3f6fb !important;
}

/* Final approved rhythm for the native editor and the public page. Keep these
 * declarations last because WordPress core and the editor inject their own
 * Group/Columns spacing earlier in the cascade. */
body main .page-intro,
.editor-styles-wrapper .page-intro {
  padding-top: 34px !important;
  padding-bottom: 70px !important;
}
body main .bdl-section,
.editor-styles-wrapper .bdl-section {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}
body main .bdl-section.map-section,
.editor-styles-wrapper .bdl-section.map-section {
  padding-top: 15px !important;
}
body main .section-head.wp-block-columns,
.editor-styles-wrapper .section-head.wp-block-columns {
  margin-bottom: 42px !important;
}
.bdl-realisation-block,
.bdl-realisation-grid {
  width: 100% !important;
}
.bdl-realisation-toolbar {
  margin-bottom: 42px !important;
}
@media (max-width: 680px) {
  body .section-head h2,
  .editor-styles-wrapper .section-head h2 {
    font-size: 36px !important;
  }
  body .cta-bottom.wp-block-columns,
  .editor-styles-wrapper .cta-bottom.wp-block-columns {
    gap: 24px !important;
    margin-top: 25px !important;
  }
  body main .hero-lead,
  .editor-styles-wrapper .hero-lead {
    margin-top: 24px !important;
  }
  body main p.actions,
  .editor-styles-wrapper p.actions {
    gap: 20px !important;
  }
  body main p.hero-note,
  .editor-styles-wrapper p.hero-note {
    margin-top: 25px !important;
  }
  body main .page-intro,
  .editor-styles-wrapper .page-intro {
    padding-top: 25px !important;
    padding-bottom: 45px !important;
  }
  body main .bdl-section,
  .editor-styles-wrapper .bdl-section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  body main .bdl-section.case-gallery,
  .editor-styles-wrapper .bdl-section.case-gallery { padding-top: 45px !important; }
  body main .bdl-section.case-related,
  .editor-styles-wrapper .bdl-section.case-related { padding-top: 25px !important; }
  body main .section-head.wp-block-columns,
  .editor-styles-wrapper .section-head.wp-block-columns {
    margin-bottom: 30px !important;
  }
}

/* Native Columns add an extra box between each grid and its visible card.
 * Stretch both levels, not just the Column. Use the tallest content in each
 * row, never a fixed pixel height or grid-auto-rows: 1fr across all rows. */
body :is(.expertise-grid, .project-grid, .offer-grid, .steps, .channels, .audience-grid, .value-grid),
.editor-styles-wrapper :is(.expertise-grid, .project-grid, .offer-grid, .steps, .channels, .audience-grid, .value-grid) {
  align-items: stretch !important;
}
body :is(.expertise-grid, .project-grid, .offer-grid, .steps, .channels, .audience-grid) > .wp-block-column,
.editor-styles-wrapper :is(.expertise-grid, .project-grid, .offer-grid, .steps, .channels, .audience-grid) > .wp-block-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  align-self: stretch !important;
}
body :is(.expertise-grid, .project-grid, .offer-grid, .steps, .audience-grid) > .wp-block-column > :is(.expertise-card, .project, .offer, .step, .pscl-audience),
.editor-styles-wrapper :is(.expertise-grid, .project-grid, .offer-grid, .steps, .audience-grid) > .wp-block-column > :is(.expertise-card, .project, .offer, .step, .pscl-audience),
body .channels > .wp-block-column > .wp-block-group,
.editor-styles-wrapper .channels > .wp-block-column > .wp-block-group {
  flex: 1 1 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
body .project .project-body,
.editor-styles-wrapper .project .project-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
body .project .project-body > a,
.editor-styles-wrapper .project .project-body > a {
  margin-top: auto !important;
}

/* Channel articles became native Groups. Pass their original card surface
 * and icon treatment through the added Column instead of losing the box. */
body .channels > .wp-block-column > .wp-block-group,
.editor-styles-wrapper .channels > .wp-block-column > .wp-block-group {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 24px;
}
body .channels > .wp-block-column > .wp-block-group > span,
.editor-styles-wrapper .channels > .wp-block-column > .wp-block-group > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--blue-light);
  color: var(--blue);
  border-radius: 13px;
  margin-bottom: 20px;
}
body .offer p.icon,
.editor-styles-wrapper .offer p.icon {
  color: var(--blue) !important;
}
body .channels,
.editor-styles-wrapper .channels {
  margin-bottom: 50px !important;
}

/* Restore the reference frame at intermediate widths. More-specific section
 * wrappers must not keep the 96px desktop inset on a phone or tablet. */
@media (min-width: 681px) and (max-width: 1150px) {
  body main .wrap,
  body main .bdl-section > .wrap,
  body main .related > .wrap,
  .editor-styles-wrapper .wrap,
  .editor-styles-wrapper .bdl-section > .wrap,
  .editor-styles-wrapper .related > .wrap {
    width: calc(100% - 64px) !important;
  }
}
@media (max-width: 960px) {
  body .steps,
  .editor-styles-wrapper .steps {
    gap: 16px !important;
  }
  body .channels > .wp-block-column > .wp-block-group,
  .editor-styles-wrapper .channels > .wp-block-column > .wp-block-group {
    padding: 24px;
  }
}
@media (max-width: 680px) {
  body main .wrap,
  body main .bdl-section > .wrap,
  body main .related > .wrap,
  .editor-styles-wrapper .wrap,
  .editor-styles-wrapper .bdl-section > .wrap,
  .editor-styles-wrapper .related > .wrap {
    width: calc(100% - 40px) !important;
  }
  body .expertise-grid,
  .editor-styles-wrapper .expertise-grid { gap: 22px !important; }
  body .project-grid,
  .editor-styles-wrapper .project-grid { gap: 24px !important; }
  body .offer-grid,
  .editor-styles-wrapper .offer-grid { gap: 20px !important; }
  body .steps,
  .editor-styles-wrapper .steps { gap: 18px !important; }
  body .channels,
  .editor-styles-wrapper .channels { gap: 16px !important; margin-bottom: 30px !important; }
  body .value-grid,
  .editor-styles-wrapper .value-grid { gap: 25px !important; }
  body .channels > .wp-block-column > .wp-block-group,
  .editor-styles-wrapper .channels > .wp-block-column > .wp-block-group {
    padding: 26px;
  }
}