/* ==========================================================================
   sq-overrides.css — ALL hand-authored changes to the Saturnique static site.
   ==========================================================================
   RULES (see EDITING.md):
   - This is the ONLY place we write CSS. Divi's generated CSS (inline
     <style> blocks and /wp-content/et-cache/*) is compiled output — never
     edit it directly.
   - Loaded last in <head> on every page, so it wins ties; use !important
     only when needed to beat a Divi !important.
   - Scope every rule to one page via its body class (e.g. body.page-id-843)
     unless the change is genuinely site-wide. Divi's .et_pb_*_N classes are
     per-page positional names — the same class means different elements on
     different pages.
   - One commented block per change: what it does + why + date.
   ========================================================================== */

/* --------------------------------------------------------------------------
   about#1 hero (page-id-843: .et_pb_section_0, phone dup .et_pb_section_1)
   2026-07-05 — heading left / image+mission+paragraph right on desktop &
   tablet; on phone stack heading → image (untransformed) → Our Mission →
   paragraph with no overlaps. Un-does Divi 5 donor-injected styles (see
   memory: divi5-frontend-render-regression); the Divi inline <style> blocks
   these fight are appended after this sheet, so selectors carry the body
   class for specificity.
   -------------------------------------------------------------------------- */

/* Desktop + tablet: donor `flex-flow: row-reverse` put the image cluster on
   the left. Restore heading-left / image-right. */
body.page-id-843 .et_pb_row_0 { flex-flow: row; }

/* Donor margin (-13vw desktop / -5vw tablet, !important) dragged the image
   out of its column toward the page's left edge. Keep it in its column. */
body.page-id-843 .et_pb_image_0 { margin-left: 0 !important; }

/* Phantom compiler-injected 200px margin pushed the heading well above the
   row's vertical center. */
body.page-id-843 .et_pb_heading_0 { margin-bottom: 0 !important; }

/* Phone (≤767px): .et_pb_section_0 is display:none; the visible hero is the
   phone duplicate .et_pb_section_1. DOM order there is image → paragraph →
   mission, with the mission chip absolutely positioned over the image and
   the paragraph pushed down 19% to clear it — reorder and unstick instead. */
@media only screen and (max-width: 767px) {
  /* fixed 85vh row height would clip the taller un-overlapped stack; row-gap
     is the heading-column → image-column spacing (Ali: 30px everywhere) */
  body.page-id-843 .et_pb_row_1 { height: auto; row-gap: 30px; }

  /* heading column carried 50px bottom padding — spacing comes from the
     row-gap instead */
  body.page-id-843 .et_pb_column_2 {
    padding-bottom: 0;
    align-items: flex-start;
  }

  /* image column: uniform 30px gap between items, all left-aligned */
  body.page-id-843 .et_pb_column_3 {
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 30px;
  }

  /* order 1 = heading (own column, already first); 2 = image, no skew/shift */
  body.page-id-843 .et_pb_image_1 {
    order: 1;
    transform: none !important;
    margin: 0 !important;
  }

  /* 3 = "Our Mission", flowing after the image instead of absolute over it */
  body.page-id-843 .et_pb_text_3 {
    order: 2;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* 4 = paragraph; spacing handled by the column gap. Donor also painted
     this text white-on-white — restore the body text color used at desktop. */
  body.page-id-843 .et_pb_text_2 {
    order: 3;
    margin: 0 !important;
  }
  body.page-id-843 .et_pb_text_2 .et_pb_text_inner { color: #333 !important; }
}

/* --------------------------------------------------------------------------
   about#3 "Why We Exist" (page-id-843: .et_pb_section_2)
   2026-07-05 — drop the section background image (New-Project-7-1.png) and
   the #f6ffff tint; plain white section. Divi sets the tint via
   `.et-l--post > .et_builder_inner_content .et_pb_section.et_pb_section_2`
   (!important, appended after this sheet), so the selector must out-rank it.
   -------------------------------------------------------------------------- */
body.page-id-843 .et-l--post > .et_builder_inner_content .et_pb_section.et_pb_section_2 {
  background-image: none !important;
  background-color: #fff !important;
}

/* --------------------------------------------------------------------------
   about#4 "Our Core Values" (page-id-843: .et_pb_section_3)
   2026-07-05 — the heading card (.et_pb_column_5), the image card
   (.et_pb_column_7, renders left — row is row-reverse) and the values card
   (.et_pb_column_6) each carried a New-Project-9.png background image plus a
   background color, 14px rounded corners and a drop shadow; all of that goes
   (Ali: no card look, section wave backdrop stays). Also vertically center
   the image against the taller values card: the row aligns columns to
   flex-start, so stretch the image column to row height and center its
   content. The photo itself was capped at 60% column width — let it fill the
   column (its own rounded corners/shadow are kept; separate look).
   -------------------------------------------------------------------------- */
body.page-id-843 .et_pb_column_5,
body.page-id-843 .et_pb_column_6,
body.page-id-843 .et_pb_column_7 {
  background-image: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.page-id-843 .et_pb_column_7 {
  align-self: stretch;
  justify-content: center !important;
}

body.page-id-843 .et_pb_image_2 {
  width: 100% !important;
}

/* Core Values top/bottom padding trimmed on desktop (2026-07-11, Ali).
   Section padding was already identical to "Why We Exist" (100px desktop /
   50px tablet+phone, symmetric), but the separate title row + 60px gap push
   the image/value cards lower, so the section read as too airy top-and-bottom.
   Ali: trim the desktop padding 100px → 80px to tighten it (tablet/phone keep
   their existing 50px). Specificity beats the compiled 100px; !important kept
   for safety against Divi's stacked section rules. */
@media only screen and (min-width: 981px) {
  body.page-id-843 .et_pb_section_3.et_pb_section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}

/* Core Values heading→content gap tightened + content centered (2026-07-11, Ali,
   round 2). The visible gap between the heading and the image/value cards is NOT
   just the section row-gap — it stacks three pieces: the heading column's 30px
   bottom padding + the section row-gap + the content columns' 30px top padding
   (was 30+60+30 = 120px; halving only the row-gap left ~90px, so it still looked
   unchanged). Close it properly: drop the heading column's bottom padding to 0
   and take the row-gap to 15px → ~45px total (about half of what was there).
   Also center the content in each column: the image (.et_pb_column_7) already
   centers; give the value list (.et_pb_column_6) justify-content:center too so
   it sits centered as a block (its 10px inter-item row-gap is preserved). */
body.page-id-843 .et_pb_section_3 {
  --vertical-gap: 15px;
  row-gap: 15px;
}
body.page-id-843 .et_pb_column_5 {
  padding-bottom: 0 !important;
}
body.page-id-843 .et_pb_column_6 {
  justify-content: center !important;
}
/* phone: the content columns lose their top padding at ≤767, so the 15px
   row-gap is the ENTIRE heading→image gap — too tight. Give it more air here
   (desktop keeps 15px, which combines with the 30px column padding for ~45px). */
@media only screen and (max-width: 767px) {
  body.page-id-843 .et_pb_section_3 {
    --vertical-gap: 30px;
    row-gap: 30px;
  }
}

/* --------------------------------------------------------------------------
   about#5 "Our Management Team" (page-id-843: .et_pb_section_4)
   2026-07-05 — heading column (.et_pb_column_8) loses the card look
   (New-Project-9.png background image, 14px radius, drop shadow; its white
   background-color stays, invisible on the white section). The name/title
   blurb captions (.et_pb_blurb_4/_5) are white text absolutely positioned
   over the photo bottom, spilling onto the white page where they vanished —
   give them a #1020a5 plate with padding so they read as a caption band
   (photos are square-cornered, band is flush full-width).
   -------------------------------------------------------------------------- */
body.page-id-843 .et_pb_column_8 {
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Bio hover-reveal, recovered from the WP build's custom CSS (it targeted
   .et_pb_blurb_25/26 from an older compile, so it was dead here). The page's
   inline jQuery (also retargeted, see about-us/index.html) wraps each
   caption in .front-side and adds a .back-side with an "Open Bio" button;
   hovering the card fades the caption out and the button in. Clicking
   anywhere (button included) bubbles to the column's sg-popup-id-* class,
   which opens the Popup Builder bio popup. The name/title plate approved
   earlier (#1020a5, 14px 18px) lives on .front-side now; the original's
   translucent #1020a5cf was dropped for it. */
body.page-id-843 .team-style .et_pb_blurb_container {
  overflow: hidden;
}

body.page-id-843 .team-style .front-side {
  display: block;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  background: #1020a5;
  padding: 14px 18px;
}

body.page-id-843 .team-style .et_pb_blurb_content:hover .front-side {
  opacity: 0;
}

body.page-id-843 .team-style .back-side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  transition-delay: 0.3s;
  padding-left: 18px; /* original 10px; matches the plate's side padding */
  background: #1020a5a8;
}

body.page-id-843 .team-style .et_pb_blurb_content:hover .back-side {
  opacity: 1;
}

body.page-id-843 .open-bio-btn {
  background: transparent;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0;
  font-size: 28px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.3s;
}

body.page-id-843 .open-bio-btn::before {
  content: "+";
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

body.page-id-843 .open-bio-btn:hover {
  opacity: 0.75;
}

/* breathing room between name and title inside the plate */
body.page-id-843 .et_pb_blurb_4 .et_pb_module_header,
body.page-id-843 .et_pb_blurb_5 .et_pb_module_header {
  margin-bottom: 4px;
}

/* desktop + tablet: heading→cards spacing halved (was 140px: col8
   pad-bottom 30 + section row-gap 60 + team-column pad-top 50 → now
   0 + 60 + 10 = 70px; both team columns trimmed alike so the side-by-side
   cards stay aligned) */
@media only screen and (min-width: 768px) {
  body.page-id-843 .et_pb_column_8 {
    padding-bottom: 0 !important;
  }
  body.page-id-843 .et_pb_column_9,
  body.page-id-843 .et_pb_column_10 {
    padding-top: 10px !important;
  }
}

/* phone: 30px viewport insets like the sections above (heading column
   carried 30px side padding, team columns 20px) */
@media only screen and (max-width: 767px) {
  body.page-id-843 .et_pb_column_8,
  body.page-id-843 .et_pb_column_9,
  body.page-id-843 .et_pb_column_10 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* heading→first-card spacing halved (was 100px: col8 pad-bottom 30 +
     section row-gap 30 + col9 pad-top 40 → now 0 + 30 + 20 = 50px) */
  body.page-id-843 .et_pb_column_8 {
    padding-bottom: 0 !important;
  }
  body.page-id-843 .et_pb_column_9 {
    padding-top: 20px !important;
  }
}

/* --------------------------------------------------------------------------
   about#3 + about#4 phone alignment (page-id-843)
   2026-07-05 — Ali: match the hero's 30px content inset from both viewport
   edges (about#3's row added +30px per side; about#4's columns kept the old
   card look's 30px padding); give about#4 the same 50px top/bottom section
   padding as about#3 (top was 0); halve the heading→image (120px) and
   image→"Integrity" (100px) gaps. With the column padding gone those gaps
   are pure flex row-gaps: the section's 60px gap already equals 120/2, and
   row_4's 40px becomes 50px (=100/2).
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  body.page-id-843 .et_pb_row_2.et_pb_row {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.page-id-843 .et_pb_column_5,
  body.page-id-843 .et_pb_column_6,
  body.page-id-843 .et_pb_column_7 {
    padding: 0 !important;
  }

  body.page-id-843 .et_pb_section_3.et_pb_section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  body.page-id-843 .et_pb_row_4 {
    row-gap: 50px !important;
  }

  /* "Clarity" (.et_pb_blurb_1) and "Innovation" (.et_pb_blurb_3) headings
     rendered 18px on phones while "Integrity"/"Empowerment" are 24px —
     equalize (line-height is em-based, follows automatically). */
  body.page-id-843 .et_pb_blurb_1 .et_pb_module_header,
  body.page-id-843 .et_pb_blurb_3 .et_pb_module_header {
    font-size: 24px !important;
  }
}

/* --------------------------------------------------------------------------
   about#6 "How We Work" (page-id-843: .et_pb_section_5; cards row
   .et_pb_row_8, card columns .et_pb_column_12–15)
   2026-07-05 — Ali: (1) cards lose the New-Project-9.png background image
   (white background, 14px radius, shadow stay); (2) desktop card gap halved —
   Divi's gutters3 grid is 20.875% cards / 5.5% gutters, so 2.75% gutters and
   the cards widen to 22.9375% to keep the row filled; (3) tablet shows two
   cards per row (Divi squeezed all four onto one line); (4) phone one card
   per row (Divi went 45%/two-up between 480–767px); (5) phone: cards inset
   30px from the viewport edges like the hero — row_8 stacked its own 30px
   (Divi !important) on the section's 30px, same as about#3's row_2.
   -------------------------------------------------------------------------- */
body.page-id-843 .et_pb_column_12,
body.page-id-843 .et_pb_column_13,
body.page-id-843 .et_pb_column_14,
body.page-id-843 .et_pb_column_15 {
  background-image: none !important;
}

/* desktop: half gutters; 4 × 22.9375% + 3 × 2.75% = 100% of the row */
@media only screen and (min-width: 981px) {
  body.page-id-843 .et_pb_row_8 > .et_pb_column {
    width: 22.9375%;
    margin-right: 2.75%;
  }
  body.page-id-843 .et_pb_row_8 > .et_pb_column.et-last-child {
    margin-right: 0;
  }
}

/* tablet: let the row wrap into a 2×2 grid — its space-between placement
   provides the middle gutter, the columns' existing 30px bottom margin the
   row spacing (Divi already zeroes it on the second pair) */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  body.page-id-843 .et_pb_row_8 {
    flex-wrap: wrap;
  }
  body.page-id-843 .et_pb_row_8 > .et_pb_column {
    width: 47.25%;
    margin-right: 0;
  }
  /* Divi's zero-width clearfix ::after becomes a flex item on the wrapped
     second line, skewing its space-between — drop it while the row wraps */
  body.page-id-843 .et_pb_row_8::after {
    content: none;
  }
}

/* phone: full-width cards, 30px viewport inset like the hero. Stacking
   margins are set here too: Divi zeroed them on cards 3–4 (the bottom pair
   of its two-up layout). */
@media only screen and (max-width: 767px) {
  body.page-id-843 .et_pb_row_8 > .et_pb_column {
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
  }
  body.page-id-843 .et_pb_row_8 > .et_pb_column.et-last-child {
    margin-bottom: 0;
  }

  body.page-id-843 .et_pb_row_8.et_pb_row {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   about#7 "Data Security & Privacy" (page-id-843: .et_pb_section_6; content
   row .et_pb_row_9 — row-reverse, so the image column .et_pb_column_18
   renders left of the text column .et_pb_column_16)
   2026-07-05 — Ali: (1) heading centered across the section — it lived
   inside the ⅔ text column with ~37 literal spaces faking an indent, so it
   was hoisted into its own full-width row in about-us/index.html
   (.sq-datasec-heading-row, mirroring the "How We Work" heading row) and
   the spaces stripped; (2) the image (.et_pb_image_3) loses its drop shadow
   and vertically centers against the text column (row_9 aligns items
   flex-end, which parked it at the bottom); (3) phone order: heading →
   image → text.
   -------------------------------------------------------------------------- */
body.page-id-843 .sq-datasec-heading-row .et_pb_module_header {
  text-align: center;
}

/* shadows sat on both the image wrap and its column (the column one drew a
   soft halo frame around the 14px padding) */
body.page-id-843 .et_pb_image_3 .et_pb_image_wrap,
body.page-id-843 .et_pb_column_18 {
  box-shadow: none !important;
}

body.page-id-843 .et_pb_column_18 {
  align-self: center;
}

@media only screen and (max-width: 767px) {
  /* stacked; align-items is the desktop flex-end (bottom), which sideways
     would squeeze the text column right — stretch it full width */
  body.page-id-843 .et_pb_row_9 {
    flex-direction: column;
    align-items: stretch;
  }
  /* image column above the icon-list text; keeps its align-self:center from
     above, so the image stays horizontally centered */
  body.page-id-843 .et_pb_column_18 {
    order: -1;
  }
  /* Divi's phone block gives the text column its two-up 45% width — full */
  body.page-id-843 .et_pb_column_16 {
    width: 100%;
  }
}

/* about#7 columns widened (2026-07-11) — Ali: bigger image + more room for
   the icon-list text. A donor `width:30%` crushed the text column
   (.et_pb_column_16, intended 16/24) and the image column (.et_pb_column_18)
   sat at its ~33% flex width, so the pair filled only ~65% of the 1280px row
   and centered, leaving big empty gutters. Fill the row (≈50/50 with the
   row's 5.5% column-gap) so both columns — and thus the image and the text —
   grow. Tablet + desktop only; the columns already stack full-width on phone.
   The image's <img> was height-locked at 300px (width:auto), so a wider
   column alone would not enlarge it — unlock to width:100% / height:auto so
   it scales up with the column at its natural aspect. */
@media only screen and (min-width: 768px) {
  body.page-id-843 .et_pb_column_16 { width: 47.25%; }
  body.page-id-843 .et_pb_column_18 { width: 47.25%; }
  body.page-id-843 .et_pb_image_3 .et_pb_image_wrap img {
    width: 100%;
    height: auto;
  }
  /* 2026-07-13 (Ali): top-align the image and the icon-list text — both start
     at the same y. Supersedes the 2026-07-11 vertical-centering (which parked
     the shorter text column ~36px below the image top). Three parts: the row
     tops both columns (align-items:flex-start); align-self:flex-start overrides
     the base align-self:center on col_18 (kept for the phone stack, where it
     centers the image horizontally — so this override is ≥768px only); and the
     image column drops its 14px top padding (a leftover from the removed card
     frame) so the image's top edge is flush with the row top like the text. */
  body.page-id-843 .et_pb_row_9 { align-items: flex-start; }
  body.page-id-843 .et_pb_column_18 {
    align-self: flex-start;
    padding-top: 0;
  }
}

/* --------------------------------------------------------------------------
   about#8 "Our Commitment to ESG Excellence" (page-id-843: .et_pb_section_7;
   heading+image row .et_pb_row_11/.et_pb_column_19, text row
   .et_pb_row_12/.et_pb_column_20)
   2026-07-05 — Ali: (1) heading → image → text on every resolution — that is
   already the DOM order and nothing reorders it at any breakpoint, so no
   rules needed; (2) "Environmental Stewardship" (.et_pb_heading_8)
   left-aligned; (3) no box shadows anywhere in the section.
   -------------------------------------------------------------------------- */

/* donor card shadows on both (transparent-bg) columns — the shadow drew a
   floating-card outline around the heading+image row and the text row */
body.page-id-843 .et_pb_column_19,
body.page-id-843 .et_pb_column_20 {
  box-shadow: none !important;
}

/* Divi pins the module align-self:center!important (root and again ≤980px),
   which shrink-wraps the already-left-aligned h4 and centers the box;
   stretch matches its sibling h4s (heading_9/10) so the text hits the
   column edge */
body.page-id-843 .et_pb_heading_8 {
  align-self: stretch !important;
}

/* a donor ≤980px group rule sweeps heading_8 into the 32px section-title
   sizing while its sibling h4s (heading_9/10) stay 24px — pin it to match */
@media only screen and (max-width: 980px) {
  body.page-id-843 .et_pb_heading_8 .et_pb_heading_container h4 {
    font-size: 24px !important;
  }
}

/* phone: match the about#1 inset. The section padding (50/30) already equals
   the phone hero's (.et_pb_section_1), but the leftover 14px card padding on
   both columns pushed content to a 44px side inset vs the hero's 30px */
@media only screen and (max-width: 767px) {
  body.page-id-843 .et_pb_column_19,
  body.page-id-843 .et_pb_column_20 {
    padding: 0;
  }
  /* Divi's phone block narrows the image to a centered 90% — full width so
     it reaches the same 30px inset as the hero image */
  body.page-id-843 .et_pb_image_4 {
    width: 100%;
    /* 2026-07-12 (Ali): phone heading→image gap = the Data Security
       heading→content gap, which is 30px on phone (10px baseline + 20px) */
    margin-top: 20px;
  }
}

/* 2026-07-12 (Ali): match the "Our Commitment to ESG Excellence" heading's
   distance from the image below it to the "Data Security & Privacy" heading's
   distance from its content below — mirrored at all three breakpoints.
   Measured gaps (Data Security heading .et_pb_heading_6 → content row
   .et_pb_row_9): 60px desktop, 60px tablet, 30px phone. The ESG heading
   (.et_pb_heading_7) sits directly above the image (.et_pb_image_4) in the
   same column, with a 10px baseline gap, so add 50px (→60) at ≥768px and
   20px (→30) on phone (phone value set in the ≤767 block above).
   Scoped to ≥768px so it does not override the phone value below it in
   source order. */
@media only screen and (min-width: 768px) {
  body.page-id-843 .et_pb_image_4 {
    margin-top: 50px;
  }
}

/* 2026-07-12 (Ali): remove the section's flat #edfdff background colour and
   use the New-Project-7-1.png soft-gradient image as a cover background
   instead. The colour is pinned by a compiled rule
   `.et-l--post>.et_builder_inner_content .et_pb_section.et_pb_section_7
   {background-color:#edfdff!important}` (specificity 0,4,0 + !important), so
   the override matches its class count (+ the body element) and uses
   !important to win the cascade. */
body.page-id-843 .et_pb_section_7.et_pb_section.et_flex_section {
  background-color: transparent !important;
  background-image: url("/wp-content/uploads/2026/02/New-Project-7-1.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* --------------------------------------------------------------------------
   about#9 "Our Community Involvement" (page-id-843: .et_pb_section_8; logos
   row .et_pb_row_14, logo columns .et_pb_column_22–24, logo image modules
   .et_pb_image_5–7)
   2026-07-05 — donor styles wrecked the logos row: forced it to
   flex-direction:column (three full-width stacked strips), painted the row
   AND every column with the New-Project-9.png watermark + 14px radius +
   border + drop shadow, left-aligned the logos, and stretched the Athabasca
   logo (.et_pb_image_7) to 100%×495px (a portrait-photo donor). Ali: three
   logos across on desktop as in the WP original, but plain — no background
   image, no box/drop shadow anywhere on them.
   -------------------------------------------------------------------------- */

/* 2026-07-11 (revised) — Ali: each logo gets its OWN card, not one shared card
   behind all three. So the CTA-style treatment (New-Project-9 watermark, faint
   blue border, 14px corners, drop shadow) moves onto each logo column
   (.et_pb_column_22–24) and the row itself (.et_pb_row_14) goes plain again.
   The card values mirror the CTA (about#10 .et_pb_row_15), so the three logo
   cards read as the same card style — just three of them side by side. */

/* row_14: plain flex container only, no card */
body.page-id-843 .et_pb_row_14 {
  background-image: none !important;
  border: none;
  border-radius: 0;
  box-shadow: none !important;
}

/* each logo column = its own CTA-style card */
body.page-id-843 .et_pb_column_22,
body.page-id-843 .et_pb_column_23,
body.page-id-843 .et_pb_column_24 {
  background-image: url(/wp-content/uploads/2026/01/New-Project-9.png) !important;
  background-repeat: no-repeat;
  border: 1px solid hsl(from var(--gcid-qq6bd4rg9l) calc(h + 0) calc(s + 0) calc(l + 0) / 0.12);
  border-radius: 14px;
  box-shadow: 0px 12px 18px -6px rgba(0, 0, 0, 0.15) !important;
  padding: 15px !important; /* Ali round 2: tighter inner padding (was 30px) */
  overflow: hidden;
}

/* desktop: three across. The stacking at ≤980px is the authored tablet/phone
   behavior, so row direction is only restored at Divi's desktop breakpoint;
   the 24/24 columns shrink to equal thirds around the row's 5.5% gaps.
   align-items:stretch makes the three logo cards equal height (each logo is
   vertically centered inside its card by the column's justify-content:center). */
@media only screen and (min-width: 981px) {
  body.page-id-843 .et_pb_row_14 {
    flex-direction: row;
    align-items: stretch;
  }
}

/* donor pinned every logo to the column's left edge (margin-left:0
   !important) — center them in their thirds */
body.page-id-843 .et_pb_image_5,
body.page-id-843 .et_pb_image_6,
body.page-id-843 .et_pb_image_7 {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Logo sizes: authored 100/120/100 → doubled to 200/240/200 (2026-07-05),
   → 140/168/140 (−30%, 2026-07-11) → 112/134/112 (a further −20%, 2026-07-11
   round 2, Ali). Explicit widths also replace the group rule shared with the
   section photos (image_2–4) that swept the drop-in module to 100% (≤980) /
   90% (≤767), rendering its logo natural-size and left-pinned. */
body.page-id-843 .et_pb_image_5 {
  width: 112px;
}
body.page-id-843 .et_pb_image_6 {
  width: 134px;
}
body.page-id-843 .et_pb_image_7 {
  width: 112px;
}

/* Athabasca logo: natural square aspect (162×162 source) instead of the
   donor's 495px height; its wrap also carried its own radius + shadow */
body.page-id-843 .et_pb_image_7 .et_pb_image_wrap img {
  height: auto;
}
body.page-id-843 .et_pb_image_7 .et_pb_image_wrap {
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* phone: the card interiors left 65/65/30px vertical padding on the stacked
   columns — uneven 150/115px holes between logos once the cards are gone.
   Zero it and space the stack with an even 30px row gap instead. Ali: match
   the about#1 hero's 30px content inset from the viewport edges — the
   section's own 50/30 padding already equals the hero's, but both rows
   stacked another 30px (Divi !important) and the logo columns 30px more on
   top of that (text sat at 60px, logos at 90px). */
@media only screen and (max-width: 767px) {
  body.page-id-843 .et_pb_row_14 {
    row-gap: 30px; /* even gap between the stacked logo cards */
  }
  /* the text row and the plain logos row both pull out to the 30px viewport
     inset; the per-logo cards (cols 22–24) keep their own 30px padding */
  body.page-id-843 .et_pb_row_13.et_pb_row,
  body.page-id-843 .et_pb_row_14.et_pb_row {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* about#9 text width + spacing (2026-07-11, Ali):
   (1) The "Our Community Involvement" intro (heading + paragraph, .et_pb_row_13)
   was capped at max-width:800px while the "ESG Excellence" section above it
   (.et_pb_row_12) uses 1080px — widen row_13 to 1080px so its text matches the
   ESG text width (donor cap is !important, so this one is too).
   (2) Halve the gap between that text and the logo card: section_8 is a flex
   column whose 60px row-gap (--vertical-gap) is the only space between the two
   rows — take it to 30px. (The card keeps its own top padding, matching the
   CTA.) */
body.page-id-843 .et_pb_row_13 {
  max-width: 1080px !important;
}
body.page-id-843 .et_pb_section_8 {
  --vertical-gap: 30px;
  row-gap: 30px;
}

/* Logos → CTA distance reduced (2026-07-11, Ali). The gap between the logos and
   the CTA below is this section's bottom padding (desktop 100px / mobile 50px)
   plus the CTA section's own top padding (~51px desktop / 50px mobile). The CTA
   is off-limits, so trim only this section's bottom padding to 30px → ~81px
   desktop / ~80px mobile total (was 151 / 100). The CTA's own top padding is the
   floor — we don't touch it. */
body.page-id-843 .et_pb_section_8.et_pb_section {
  padding-bottom: 30px !important;
}

/* --------------------------------------------------------------------------
   about#10 "Empower Your Business with Smart Solutions" CTA (page-id-843:
   .et_pb_section_9; card row .et_pb_row_15, heading column .et_pb_column_25,
   text+button column .et_pb_column_26)
   2026-07-05 — Ali: section reads fine overall, but the two inner columns
   each drew a 1px #333 rounded outline around the heading and the text —
   borders off, and the text column's soft drop shadow (the halo around the
   text+button panel) goes too. The outer card row (watermark, faint blue
   border, shadow) and the button's own styling stay as they are.
   -------------------------------------------------------------------------- */
body.page-id-843 .et_pb_column_25,
body.page-id-843 .et_pb_column_26 {
  border: none;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   services#3 "Our Services" intro (page-id-1505: .et_pb_section_2)
   2026-07-05 — Ali: section should not have a background image. Divi compiled
   CSS sets background-image:url(...New-Project-7-1.png)!important (the soft
   gradient wash); remove it and let the section's own #ffffff background-color
   show. !important + body class needed to beat the Divi !important rule.
   -------------------------------------------------------------------------- */
body.page-id-1505 .et_pb_section_2 {
  background-image: none !important;
}

/* --------------------------------------------------------------------------
   services#4 service cards (page-id-1505: .et_pb_section_3; rows
   .et_pb_row_3–6; text cols .et_pb_column_5/7/9/11, image cols 6/8/10/12,
   images .et_pb_image_2–5, buttons .et_pb_button_0–3)
   2026-07-05 — Ali: unify the four rows, fix button styling (donor rules
   left text flush against the pill's left edge: padding-right:38/bottom:10/
   left:0 !important), and restore rows 3–4 (cols 9–12) which were donor-
   stripped (col width 30/45%, 50px paddings) — see memory:
   divi5-frontend-render-regression.
   2026-07-12 — Ali: REMOVE the four white text cards and every drop/box
   shadow in this section, and force all four images to the same box as
   business-insight-analysis-services-02.webp at all breakpoints. See the
   text-column (1), image (3) and image-wrap shadow rules below.
   2026-07-12 — Ali: double the vertical spacing between the four rows.
   The section is a flex column whose row-gap = var(--vertical-gap) (60px);
   override it to 120px (see (0) below).
   -------------------------------------------------------------------------- */

/* (0) spacing between the four rows: the section stacks its rows as a flex
   column with row-gap:var(--vertical-gap). Divi sets that gap per breakpoint
   — 60px on desktop/tablet and 30px on phone (≤767px, donor rule) — so
   "double it" means 120px on desktop/tablet and 60px on phone. (Ali 2026-07-12) */
body.page-id-1505 .et_pb_section_3 {
  row-gap: 120px;
}
@media only screen and (max-width: 767px) {
  body.page-id-1505 .et_pb_section_3 {
    row-gap: 60px;
  }
}

/* (1) text columns: NO card (Ali 2026-07-12) — remove the white card, its
   drop shadow, its radius and its padding, so the heading/text/button sit
   flat on the section's white background, left-aligned flush to the column
   (and top-aligned with the image beside it). Every property is stated
   explicitly (not merely dropped) because row 1's column .et_pb_column_5
   carries a LATER donor inline rule (New-Project-9.png wash + the same
   0 2px 18px shadow + 14px radius); this higher-specificity rule has to
   override each of those or row 1's card would reappear. */
body.page-id-1505 .et_pb_column_5,
body.page-id-1505 .et_pb_column_7,
body.page-id-1505 .et_pb_column_9,
body.page-id-1505 .et_pb_column_11 {
  background-image: none;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* (2) image columns: no card — the image's 14px corner radius is the only
   framing (its drop shadow was removed 2026-07-12, see below) */
body.page-id-1505 .et_pb_column_6,
body.page-id-1505 .et_pb_column_8,
body.page-id-1505 .et_pb_column_10,
body.page-id-1505 .et_pb_column_12 {
  background-image: none;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* (3) images: full column width, and forced to the SAME box as
   business-insight-analysis-services-02.webp (.et_pb_image_3, native
   1550×1034 → 1.499:1). Applying that aspect-ratio to every image with
   object-fit:cover makes all four render identical (442×295 at 1280px, and
   equal at every breakpoint since the four image columns are equal width).
   The two wider sources (shutterstock 1.82:1, New-Project-3 1.71:1) are
   cropped to fit rather than distorted. (Ali 2026-07-12) */
body.page-id-1505 .et_pb_image_2,
body.page-id-1505 .et_pb_image_3,
body.page-id-1505 .et_pb_image_4,
body.page-id-1505 .et_pb_image_5 {
  width: 100%;
}
body.page-id-1505 .et_pb_image_2 img,
body.page-id-1505 .et_pb_image_3 img,
body.page-id-1505 .et_pb_image_4 img,
body.page-id-1505 .et_pb_image_5 img {
  width: 100%;
  height: auto;
  aspect-ratio: 1550 / 1034;
  object-fit: cover;
}

/* no drop shadow on the images (Ali 2026-07-12: remove all box shadows in
   this section). The 14px corner radius stays. Overrides the later donor
   inline rule that set a 0 12px 18px -6px shadow on these four wraps. */
body.page-id-1505 .et_pb_image_2 .et_pb_image_wrap,
body.page-id-1505 .et_pb_image_3 .et_pb_image_wrap,
body.page-id-1505 .et_pb_image_4 .et_pb_image_wrap,
body.page-id-1505 .et_pb_image_5 .et_pb_image_wrap {
  box-shadow: none !important;
}

/* rows 3–4: undo donor sizing (width:30%/45%, odd gaps) so they match
   rows 1–2. Divi keeps the 3/5–2/5 split down to 768px and stacks columns
   full-width at ≤767px, so restate the generic .et_flex_column_* calc for
   tablet+desktop and force the full-width stack on phone (the donor width
   beat Divi's own stacking rule there). */
@media only screen and (min-width: 768px) {
  body.page-id-1505 .et_pb_row_5,
  body.page-id-1505 .et_pb_row_6 {
    column-gap: 5.5%;
    row-gap: 40px;
  }
  body.page-id-1505 .et_pb_column_9,
  body.page-id-1505 .et_pb_column_11 {
    width: calc(60% - 5.5% * 0.4);
    flex-grow: 0;
  }
  body.page-id-1505 .et_pb_column_10,
  body.page-id-1505 .et_pb_column_12 {
    width: calc(40% - 5.5% * 0.6);
    flex-grow: 0;
  }
}
@media only screen and (max-width: 767px) {
  body.page-id-1505 .et_pb_column_9,
  body.page-id-1505 .et_pb_column_10,
  body.page-id-1505 .et_pb_column_11,
  body.page-id-1505 .et_pb_column_12 {
    width: 100%;
  }
}
/* row 4 only drifts on tablet: donor gave it padding 20px 0 (full-bleed)
   while rows 3/5/6 keep 0 30px, so its columns computed wider (435/276 vs
   401/254). Match the other rows. Desktop already matches. */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  body.page-id-1505 .et_pb_row_4.et_pb_row {
    padding: 0 30px !important; /* donor rule is !important too */
  }
}

/* rows 3–4 headings were donor-centered; rows 1–2 are left-aligned. Divi's
   rule targets `.et_pb_heading_N .et_pb_heading_container hX` and is
   appended after this sheet — mirror its selector under the body class. */
body.page-id-1505 .et_pb_heading_5 .et_pb_heading_container h1,
body.page-id-1505 .et_pb_heading_5 .et_pb_heading_container h2,
body.page-id-1505 .et_pb_heading_5 .et_pb_heading_container h3,
body.page-id-1505 .et_pb_heading_5 .et_pb_heading_container h4,
body.page-id-1505 .et_pb_heading_6 .et_pb_heading_container h1,
body.page-id-1505 .et_pb_heading_6 .et_pb_heading_container h2,
body.page-id-1505 .et_pb_heading_6 .et_pb_heading_container h3,
body.page-id-1505 .et_pb_heading_6 .et_pb_heading_container h4 {
  text-align: left;
}

/* (4) buttons: donor wrapper rule forced padding 38px right / 10px bottom /
   0 left (!important) — text sat flush against the pill's left edge, and
   hover jumped to 0.3em 1em. Pin both states to the hover value. */
body.page-id-1505 .et_pb_button_0_wrapper .et_pb_button_0,
body.page-id-1505 .et_pb_button_1_wrapper .et_pb_button_1,
body.page-id-1505 .et_pb_button_2_wrapper .et_pb_button_2,
body.page-id-1505 .et_pb_button_3_wrapper .et_pb_button_3 {
  padding: 0.3em 1em !important;
}

/* row 1's paragraph (.et_pb_text_4) carried donor max-width:70% (60% on
   tablet) — big dead space right of the text; the other rows' paragraphs
   are unconstrained */
body.page-id-1505 .et_pb_text_4 {
  max-width: none;
}

/* phone: (a) donor row-gaps made the text-card→image spacing uneven
   (40/40/20/17px) while row-to-row spacing is 30px — pin all to 30px;
   (b) Ali: image above its text card in each stacked row */
@media only screen and (max-width: 767px) {
  body.page-id-1505 .et_pb_row_3,
  body.page-id-1505 .et_pb_row_4,
  body.page-id-1505 .et_pb_row_5,
  body.page-id-1505 .et_pb_row_6 {
    row-gap: 30px;
  }
  body.page-id-1505 .et_pb_column_6,
  body.page-id-1505 .et_pb_column_8,
  body.page-id-1505 .et_pb_column_10,
  body.page-id-1505 .et_pb_column_12 {
    order: -1;
  }
}

/* ≤980px a donor rule turned buttons 1–3 transparent while their text stays
   white (!important) — invisible label, empty outlined pill. Restore the blue
   fill; selector carries #page-container so it outranks the donor rule but
   still yields to the :hover ghost state. */
@media only screen and (max-width: 980px) {
  body.page-id-1505 #page-container .et_pb_section .et_pb_button_1,
  body.page-id-1505 #page-container .et_pb_section .et_pb_button_2,
  body.page-id-1505 #page-container .et_pb_section .et_pb_button_3 {
    background-color: var(--gcid-qq6bd4rg9l);
  }
}

/* --------------------------------------------------------------------------
   services#5 "Ready to Transform Your Finance Function?" CTA (page-id-1505:
   .et_pb_section_4; card row .et_pb_row_7, heading col .et_pb_column_13,
   text+button col .et_pb_column_14)
   2026-07-05 — Ali: match the about-us CTA (about#10, .et_pb_row_15 with
   cols 25/26) at all three breakpoints. Only real divergence is donor width
   on the two stacked full-width columns (30% desktop, 45% smaller) which
   crushed the paragraph to ~120px and wrapped the button onto three lines,
   plus the missing 20px column padding the about cols carry. Row card,
   text max-width chain and flex rules already match the reference.
   -------------------------------------------------------------------------- */
body.page-id-1505 .et_pb_column_13,
body.page-id-1505 .et_pb_column_14 {
  width: 100%;
  padding: 20px;
}

/* Ali: CTA heading left-aligned on phone (stays centered on tablet/desktop);
   selector mirrors Divi's `.et_pb_heading_N .et_pb_heading_container hX` */
@media only screen and (max-width: 767px) {
  body.page-id-1505 .et_pb_heading_7 .et_pb_heading_container h1,
  body.page-id-1505 .et_pb_heading_7 .et_pb_heading_container h2,
  body.page-id-1505 .et_pb_heading_7 .et_pb_heading_container h3,
  body.page-id-1505 .et_pb_heading_7 .et_pb_heading_container h4 {
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   services#1 hero (page-id-1505: .et_pb_section_0; row .et_pb_row_0, heading
   col .et_pb_column_0, image+text col .et_pb_column_1; phone dup
   .et_pb_section_1 with row_1 / column_2 / column_3)
   2026-07-05 — same Divi 5 donor pollution as the about#1 hero (see memory:
   divi5-frontend-render-regression): row-reverse flipped heading/image,
   margin-left:-13vw (!) dragged the image off the left viewport edge, and a
   skewX(-5deg) tilted it. Ali: heading left, image+text right, image
   untransformed. The donor Multi-View JS blob (runtime img-src swap to
   home's hero images on breakpoint change — the "tablet shows a different
   image" bug) was emptied in services/index.html, not here.
   -------------------------------------------------------------------------- */
body.page-id-1505 .et_pb_row_0 {
  flex-direction: row; /* donor row-reverse at every breakpoint */
}
body.page-id-1505 .et_pb_image_0 {
  margin-left: 0 !important; /* donor -13vw desktop / -5vw tablet, !important */
}
/* the compiled skewX(-5deg) tilt stays — Ali: same effect as the about hero */

/* phantom compiler-injected margin-bottom:200px (+30px padding) pushed the
   heading 100px above the row's vertical center (same phantom as about#1,
   see memory: divi5-frontend-render-regression) */
body.page-id-1505 .et_pb_heading_0 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* tablet (768–980): match the about#1 hero image treatment — fixed 400px
   tall frame at column width, object-fit:cover center crop (about's img
   carries an authored `.wp-image-287 { object-fit:cover }` that this page's
   compile lost). Compiled `height:400px; width:auto` here instead blew the
   photo up inside overflow:hidden, chopping it off one side. */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  body.page-id-1505 .et_pb_image_0 .et_pb_image_wrap img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
}

/* phone hero is the duplicate section_1 (section_0 is display:none ≤767).
   Order is already heading → image → text; spacing was 91px heading→image
   (50px col padding + slack from the fixed 765px row height) vs 30px
   image→text. Even 30px everywhere, same recipe as the about#1 hero. */
@media only screen and (max-width: 767px) {
  body.page-id-1505 .et_pb_row_1 {
    height: auto;
    row-gap: 30px;
  }
  body.page-id-1505 .et_pb_column_2 {
    padding-bottom: 0;
  }
}


/* --------------------------------------------------------------------------
   bookkeeping#1 hero (page-id-977: .et_pb_section_0; row .et_pb_row_0, heading
   col .et_pb_column_0, image+text col .et_pb_column_1; phone dup
   .et_pb_section_1 with row_1 / column_2 / column_3)
   2026-07-06 — same Divi 5 donor pollution as the services#1 / about#1 heroes
   (see memory: divi5-frontend-render-regression): row-reverse flipped
   heading/image, margin-left:-13vw (!) dragged the image off the left
   viewport edge. The skewX(-5deg) tilt is authored and stays. The donor
   Multi-View entries (runtime img-src swap to home's hero images) and the
   donor data-et-mv-hidden attrs on the phone-dup h1 were fixed in
   bookkeeping-cloud-accounting/index.html, not here.
   -------------------------------------------------------------------------- */
body.page-id-977 .et_pb_row_0 {
  flex-direction: row; /* donor row-reverse at every breakpoint */
}
body.page-id-977 .et_pb_image_0 {
  margin-left: 0 !important; /* donor -13vw desktop / -5vw tablet, !important */
}
/* the compiled skewX(-5deg) tilt stays — same effect as the about/services heroes */

/* phantom compiler-injected margin-bottom:200px (+30px padding) pushed the
   heading 100px above the row's vertical center (same phantom as about#1,
   see memory: divi5-frontend-render-regression) */
body.page-id-977 .et_pb_heading_0 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* tablet (768–980): match the about#1 hero image treatment — fixed 400px
   tall frame at column width, object-fit:cover center crop. Compiled
   `height:400px; width:auto` here instead blew the photo up inside
   overflow:hidden, chopping it off one side (the page's generic
   `.img-object img{object-fit:cover}` loses to that higher-specificity
   width:auto, and there is no .wp-image-377 object-fit rule). */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  body.page-id-977 .et_pb_image_0 .et_pb_image_wrap img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
}

/* phone hero is the duplicate section_1 (section_0 is display:none ≤767).
   Order is already heading → image → text; fixed 85vh row height + 50px
   heading-column bottom padding + 20px row gap made the stacked gaps
   uneven. Even 30px everywhere, same recipe as the about/services heroes. */
@media only screen and (max-width: 767px) {
  body.page-id-977 .et_pb_row_1 {
    height: auto;
    row-gap: 30px;
  }
  body.page-id-977 .et_pb_column_2 {
    padding-bottom: 0;
  }
  /* donor absolute overlay (bottom:-5em) hung the text card over the image —
     let it flow in the column's 30px gap instead (about#1 recipe) */
  body.page-id-977 .et_pb_text_1 {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
  }
  /* donor height:100vh on the dup section left ~143px of dead space above
     and below the stack (services/process compile without it) */
  body.page-id-977 .et_pb_section_1 {
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   financial#1 hero (page-id-1100: .et_pb_section_0; row .et_pb_row_0, heading
   col .et_pb_column_0, image+text col .et_pb_column_1; phone dup
   .et_pb_section_1 with row_1 / column_2 / column_3)
   2026-07-06 — same Divi 5 donor pollution as the services#1 / about#1 heroes
   (see memory: divi5-frontend-render-regression): row-reverse flipped
   heading/image, margin-left:-13vw dragged the image off the left viewport
   edge, and a phantom margin-bottom:200px pushed the heading above the row's
   vertical center. The donor Multi-View JS blob (runtime img-src swap to
   home's hero images on breakpoint change) is emptied in
   financial-analysis-insights/index.html, not here.
   -------------------------------------------------------------------------- */
body.page-id-1100 .et_pb_row_0 {
  flex-direction: row; /* donor row-reverse at desktop + tablet */
}
body.page-id-1100 .et_pb_image_0 {
  margin-left: 0 !important; /* donor -13vw desktop / -5vw tablet, !important */
}
/* the compiled skewX(-5deg) tilt stays — authored, same as about/services heroes */

/* phantom compiler-injected margin-bottom:200px (+30px padding) on the hero
   heading (same phantom as about#1/services#1, see memory:
   divi5-frontend-render-regression) */
body.page-id-1100 .et_pb_heading_0 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* tablet (768–980): compiled `height:400px; width:auto` blows the photo up
   inside the overflow:hidden wrap, chopping it off one side — match the
   about#1 hero treatment: column-wide 400px frame, object-fit:cover center
   crop (this page's compile has no object-fit for its own .wp-image-364;
   the only object-fit:cover rules target donor .wp-image-287 and the
   non-hero .et_pb_image_2). */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  body.page-id-1100 .et_pb_image_0 .et_pb_image_wrap img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
}

/* phone hero is the duplicate section_1 (section_0 is display:none ≤767).
   Order is already heading → image → text; fixed 85vh row height + 50px
   heading-col bottom padding made the stacked gaps uneven. Even 30px
   everywhere, same recipe as the services#1 / about#1 heroes. */
@media only screen and (max-width: 767px) {
  body.page-id-1100 .et_pb_row_1 {
    height: auto;
    row-gap: 30px;
  }
  body.page-id-1100 .et_pb_column_2 {
    padding-bottom: 0;
  }
  /* donor absolute overlay (bottom:-10px) hung the text card over the image */
  body.page-id-1100 .et_pb_text_1 {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   financial#3 "Financial Analysis & Insights" intro (page-id-1100:
   .et_pb_section_2; heading .et_pb_heading_2, divider .et_pb_divider_0,
   text .et_pb_text_2)
   2026-07-06 — Ali: no background image, no background color, paragraphs
   #333333. Same compile as career#3/services#3: the New-Project-7-1.png wash
   rides `.et_pb_section_2` with !important, the #f6ffff color rides the
   4-class `.et-l--post>.et_builder_inner_content .et_pb_section.et_pb_section_2`
   (!important), and the paragraphs carry the donor white-on-photo
   color:#fff!important on .et_pb_text_inner.
   -------------------------------------------------------------------------- */
body.page-id-1100 .et_pb_section_2 {
  background-image: none !important;
}
body.page-id-1100 .et-l--post > .et_builder_inner_content .et_pb_section.et_pb_section_2 {
  background-color: transparent !important;
}
body.page-id-1100 .et_pb_text_2 .et_pb_text_inner {
  color: #333333 !important;
}

/* --------------------------------------------------------------------------
   financial#4 "Advanced Financial Analysis" service details (page-id-1100:
   .et_pb_section_3; 7 blocks, one outer row each — row_3/5/7/9/11/13/15.
   Each block: text col (column_5/8/11/14/17/20/23) holding the heading +
   a nested row (row_4/6/8/10/12/14/16 > column_6/9/12/15/18/21/24) with the
   copy; image col (column_7/10/13/16/19/22/25). Rows alternate
   row/row-reverse so images swap sides — authored, kept.
   2026-07-06 — Ali: each heading+text pair = ONE flat white box (no wash
   image, no shadow), images bare (no shadow), same treatment across all 7
   blocks. The compile was donor-inconsistent: blocks 1-2 had double-nested
   white cards (outer col + inner col each with the New-Project-9.png wash +
   shadow), block 1's image had a 30px white frame, blocks 3-7 had stray
   shadows or nothing at all. Also the career#5-style donor width:30%
   (45% phone) crushed block 3+4 columns (.et_pb_column_11-16) — text was
   110px wide; restored to the base 12/24 flex width so all 7 blocks match.
   -------------------------------------------------------------------------- */
/* no wash images, no shadows anywhere in the section (rows, cols, img frames) */
body.page-id-1100 .et_pb_section_3 .et_pb_row,
body.page-id-1100 .et_pb_section_3 .et_pb_column,
body.page-id-1100 .et_pb_section_3 .et_pb_image_wrap {
  background-image: none !important;
  box-shadow: none !important;
}
/* 2026-07-18 — Ali: no white boxes at all. The text+copy card (added
   2026-07-06) is gone; every row/column/module in the section sits directly
   on the section background, unpadded, unrounded, unbordered, no shadow.
   Blocks 6-7 drew their sub-box as a 1px border (row_14 pale blue,
   column_24 #333) instead of a background, so borders go too. */
body.page-id-1100 .et_pb_section_3 > .et_pb_row > .et_pb_column,
body.page-id-1100 .et_pb_section_3 .et_pb_column .et_pb_row,
body.page-id-1100 .et_pb_section_3 .et_pb_column .et_pb_row .et_pb_column,
body.page-id-1100 .et_pb_section_3 .et_pb_image_wrap {
  background-color: transparent !important;
  padding: 0;
  border-radius: 0;
  border: none;
  box-shadow: none !important;
}
/* 2026-07-18 — Ali: every heading in the section left-aligned. The compile
   centred block 3's heading (.et_pb_heading_5: justify-content + text-align
   center) while the other six were left. */
body.page-id-1100 .et_pb_section_3 .et_pb_heading {
  justify-content: flex-start;
}
body.page-id-1100 .et_pb_section_3 .et_pb_heading .et_pb_heading_container,
body.page-id-1100 .et_pb_section_3 .et_pb_heading .et_pb_heading_container h1,
body.page-id-1100 .et_pb_section_3 .et_pb_heading .et_pb_heading_container h2,
body.page-id-1100 .et_pb_section_3 .et_pb_heading .et_pb_heading_container h3,
body.page-id-1100 .et_pb_section_3 .et_pb_heading .et_pb_heading_container h4,
body.page-id-1100 .et_pb_section_3 .et_pb_heading .et_pb_heading_container h5,
body.page-id-1100 .et_pb_section_3 .et_pb_heading .et_pb_heading_container h6 {
  text-align: left;
}
/* 2026-07-18 — Ali: each heading top-aligned with the image beside it.
   Block 6's heading compiled align-self:center (.et_pb_heading_8), which
   floated it down the middle of its column instead of sitting at the top. */
body.page-id-1100 .et_pb_section_3 .et_pb_heading {
  align-self: flex-start !important;
}
/* Ali follow-up 2026-07-06: images top-aligned with the white text card.
   The outer rows compiled to donor-mixed align-items:flex-end (blocks 1/3/4)
   and center (2/5/6/7), dropping the shorter image column down the row */
body.page-id-1100 .et_pb_section_3 > .et_pb_row {
  align-items: flex-start;
}
/* Ali follow-up 2026-07-06: tablet + phone, images fill their column at
   natural aspect ratio. Compiled rules clamp every img to a fixed
   300px/350px height with object-fit:cover (center-crop), and at ≤767 the
   modules drop to width:90% with img width:auto — full width, height auto,
   crop off. Desktop keeps the uniform 300px-crop look.
   Also: image↔text-card gap made uniform — block 2's row_5 compiled fixed
   column-gap:40px / row-gap:20px while the other six use 5.5% / 40px. */
@media only screen and (max-width: 980px) {
  body.page-id-1100 .et_pb_section_3 > .et_pb_row {
    column-gap: 5.5%; /* tablet side-by-side gap */
    row-gap: 40px; /* phone stacked gap */
  }
  body.page-id-1100 .et_pb_section_3 .et_pb_image {
    width: 100% !important; /* donor 90% at ≤767 */
  }
  body.page-id-1100 .et_pb_section_3 .et_pb_image .et_pb_image_wrap {
    width: 100%;
  }
  body.page-id-1100 .et_pb_section_3 .et_pb_image .et_pb_image_wrap img {
    width: 100% !important;
    height: auto !important;
  }
}
/* donor width:30% (desktop/tablet) / 45% (phone) on blocks 3+4: outer text
   cols 11/14 and image cols 13/16 back to the base 12/24 flex width */
body.page-id-1100 .et_pb_column_11,
body.page-id-1100 .et_pb_column_13,
body.page-id-1100 .et_pb_column_14,
body.page-id-1100 .et_pb_column_16 {
  width: calc(50% - var(--horizontal-gap-parent, 5.5%) * 0.5);
}
/* their nested copy columns 12/15 are single 24/24 columns — full width */
body.page-id-1100 .et_pb_column_12,
body.page-id-1100 .et_pb_column_15 {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  body.page-id-1100 .et_pb_column_11,
  body.page-id-1100 .et_pb_column_13,
  body.page-id-1100 .et_pb_column_14,
  body.page-id-1100 .et_pb_column_16 {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   financial#5 "Why Partner with Saturnique?" (page-id-1100: .et_pb_section_4;
   heading row .et_pb_row_17 > .et_pb_column_26 with .et_pb_heading_10,
   blurb row .et_pb_row_18 > .et_pb_column_27 (blurbs 0-2) +
   .et_pb_column_28 (blurbs 3-4))
   2026-07-06 — Ali: match the mock — no boxes anywhere, heading and the two
   blurb columns sit directly on the section background. The compile boxed
   the heading column and the LEFT blurb column only (1px #333 border, 14px
   radius, shadow; 20/30px padding) while the right column was bare, and the
   left column's 30px padding pushed its blurbs 31px below the right
   column's. Blurbs had zero vertical margin (items touching) — Ali asked
   for breathing room between the stacked icon+text items.
   -------------------------------------------------------------------------- */
body.page-id-1100 .et_pb_column_26,
body.page-id-1100 .et_pb_column_27 {
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
body.page-id-1100 .et_pb_section_4 .et_pb_blurb:not(:last-child) {
  margin-bottom: 24px;
}
/* icons were donor-capped to ~15px inside their 48px main_blurb_image box —
   same fix as contact#4's 48px icons */
body.page-id-1100 .et_pb_section_4 .et_pb_blurb .et_pb_image_wrap {
  width: 48px;
  max-width: 48px;
}

/* --------------------------------------------------------------------------
   process#1 hero (page-id-1132: .et_pb_section_0; row .et_pb_row_0, heading
   col .et_pb_column_0, image+text col .et_pb_column_1; phone dup
   .et_pb_section_1 with row_1 / column_2 / column_3) — 2026-07-06
   Same Divi 5 donor pollution as the about#1 / services#1 heroes (see memory:
   divi5-frontend-render-regression): row-reverse flipped heading/image,
   margin-left:-13vw dragged the image off the left viewport edge, phantom
   margin-bottom:200px pushed the heading above center. The donor Multi-View
   JS blob (runtime img-src swap to home's hero images) was surgically
   trimmed in process-management/index.html, not here. The compiled
   skewX(-5deg) tilt is authored (about-hero design language) — kept. */
body.page-id-1132 .et_pb_row_0 {
  flex-direction: row; /* donor row-reverse at every breakpoint */
}
body.page-id-1132 .et_pb_image_0 {
  margin-left: 0 !important; /* donor -13vw desktop / -5vw tablet, !important */
}

/* phantom compiler-injected margin-bottom:200px pushed the heading above the
   row's vertical center (unlike services#1 there is NO 30px padding phantom
   on this page, so only the margin is reset) */
body.page-id-1132 .et_pb_heading_0 {
  margin-bottom: 0 !important;
}
/* the heading column also carried a donor 50px top padding, nudging the
   heading 25px below the row's vertical center */
body.page-id-1132 .et_pb_column_0 {
  padding-top: 0;
}

/* tablet (768–980): match the about#1 hero image treatment — fixed 400px
   tall frame at column width, object-fit:cover center crop (this page's
   hero img is .wp-image-459 and its compile has no object-fit; the only
   compiled object-fit:cover is about's .wp-image-287). Compiled
   `height:400px; width:auto` here instead blew the photo up inside
   overflow:hidden, chopping it off one side. */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  body.page-id-1132 .et_pb_image_0 .et_pb_image_wrap img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
}

/* phone hero is the duplicate section_1 (section_0 is display:none ≤767).
   Donor fixed 85vh row height (base rule + repeated ≤767) plus 50px
   padding-bottom on the heading column made the stacked heading/image/text
   gaps uneven. Even 30px everywhere, same recipe as about#1/services#1. */
@media only screen and (max-width: 767px) {
  body.page-id-1132 .et_pb_row_1 {
    height: auto;
    row-gap: 30px;
  }
  body.page-id-1132 .et_pb_column_2 {
    padding-bottom: 0;
  }
  /* donor absolute overlay (bottom:-07px) hung the text card over the image */
  body.page-id-1132 .et_pb_text_1 {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
  }
  /* compiled height:300px squashed the 980x573 photo (object-fit:fill) by
     17% — keep the natural aspect at full column width */
  body.page-id-1132 .et_pb_image_1 .et_pb_image_wrap img {
    height: auto;
  }
}

/* change-management-3 (page-id-1139) — donor-style hero fixes — 2026-07-06 */

/* 1. hero row: donor flex-direction:row-reverse (unscoped + <=980 + <=767 compiled rules) put the heading right of the image — restore authored order */
body.page-id-1139 .et_pb_row_0 { flex-direction: row; }

/* 2. hero image: donor margin-left:-13vw!important (desktop) / -5vw!important (tablet) dragged the photo off-screen */
body.page-id-1139 .et_pb_image_0 { margin-left: 0 !important; }

/* 4. phantom compiler margin-bottom:200px!important on the first hero heading ("Embrace Change") — this is the huge gap above "as the New Normal"; no phantom padding-bottom exists on this page so only the margin is reset */
body.page-id-1139 .et_pb_heading_0 { margin-bottom: 0 !important; }

/* 5. tablet: compiled <=980 rule sets hero img height:400px;width:auto, blowing the photo up inside the overflow:hidden wrap — use the about-page 400px object-fit:cover frame. object-fit needs !important on this page to beat its own ".img-object1 img { object-fit:fill!important }" (the hero image module carries the custom class img-object1) */
@media only screen and (min-width: 768px) and (max-width: 980px) {
	body.page-id-1139 .et_pb_image_0 .et_pb_image_wrap img { width: 100%; height: 400px; object-fit: cover !important; }
}

/* 6. phone dup hero: fixed 70vh row height (donor 85vh also injected) + donor row-gap 20px + heading column padding-bottom:50px made the stacked heading/image/text gaps uneven */
@media only screen and (max-width: 767px) {
	body.page-id-1139 .et_pb_row_1 { height: auto; row-gap: 30px; }
	body.page-id-1139 .et_pb_column_2 { padding-bottom: 0; }
	/* donor absolute overlay (bottom:-07px) hung the text card over the image */
	body.page-id-1139 .et_pb_text_1 { position: static !important; inset: auto !important; margin: 0 !important; }
}

/* --------------------------------------------------------------------------
   change-management-3 batch — 2026-07-06 (page-id-1139), Ali's review of
   change#3 / #4 / #5 / #7 plus the global phone-gutter normalization.
   Section IDs per the section map:
     change#3 = .et_pb_section_2  "Our People-Centric Approach"
     change#4 = .et_pb_section_3  "Why Choose Saturnique?"
     change#5 = .et_pb_section_4  "How Saturnique Empowers Your Change Initiatives"
     change#7 = .et_pb_section_6  "Ready for Change That Actually Delivers?" (CTA)
   -------------------------------------------------------------------------- */

/* change#3 "Our People-Centric Approach" (.et_pb_section_2) — Ali: plain white
   section (drop the New-Project-7-1.png wash + #f6ffff tint) and the intro
   paragraph to #333333. The paragraph (.et_pb_text_2) compiled
   color:#fff!important (donor white-on-photo); the #f6ffff tint rides the
   donor 4-class selector, so mirror it under the body class. */
body.page-id-1139 .et_pb_section_2 {
  background-image: none !important;
}
body.page-id-1139 .et-l--post > .et_builder_inner_content .et_pb_section.et_pb_section_2 {
  background-color: #fff !important;
}
body.page-id-1139 .et_pb_text_2 .et_pb_text_inner {
  color: #333333 !important;
}

/* change#4 "Why Choose Saturnique?" (.et_pb_section_3)
   (a) the heading column (.et_pb_column_5) loses its card look — the
       New-Project-9.png wash, white fill, 14px radius, drop shadow and 30px
       padding all go, so the heading sits directly on the section wash. The
       heading centres itself, so dropping the padding doesn't shift it at
       desktop; on phone it also brings the heading to the hero's 30px inset.
   (b) the four blurb "boxes" (.et_pb_column_6-9) sit closer on desktop — their
       spacing is a 5.5% margin-right (~68px); halve it to 2.75% and widen the
       cards to 22.9375% so the row stays filled (same recipe as about#6).
   (c) phone: one box per row across the whole ≤767 range (Divi drops them to
       ~45% two-up between 481-767px — force 100%). */
body.page-id-1139 .et_pb_column_5 {
  background-image: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
@media only screen and (min-width: 981px) {
  body.page-id-1139 .et_pb_row_4 > .et_pb_column {
    width: 22.9375%;
    margin-right: 2.75%;
  }
  body.page-id-1139 .et_pb_row_4 > .et_pb_column.et-last-child {
    margin-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  body.page-id-1139 .et_pb_row_4 > .et_pb_column {
    width: 100%;
    margin-right: 0;
  }
}

/* change#5 "How Saturnique Empowers Your Change Initiatives" (.et_pb_section_4;
   five heading+text / image pairs — rows 6-10, text cols 11/13/15/17/19,
   image cols 12/14/16/18/20, images .et_pb_image_2-6).
   (a) no drop shadows anywhere — the image wraps carry one, columns 18/19/20
       another.
   (b) a donor width pinned each column to ~30% and the row centred the pair,
       leaving wide empty margins; restore a filled 50/50 with a wider 8%
       column-gap so text and image get more space between them. Content-row
       columns are zeroed of their side padding (donor left 14px on cols
       18-20 only) so every image fills its column edge to edge.
   (c) images fill at natural aspect — the compile forced a fixed height with
       object-fit:cover (centre-crop); drop the crop.
   (d) phone: columns full width at the 30px inset (donor kept them narrow and
       centred); image-then-text is already the order (compiled
       column-reverse), just even the vertical gap to 30px. */
body.page-id-1139 .et_pb_section_4 .et_pb_column,
body.page-id-1139 .et_pb_section_4 .et_pb_image_wrap {
  box-shadow: none !important;
}
body.page-id-1139 .et_pb_row_6 > .et_pb_column,
body.page-id-1139 .et_pb_row_7 > .et_pb_column,
body.page-id-1139 .et_pb_row_8 > .et_pb_column,
body.page-id-1139 .et_pb_row_9 > .et_pb_column,
body.page-id-1139 .et_pb_row_10 > .et_pb_column {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.page-id-1139 .et_pb_section_4 .et_pb_image {
  width: 100% !important;
}
body.page-id-1139 .et_pb_section_4 .et_pb_image img {
  width: 100% !important;
  height: auto !important;
  object-fit: fill !important;
}
/* (e) 2026-07-18 — Ali: every image the same size as New-Project-4.jpg
   (800x557). Four of the five already share that aspect; .et_pb_image_6's
   source is 576x280, so pin the 800/557 box on all of them and let the odd
   one cover-crop rather than stretch. */
body.page-id-1139 .et_pb_section_4 .et_pb_image img {
  aspect-ratio: 800 / 557 !important;
  object-fit: cover !important;
}
/* (h) 2026-07-20 — Ali: same image width, two-thirds the height. The box is
   width:100% of the column, so shortening it means a wider ratio:
   800 / (557 * 2/3) = 2400 / 1114. object-fit:cover (from (e)) keeps each
   photo's own aspect ratio and centre-crops the top/bottom instead of
   squashing it. Placed after (e) so it wins on aspect-ratio. */
body.page-id-1139 .et_pb_section_4 .et_pb_image img {
  aspect-ratio: 2400 / 1114 !important;
}
/* (f) 2026-07-18 — Ali: heading + text start at the top of their column so
   each heading lines up with the top of the image beside it. The compile
   centred some text columns (e.g. .et_pb_column_17) and left others at
   start; force flex-start on both halves of every pair. The row also
   cross-axis-centred the (shorter) text column against the image column,
   pushing each heading ~60-80px down — align-items:flex-start on the row
   is what actually lines the heading up with the top of its image. */
body.page-id-1139 .et_pb_row_6,
body.page-id-1139 .et_pb_row_7,
body.page-id-1139 .et_pb_row_8,
body.page-id-1139 .et_pb_row_9,
body.page-id-1139 .et_pb_row_10 {
  align-items: flex-start !important;
}
/* (g) 2026-07-18 — Ali: centre every heading in the section (the section
   title .et_pb_heading_5 plus the five pair headings 6-10). Body copy keeps
   its left alignment. */
body.page-id-1139 .et_pb_section_4 .et_pb_heading .et_pb_module_header {
  text-align: center !important;
}
body.page-id-1139 .et_pb_row_6 > .et_pb_column,
body.page-id-1139 .et_pb_row_7 > .et_pb_column,
body.page-id-1139 .et_pb_row_8 > .et_pb_column,
body.page-id-1139 .et_pb_row_9 > .et_pb_column,
body.page-id-1139 .et_pb_row_10 > .et_pb_column {
  justify-content: flex-start !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
@media only screen and (min-width: 768px) {
  body.page-id-1139 .et_pb_row_6 > .et_pb_column,
  body.page-id-1139 .et_pb_row_7 > .et_pb_column,
  body.page-id-1139 .et_pb_row_8 > .et_pb_column,
  body.page-id-1139 .et_pb_row_9 > .et_pb_column,
  body.page-id-1139 .et_pb_row_10 > .et_pb_column {
    width: calc(50% - 8% * 0.5) !important;
    flex-grow: 0;
  }
  body.page-id-1139 .et_pb_row_6,
  body.page-id-1139 .et_pb_row_7,
  body.page-id-1139 .et_pb_row_8,
  body.page-id-1139 .et_pb_row_9,
  body.page-id-1139 .et_pb_row_10 {
    column-gap: 8% !important;
  }
}
@media only screen and (max-width: 767px) {
  body.page-id-1139 .et_pb_row_6 > .et_pb_column,
  body.page-id-1139 .et_pb_row_7 > .et_pb_column,
  body.page-id-1139 .et_pb_row_8 > .et_pb_column,
  body.page-id-1139 .et_pb_row_9 > .et_pb_column,
  body.page-id-1139 .et_pb_row_10 > .et_pb_column {
    width: 100% !important;
  }
  body.page-id-1139 .et_pb_row_6,
  body.page-id-1139 .et_pb_row_7,
  body.page-id-1139 .et_pb_row_8,
  body.page-id-1139 .et_pb_row_9,
  body.page-id-1139 .et_pb_row_10 {
    row-gap: 30px !important;
  }
}
/* (i) 2026-07-20 — Ali: (1) the five pair headings ("Impact Assessment" and
   everything below it) left-align; the section title .et_pb_heading_5 stays
   centred, so (g)'s blanket centre is narrowed to that one heading.
   (2) more air between the pair rows.
   (3) the body copy under each heading reads as bullet points — the source is
   two <p> per text module, so make each paragraph a list item rather than
   rewriting the markup. */
body.page-id-1139 .et_pb_section_4 .et_pb_heading_5 .et_pb_module_header {
  text-align: center !important;
}
body.page-id-1139 .et_pb_section_4 .et_pb_row_6 .et_pb_heading .et_pb_module_header,
body.page-id-1139 .et_pb_section_4 .et_pb_row_7 .et_pb_heading .et_pb_module_header,
body.page-id-1139 .et_pb_section_4 .et_pb_row_8 .et_pb_heading .et_pb_module_header,
body.page-id-1139 .et_pb_section_4 .et_pb_row_9 .et_pb_heading .et_pb_module_header,
body.page-id-1139 .et_pb_section_4 .et_pb_row_10 .et_pb_heading .et_pb_module_header {
  text-align: left !important;
}
/* .et_pb_heading_8 ("Communication Strategy") was compiled with
   align-self:center, so its shrink-to-fit box sat ~56px in from the column
   edge; stretch every pair heading so all five start flush left. */
body.page-id-1139 .et_pb_row_6 .et_pb_heading,
body.page-id-1139 .et_pb_row_7 .et_pb_heading,
body.page-id-1139 .et_pb_row_8 .et_pb_heading,
body.page-id-1139 .et_pb_row_9 .et_pb_heading,
body.page-id-1139 .et_pb_row_10 .et_pb_heading {
  align-self: stretch !important;
}
/* (j) 2026-07-20 — Ali: the "Stakeholder Engagement" copy ran narrow. Its text
   module .et_pb_text_4 was compiled with max-width:70% (369px in a 527px
   column); the other four carry none. Drop the cap on all five so every
   block fills its column. */
body.page-id-1139 .et_pb_row_6 .et_pb_text,
body.page-id-1139 .et_pb_row_7 .et_pb_text,
body.page-id-1139 .et_pb_row_8 .et_pb_text,
body.page-id-1139 .et_pb_row_9 .et_pb_text,
body.page-id-1139 .et_pb_row_10 .et_pb_text {
  max-width: none !important;
}
body.page-id-1139 .et_pb_row_6,
body.page-id-1139 .et_pb_row_7,
body.page-id-1139 .et_pb_row_8,
body.page-id-1139 .et_pb_row_9 {
  margin-bottom: 80px !important;
}
body.page-id-1139 .et_pb_row_6 .et_pb_text_inner > p,
body.page-id-1139 .et_pb_row_7 .et_pb_text_inner > p,
body.page-id-1139 .et_pb_row_8 .et_pb_text_inner > p,
body.page-id-1139 .et_pb_row_9 .et_pb_text_inner > p,
body.page-id-1139 .et_pb_row_10 .et_pb_text_inner > p {
  display: list-item !important;
  list-style: disc outside !important;
  margin-left: 1.2em !important;
  padding-bottom: 0.6em !important;
  text-align: left !important;
}

/* change#7 CTA "Ready for Change That Actually Delivers?" (.et_pb_section_6) —
   Ali: style it exactly like the about-us CTA (about#10). The card row, its
   watermark, 1px border, 14px radius and shadow already match the reference;
   the divergences are: the card row (.et_pb_row_13) was capped at
   max-width:800px (about's is the 1080px default); the text+button column
   (.et_pb_column_24) drew its own 1px border + drop shadow (about strips both
   inner columns); and the heading (.et_pb_heading_12) was left-aligned where
   about's is centred. Both inner columns take the reference 20px padding. */
body.page-id-1139 .et_pb_row_13 {
  max-width: 1080px !important;
}
body.page-id-1139 .et_pb_column_23,
body.page-id-1139 .et_pb_column_24 {
  padding: 20px;
  border: none;
  box-shadow: none !important;
}
body.page-id-1139 .et_pb_heading_12 .et_pb_heading_container h1,
body.page-id-1139 .et_pb_heading_12 .et_pb_heading_container h2,
body.page-id-1139 .et_pb_heading_12 .et_pb_heading_container h3,
body.page-id-1139 .et_pb_heading_12 .et_pb_heading_container h4,
body.page-id-1139 .et_pb_heading_12 .et_pb_heading_container h5,
body.page-id-1139 .et_pb_heading_12 .et_pb_heading_container h6 {
  text-align: center;
}

/* Global (Ali): every section matches the hero's 30px content inset on phone.
   The hero (.et_pb_section_1) content sits 30px from each edge. The only
   plain (non-card) section that over-indented was change#3's intro: its row
   (.et_pb_row_2) stacks its own 30px side padding on the section's 30px
   (→ 60px). change#4's heading is handled by the column_5 padding:0 above, and
   change#5's pairs by the phone width:100% above. The blur-box cards and the
   CTA card keep their internal padding — their card edge already sits at 30px. */
@media only screen and (max-width: 767px) {
  body.page-id-1139 .et_pb_row_2.et_pb_row {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   career#1 hero (page-id-1152: .et_pb_section_0; row .et_pb_row_0, heading
   col .et_pb_column_0, image+text col .et_pb_column_1; phone dup
   .et_pb_section_1 with row_1 / column_2 / column_3)
   2026-07-06 — same Divi 5 donor pollution as the about#1/services#1 heroes
   (see memory: divi5-frontend-render-regression): row-reverse flipped
   heading/image, margin-left:-13vw dragged the image off the left viewport
   edge. The donor Multi-View entries (runtime img-src swap to home's hero
   images on breakpoint change) were removed in career/index.html, not here.
   -------------------------------------------------------------------------- */
body.page-id-1152 .et_pb_row_0 {
  flex-direction: row; /* donor row-reverse at every breakpoint */
}
body.page-id-1152 .et_pb_image_0 {
  margin-left: 0 !important; /* donor -13vw desktop / -5vw tablet, !important */
}
/* the compiled skewX(-5deg) tilt stays — authored, same as the about hero */

/* phantom compiler-injected margin-bottom:200px (+30px padding) pushed the
   heading above the row's vertical center (same phantom as about#1 and
   services#1, see memory: divi5-frontend-render-regression) */
body.page-id-1152 .et_pb_heading_0 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* hero row compiled with bottom-only 30px padding (top 0) — content sat
   15px above the row's vertical center; balance it like services/about */
body.page-id-1152 .et_pb_row_0.et_pb_row {
  padding-top: 30px !important;
}

/* tablet (768–980): compiled `height:400px; width:auto` blew the photo up
   inside the overflow:hidden wrap; this page's compile has no object-fit
   rule for the hero img (.wp-image-2790). Match the about#1 hero treatment:
   column-wide 400px frame, object-fit:cover center crop. */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  body.page-id-1152 .et_pb_image_0 .et_pb_image_wrap img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
}

/* phone hero is the duplicate section_1 (section_0 is display:none ≤767).
   Fixed 85vh row height + 20px row-gap + 50px heading-column padding made
   the stacked heading/image/text gaps uneven. Even 30px everywhere, same
   recipe as the about#1/services#1 heroes. */
@media only screen and (max-width: 767px) {
  body.page-id-1152 .et_pb_row_1 {
    height: auto;
    row-gap: 30px;
  }
  body.page-id-1152 .et_pb_column_2 {
    padding-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   contact#1 hero (page-id-1158: .et_pb_section_0; row .et_pb_row_0, heading
   col .et_pb_column_0, image+text col .et_pb_column_1; phone dup
   .et_pb_section_1 with row_1 / column_2 / column_3)
   2026-07-06 — same Divi 5 donor pollution as the services#1 hero (see
   memory: divi5-frontend-render-regression): row-reverse flipped
   heading/image, margin-left:-13vw (!) dragged the image off the left
   viewport edge, phantom 200px heading margin, tablet height:400px/width:auto
   blow-up. The donor Multi-View JS blob (runtime img-src swap to home's hero
   images on breakpoint change) is pruned in contact-us/index.html, not here —
   two legit setContent entries (this page's own text-card variants) stay.
   -------------------------------------------------------------------------- */
body.page-id-1158 .et_pb_row_0 {
  flex-direction: row; /* donor row-reverse at every breakpoint */
}
body.page-id-1158 .et_pb_image_0 {
  margin-left: 0 !important; /* donor -13vw desktop / -5vw tablet, !important */
}
/* the compiled skewX(-5deg) tilt stays — same effect as the about hero */

/* phantom compiler-injected margin-bottom:200px (+30px padding) pushed the
   heading 100px above the row's vertical center (same phantom as about#1 /
   services#1, see memory: divi5-frontend-render-regression) */
body.page-id-1158 .et_pb_heading_0 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* tablet (768–980): match the about#1 hero image treatment — fixed 400px
   tall frame at column width, object-fit:cover center crop. This page's
   compile only carries object-fit:cover for .wp-image-287 (the ABOUT hero's
   image — donor leak); its own hero img is .wp-image-431, so the compiled
   `height:400px; width:auto` blew the photo up inside overflow:hidden. */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  body.page-id-1158 .et_pb_image_0 .et_pb_image_wrap img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
}

/* phone hero is the duplicate section_1 (section_0 is display:none ≤767).
   Order is already heading → image → text; fixed 85vh row height + 50px
   heading-column padding vs 20px flex gap made the stack uneven. Even 30px
   everywhere, same recipe as the about#1 / services#1 heroes. */
@media only screen and (max-width: 767px) {
  body.page-id-1158 .et_pb_row_1 {
    height: auto;
    row-gap: 30px;
  }
  body.page-id-1158 .et_pb_column_2 {
    padding-bottom: 0;
  }
  /* donor absolute overlay (bottom:-07px) hung the text card over the image */
  body.page-id-1158 .et_pb_text_1 {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Legal pages: privacy-policy (page-id-3), data-policy (page-id-2026),
   terms-and-conditions (page-id-2020) — 2026-07-06
   All three share one layout (row_0: H1 + effective-date text_0; row_1:
   column_1 with every section) and the exact same Divi 5 donor pollution
   (see memory: divi5-frontend-render-regression). The donor hero recipe
   turned the article into a broken collage: fixed row heights (200px /
   85vh / 100vh) + vertical centering shoved the ~4000px content column out
   both ends of an overflow:hidden section (title clipped under the ticker,
   body text overlapping), and text_0 became an absolute-positioned hero
   card floating mid-page. Ali also asked to drop the section background
   image on all three. One grouped block since the damage is identical.
   -------------------------------------------------------------------------- */

/* Ali: no background image on these pages (compiled unnamed-1.png, cover) */
body.page-id-3 .et_pb_section_0,
body.page-id-2026 .et_pb_section_0,
body.page-id-2020 .et_pb_section_0 {
  background-image: none !important;
}

/* donor fixed heights + vertical centering (height:200px/85vh base,
   100vh/85vh ≤767) — rows must grow with the article text */
body.page-id-3 .et_pb_row_0,
body.page-id-3 .et_pb_row_1,
body.page-id-2026 .et_pb_row_0,
body.page-id-2026 .et_pb_row_1,
body.page-id-2020 .et_pb_row_0,
body.page-id-2020 .et_pb_row_1 {
  height: auto !important;
}

/* phantom compiler margin-bottom:200px on the H1 module (same phantom as
   about#1/services#1) left a huge hole between the title and the date */
body.page-id-3 .et_pb_heading_0,
body.page-id-2026 .et_pb_heading_0,
body.page-id-2020 .et_pb_heading_0 {
  margin-bottom: 0 !important;
}

/* donor hero text-card on the "Effective date" line: absolute-positioned
   280/340px rounded card (bottom:-40px right:0 desktop, translateX overlay
   ≤767) with its own bg + 20px padding — back to a plain flowing line */
body.page-id-3 .et_pb_text_0,
body.page-id-2026 .et_pb_text_0,
body.page-id-2020 .et_pb_text_0 {
  position: static !important;
  inset: auto !important;
  transform: none;
  width: auto;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent;
  border-radius: 0;
}

/* donor centered the content column around a collapsed box
   (justify-content:center base, height:00px ≤767) */
body.page-id-3 .et_pb_column_1,
body.page-id-2026 .et_pb_column_1,
body.page-id-2020 .et_pb_column_1 {
  height: auto;
  justify-content: flex-start;
}

/* 2026-07-06 — Ali: the effective-date line (and data-policy's intro, same
   row) sat 30px right of the article text. Compiled 30px side padding on the
   title row (row_1 has none); keep the vertical padding, align the sides. */
body.page-id-3 .et_pb_row_0.et_pb_row,
body.page-id-2026 .et_pb_row_0.et_pb_row,
body.page-id-2020 .et_pb_row_0.et_pb_row {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* the first bullet list (text_2) was compiled color:#ffffff!important —
   white-on-photo before, invisible on the plain background; match the #333
   body text like the rest of the article */
body.page-id-3 .et_pb_text_2 .et_pb_text_inner,
body.page-id-2026 .et_pb_text_2 .et_pb_text_inner,
body.page-id-2020 .et_pb_text_2 .et_pb_text_inner {
  color: #333 !important;
}

/* section headings compiled to a random mix — 38px centered (heading_1),
   32px centered (2, 5, 6, 7), 25px (data-policy 3–5), 32px left (rest).
   Unify on the majority style: 32px left, 28px on phone (matches the
   compiled ≤767 group rules). h3-only so the centered 44px H1 title keeps
   its authored look. */
body.page-id-3 .et-l--post .et_pb_heading h3.et_pb_module_header,
body.page-id-2026 .et-l--post .et_pb_heading h3.et_pb_module_header,
body.page-id-2020 .et-l--post .et_pb_heading h3.et_pb_module_header {
  font-size: 32px;
  text-align: left;
}
@media only screen and (max-width: 767px) {
  body.page-id-3 .et-l--post .et_pb_heading h3.et_pb_module_header,
  body.page-id-2026 .et-l--post .et_pb_heading h3.et_pb_module_header,
  body.page-id-2020 .et-l--post .et_pb_heading h3.et_pb_module_header {
    font-size: 28px;
  }
}

/* --------------------------------------------------------------------------
   career#3 "Welcome to Careers at Saturnique" intro (page-id-1152:
   .et_pb_section_2)
   2026-07-06 — Ali: section should not have a background image. Compiled CSS
   sets background-image:url(...New-Project-7-1.png)!important (the soft wash
   — exact same rule as the services#3 fix); remove it and let the authored
   #f6ffff background-color show. !important + body class needed to beat the
   Divi !important rule.
   -------------------------------------------------------------------------- */
body.page-id-1152 .et_pb_section_2 {
  background-image: none !important;
}
/* Ali follow-up: background → #fff. The compiled #f6ffff!important rides a
   4-class selector (.et-l--post>.et_builder_inner_content
   .et_pb_section.et_pb_section_2), so mirror it under the body class. */
body.page-id-1152 .et-l--post > .et_builder_inner_content .et_pb_section.et_pb_section_2 {
  background-color: #fff !important;
}
/* the paragraph compiled color:#ffffff!important (donor white-on-photo, same
   as the legal pages' text_2) — invisible on the pale background even before
   the image was dropped; match the #333 body text */
body.page-id-1152 .et_pb_text_2 .et_pb_text_inner {
  color: #333 !important;
}
/* Ali follow-up: phone gutter same as the hero above. The row stacks its own
   30px!important side padding on the section's 30px (60px total vs the
   hero's 30px). Zero it on phone only — tablet already compiles to 0 and
   desktop keeps its authored inset. */
@media only screen and (max-width: 767px) {
  body.page-id-1152 .et_pb_row_2.et_pb_row {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   career#4 "Who We Seek" (page-id-1152: .et_pb_section_3; heading row
   .et_pb_row_3 with .et_pb_heading_3, content row .et_pb_row_4, image col
   .et_pb_column_6 with .et_pb_image_2, text col .et_pb_column_7 with
   .et_pb_text_3)
   2026-07-06 — Ali: match the builder screenshot, heading centered. Donor
   damage (see memory: divi5-frontend-render-regression):
   (a) section background compiled to a hard linear-gradient(90deg,#1020a5
       50%,#fff 50%)!important, with the authored wash image shunted into a
       true-parallax span carrying inline background-blend-mode:difference —
       the span gets JS-sized to ~17000px, renders as inverted-color garbage
       and stalls the renderer (screenshots time out). Hide the parallax
       plumbing and put the wash back as a plain section background over the
       compiled white.
   (b) content row donor max-width:1280px!important + padding-left:30px
       !important — image stopped aligning with the 1080px heading row.
   (c) all three columns (heading .et_pb_column_5 included) carry the white
       card + New-Project-9.png wash. Ali follow-up: no card anywhere — the
       image goes bare (no white frame, no shadow) and bigger; heading and
       text sit directly on the section background.
   Heading: compiled h2 is already text-align:center at every breakpoint, so
   the centering Ali asked for needs no rule once the donor row is fixed.
   -------------------------------------------------------------------------- */
body.page-id-1152 .et_pb_section_3 {
  background-image: url(/wp-content/uploads/2026/02/New-Project-7-1.png) !important;
  background-size: cover;
}
body.page-id-1152 .et_pb_section_3 .et-pb-parallax-wrapper {
  display: none;
}
body.page-id-1152 .et_pb_row_4 {
  max-width: 1080px !important;
}
body.page-id-1152 .et_pb_row_4.et_pb_row {
  padding: 0 !important; /* donor 30px left desktop / 20px vertical tablet */
}
/* all three columns: no card at all — content directly on the section
   background. Dropping the image column's 30px white frame is also what
   makes the photo bigger (336px → full 396px column width at desktop) */
body.page-id-1152 .et_pb_column_5,
body.page-id-1152 .et_pb_column_6,
body.page-id-1152 .et_pb_column_7 {
  background-image: none;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Ali follow-up: no drop shadow on the image either; the 14px rounding
   stays. Width pinned to 100% (a compiled group rule drops .et_pb_image_2
   to 90% on one breakpoint). */
body.page-id-1152 .et_pb_image_2 {
  width: 100%;
}
body.page-id-1152 .et_pb_image_2 .et_pb_image_wrap {
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   career#5 "Career Opportunities" (page-id-1152: .et_pb_section_4; framed box
   .et_pb_row_5 > .et_pb_column_8; nested heading row .et_pb_row_6, nested
   content row .et_pb_row_8 > .et_pb_column_11 with .et_pb_text_4 + LinkedIn
   follow)
   2026-07-06 — Ali: (1) the box shouldn't have a background image — the card
   column compiles the New-Project-9.png wash; (2) widen the text so the box
   height drops: donor width:30% crushed the inner column to 262px and the
   paragraph carries the familiar donor max-width:70% on top (→183px, ~15
   wrapped lines). Full-width column + unconstrained paragraph brings the box
   back to a few lines.
   -------------------------------------------------------------------------- */
body.page-id-1152 .et_pb_column_8 {
  background-image: none;
  box-shadow: none; /* Ali follow-up: no drop shadow on the box; the 14px
                       #f2f2f2 row border stays */
}
body.page-id-1152 .et_pb_column_11 {
  width: 100%; /* donor 30% desktop / 45% smaller breakpoints */
}
body.page-id-1152 .et_pb_text_4 {
  max-width: none;
}
/* Ali follow-up: title looked lopsided on small phones. The box's stacked
   side paddings (30px section + 14px border + 30px card col + 20px heading
   col) leave the title 187px at a 375px viewport, but "Opportunities" is
   228px at the compiled 32px — the too-wide centered line gets pinned to the
   left edge and overflows right, reading as off-center. Drop the heading
   column's side padding and step the title to 28px so the longest word fits
   and both lines center; the 7.5vw floor keeps it fitting down to 320px
   (24px there). */
@media only screen and (max-width: 480px) {
  body.page-id-1152 .et_pb_column_9 {
    padding-left: 0;
    padding-right: 0;
  }
  body.page-id-1152 .et_pb_heading_4 .et_pb_heading_container h1,
  body.page-id-1152 .et_pb_heading_4 .et_pb_heading_container h2,
  body.page-id-1152 .et_pb_heading_4 .et_pb_heading_container h3,
  body.page-id-1152 .et_pb_heading_4 .et_pb_heading_container h4 {
    font-size: min(28px, 7.5vw);
  }
}

/* --------------------------------------------------------------------------
   career#6 "Send Your Resume" CTA (page-id-1152: .et_pb_section_5; card row
   .et_pb_row_9, heading col .et_pb_column_12 with .et_pb_heading_5,
   text+button col .et_pb_column_13 with .et_pb_text_5 + .et_pb_button_0)
   2026-07-06 — Ali: match the fixed about#10 / services#5 CTA styling
   (content untouched). The card row itself (watermark, faint blue border,
   14px radius, shadow, 50/30 padding) already matches the reference;
   divergences are all donor: (a) section background image New-Project-3.png
   !important (reference sections have none); (b) row max-width:1280px
   !important (reference card is 1080px); (c) columns crushed to width:30%
   (45% tablet) — heading, paragraph and button all wrapped inside 343px —
   instead of the reference's full-width 20px-padded columns; (d) h2 compiled
   text-align:left where the reference title is centered (left on phone only,
   as approved on services#5).
   -------------------------------------------------------------------------- */
body.page-id-1152 .et_pb_section_5 {
  background-image: none !important;
}
body.page-id-1152 .et_pb_row_9 {
  max-width: 1080px !important;
}
body.page-id-1152 .et_pb_column_12,
body.page-id-1152 .et_pb_column_13 {
  width: 100%;
  padding: 20px;
}
/* selector mirrors Divi's `.et_pb_heading_N .et_pb_heading_container hX` */
body.page-id-1152 .et_pb_heading_5 .et_pb_heading_container h1,
body.page-id-1152 .et_pb_heading_5 .et_pb_heading_container h2,
body.page-id-1152 .et_pb_heading_5 .et_pb_heading_container h3,
body.page-id-1152 .et_pb_heading_5 .et_pb_heading_container h4 {
  text-align: center;
}
@media only screen and (max-width: 767px) {
  body.page-id-1152 .et_pb_heading_5 .et_pb_heading_container h1,
  body.page-id-1152 .et_pb_heading_5 .et_pb_heading_container h2,
  body.page-id-1152 .et_pb_heading_5 .et_pb_heading_container h3,
  body.page-id-1152 .et_pb_heading_5 .et_pb_heading_container h4 {
    text-align: left;
  }
}

/* donor align-self:center!important on heading_8 (base + ≤980) — back to
   the column's flex-start flow like every other section heading */
body.page-id-3 .et_pb_heading_8,
body.page-id-2026 .et_pb_heading_8,
body.page-id-2020 .et_pb_heading_8 {
  align-self: auto !important;
}

/* data-policy's 2.1/2.2/2.3 (heading_3–5) are authored SUBsections at 25px —
   keep them below the 32px section size the block above unifies (same
   selector weight, later in file wins) */
body.page-id-2026 .et-l--post .et_pb_heading_3 h3.et_pb_module_header,
body.page-id-2026 .et-l--post .et_pb_heading_4 h3.et_pb_module_header,
body.page-id-2026 .et-l--post .et_pb_heading_5 h3.et_pb_module_header {
  font-size: 25px;
}
@media only screen and (max-width: 767px) {
  body.page-id-2026 .et-l--post .et_pb_heading_3 h3.et_pb_module_header,
  body.page-id-2026 .et-l--post .et_pb_heading_4 h3.et_pb_module_header,
  body.page-id-2026 .et-l--post .et_pb_heading_5 h3.et_pb_module_header {
    font-size: 22px;
  }
}

/* --------------------------------------------------------------------------
   contact#3 "Ways to Reach Us" + contact#4 call/contact-form (page-id-1158:
   .et_pb_section_2 / .et_pb_section_3, row .et_pb_row_3, blurbs col
   .et_pb_column_5, form col .et_pb_column_6) — 2026-07-06
   Ali: (1) section_2 loses its background; (2) its image moves to section_3,
   replacing the blue/white split gradient + parallax donor image (parallax
   span + JS data pruned in contact-us/index.html); (3) both cards lose the
   donor New-Project-9.png wash; (4) blurb icons normalized to 48px (the Call
   img was capped at max-width:32% of its 48px box = ~15px, the three font
   icons rendered full 48px); (5) the donor card preset's
   justify-content:space-between dumped the stretched form column's spare
   height (~55px, viewport-dependent) between the heading and the Full
   Name/Email row — top-align both cards instead.
   -------------------------------------------------------------------------- */
/* (1) no background on "Ways to Reach Us" (compiled values are !important;
   the tint ships under the (0,4,0) `.et-l--post > .et_builder_inner_content
   .et_pb_section.et_pb_section_2` selector — same donor strength as 843) */
body.page-id-1158 .et-l--post > .et_builder_inner_content .et_pb_section.et_pb_section_2 {
  background-image: none !important;
  background-color: #ffffff !important;
}

/* the section's intro paragraph ships color:#fff!important (donor) — it was
   already unreadable on the old pale-mint image, and invisible on the new
   white; match the site body color */
body.page-id-1158 .et_pb_text_2 .et_pb_text_inner {
  color: #333333 !important;
}

/* (2)+(3) section_3: section_2's former background instead of the
   blue/white gradient (compiled !important) */
body.page-id-1158 .et-l--post > .et_builder_inner_content .et_pb_section.et_pb_section_3,
body.page-id-1158 .et_pb_section_3 {
  background-image: url(/wp-content/uploads/2026/02/New-Project-7-1.png) !important;
  background-color: #f6ffff !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* (3) both cards: drop the donor image wash.
   2026-07-09 (Ali): remove the white card look entirely — no white fill, no
   rounded corners, no drop shadow. The icon/text stack and the form now sit
   directly on the section background. The 30px inner padding stays so nothing
   else shifts ("only the boxes"). Compiled values on the plain `.et_pb_column_N`
   rule aren't !important, and this body-class selector out-specifies it, so
   plain overrides win. */
body.page-id-1158 .et_pb_column_5,
body.page-id-1158 .et_pb_column_6 {
  background-image: none;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* 2026-07-09 (Ali) "any box shadow / drop shadow": the form's text inputs also
   carry a faint drop shadow (0px 12px 18px -6px rgba(0,0,0,0.03)); flatten them
   so nothing in the de-boxed form casts a shadow. Border + field background
   stay, so the inputs still read as fields. The compiled `.input:not(...)` rule
   out-specifies a plain selector here, so !important is needed. */
body.page-id-1158 .et_pb_contact_form_0 .et_pb_contact_field .input {
  box-shadow: none !important;
}

/* (4) consistent 48px icons on Call / Email / Business Hours (donor cap:
   max-width:32% of the 48px main_blurb_image box). The Mailing Address
   blurb (.et_pb_blurb_3) was removed from the markup 2026-07-10. */
body.page-id-1158 .et_pb_blurb_0 .et_pb_image_wrap,
body.page-id-1158 .et_pb_blurb_1 .et_pb_image_wrap,
body.page-id-1158 .et_pb_blurb_2 .et_pb_image_wrap {
  width: 48px;
  max-width: 48px;
}
body.page-id-1158 .et_pb_blurb_1 .et-pb-icon,
body.page-id-1158 .et_pb_blurb_2 .et-pb-icon {
  max-width: none;
  font-size: 48px;
}
/* blurb_0-only compiled margin-top:10px!important knocked the Call icon out
   of rhythm with the other three */
body.page-id-1158 .et_pb_blurb_0 .et_pb_main_blurb_image .et_pb_only_image_mode_wrap {
  margin-top: 0 !important;
}

/* (5) equal-height cards (Ali 2026-07-06): columns stretch to the row
   height (desktop +~48px, tablet +~103px spare in the form card). The donor
   preset's justify-content:space-between dumped that spare height between
   the heading and the Full Name/Email row — center the module stack instead,
   so the spare space splits evenly above the heading and below the Submit
   row (the 10px module gap stays fixed). On phone the columns stack
   full-width at natural height, so both rules are no-ops.
   2026-07-10 (Ali): the blurb column is top-aligned instead. Losing the
   Mailing Address blurb made it the shorter column, and centering parked
   ~43px of dead space above "Call"; that spare height now falls below the
   last divider, so "Call" starts level with the form heading. The form
   column keeps centering — it is the taller of the two, so its own spare
   height is zero and the rule only guards against the donor's
   space-between if that ever flips. */
body.page-id-1158 .et_pb_row_3 {
  align-items: stretch;
}
body.page-id-1158 .et_pb_column_5 {
  justify-content: flex-start;
}
body.page-id-1158 .et_pb_column_6 {
  justify-content: center;
}

/* (6) password-manager hardening: the form and each field are flex
   containers (row-gap 15px), so anything a browser extension injects
   (LastPass '•••' icon roots, etc.) becomes a flex item and opens a
   phantom ~30px row under whichever field it decorates — seen under Full
   Name with LastPass. Take foreign elements out of flow; Divi's own
   children (fields, labels, .input, checkbox wrapper, hidden inputs,
   bottom captcha/submit row) are exempt. */
body.page-id-1158 .et_pb_contact_form > :not(.et_pb_contact_field):not(.et_contact_bottom_container):not(input),
body.page-id-1158 .et_pb_contact_field[data-type] > :not(.et_pb_contact_form_label):not(.input):not(.et_pb_contact_field_options_wrapper):not(.et_pb_checkbox_handle) {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* (7) phone captcha/submit row: at ≤767 the 105px-min captcha box wraps
   "11 + 8 =" above its input (78px tall) and the flex-stretched Submit
   balloons to match. Stack instead: captcha line, then full-width Submit.
   (#page-container needed — the compiled margin-left:auto rule carries an
   ID and loads after this sheet.) */
@media only screen and (max-width: 767px) {
  body.page-id-1158 #page-container .et_pb_section .et_pb_contact_form_0 .et_contact_bottom_container {
    flex-direction: column;
    align-items: stretch;
    row-gap: 12px;
    width: 100%;
    margin-left: 0;
  }
  body.page-id-1158 .et_pb_contact_form_0 .et_pb_contact_right {
    min-width: 0;
    text-align: left;
  }
  body.page-id-1158 .et_pb_contact_form_0 .et_pb_contact_right p.clearfix label {
    display: flex;
    align-items: center;
    column-gap: 6px;
    white-space: nowrap;
  }
  body.page-id-1158 #page-container .et_pb_section .et_pb_contact_form_0 .et_pb_button_wrapper {
    text-align: center;
  }
  body.page-id-1158 #page-container .et_pb_section .et_pb_contact_form_0 .et_pb_contact_submit {
    width: 100%;
    margin-left: 0; /* compiled 18px left margin belongs to the inline desktop row */
  }
}

/* (8) 2026-07-10 — Ali: the "Email" heading (.et_pb_blurb_1) dropped to 18px
   below 980px while "Call" and "Our Business Hours" kept the 20px base size;
   the compiled ≤980 rule names blurb_1 alongside a pile of donor modules.
   Match the siblings at every width (line-height is em-based and follows). */
@media only screen and (max-width: 980px) {
  body.page-id-1158 .et_pb_blurb_1 .et_pb_module_header {
    font-size: 20px !important;
  }
}

/* --------------------------------------------------------------------------
   bookkeeping#3 "Bookkeeping & Cloud Accounting" intro (page-id-977:
   .et_pb_section_2)
   2026-07-06 — drop the compiled wavy background artwork (New-Project-7-1.png,
   !important) and the #f6ffff tint: plain #fff. The intro paragraph
   (.et_pb_text_2) compiled color:#fff!important — readable only on the old
   artwork — becomes the same black as the "Complimentary Service" paragraph
   below it (.et_pb_text_3 → --gcid-j751200n5u = #000).
   -------------------------------------------------------------------------- */
body.page-id-977 .et-l--post .et_pb_section.et_pb_section_2 {
  background-image: none !important;
  background-color: #fff !important;
}
body.page-id-977 .et_pb_text_2 .et_pb_text_inner {
  color: #000 !important;
}

/* --------------------------------------------------------------------------
   bookkeeping#4 section spacing (page-id-977: .et_pb_section_3)
   2026-07-14 — Ali: this section's top + bottom inner spacing must match the
   intro section above it (bookkeeping#3 / .et_pb_section_2). That section's
   whitespace = its section padding + its row padding, totalling 100/100 on
   desktop + tablet and 50/50 on phone. section_3 carries all its spacing on
   the section itself (rows _3/_5/_7/_9 are padding:0 top/bottom), so the section
   padding is set to those same totals. Was 80/100 desktop, 50/50 tablet,
   30/50 phone.
   -------------------------------------------------------------------------- */
body.page-id-977 .et_pb_section_3 {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}
@media only screen and (max-width: 767px) {
  body.page-id-977 .et_pb_section_3 {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

/* --------------------------------------------------------------------------
   bookkeeping#4 AR / AP / Payroll / Year-End (page-id-977: .et_pb_section_3;
   rows .et_pb_row_3 / _5 / _7 / _9)
   2026-07-14 — Ali: keep the original two-line layout (heading + intro on their
   own full-width row, then photo + blurb list side by side below), but box the
   heading + intro into ONE half-width column of that top row — the column on the
   same side as the blurb list. Result: the intro paragraph is now exactly the
   list's width (was ~820px, spanning both columns), left-aligns with the list,
   and the intro→list gap tightens to ~20px (was 70–85px). The photo is
   untouched — it still sits beside the list, not beside the heading.

   The header (.sq-svc-header) stays a flex-basis:100% band so it holds the top
   line by itself; its two children (heading module + intro text) are pinned to
   calc(50% - 40px) — the column width — and pushed to the list's side via the
   header's align-items: AR (_3) + Payroll (_7) list-left → flex-start; AP (_5) +
   Year-End (_9) list-right → flex-end. Text is left-aligned inside all four.
   Supersedes the 2026-07-06 full-width centred header and the 2026-07-12
   per-group right alignment. Phone (≤767px): header + children full width,
   stacked column; the existing phone order block keeps heading → intro → photo
   → list.
   -------------------------------------------------------------------------- */
body.page-id-977 .et_pb_row_3,
body.page-id-977 .et_pb_row_5,
body.page-id-977 .et_pb_row_7,
body.page-id-977 .et_pb_row_9 {
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
}
body.page-id-977 .sq-svc-header {
  width: 100%;
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  margin-bottom: 0;
}
body.page-id-977 .sq-svc-header .et_pb_module_header,
body.page-id-977 .sq-svc-header .et_pb_text_inner {
  text-align: left !important;
}
@media only screen and (min-width: 768px) {
  /* header row → its heading + intro sit in one half-width column */
  body.page-id-977 .sq-svc-header .et_pb_heading,
  body.page-id-977 .sq-svc-header .et_pb_text {
    width: calc(50% - 40px);
    max-width: calc(50% - 40px);
  }
  /* push that half-width block to the side the blurb list sits on */
  body.page-id-977 .et_pb_row_3 .sq-svc-header,
  body.page-id-977 .et_pb_row_7 .sq-svc-header {
    align-items: flex-start;   /* AR + Payroll: list on the left */
  }
  body.page-id-977 .et_pb_row_5 .sq-svc-header,
  body.page-id-977 .et_pb_row_9 .sq-svc-header {
    align-items: flex-end;     /* AP + Year-End: list on the right */
  }
  /* header → columns vertical gap (blurb list then adds its 15px top pad) */
  body.page-id-977 .et_pb_row_3,
  body.page-id-977 .et_pb_row_5,
  body.page-id-977 .et_pb_row_7,
  body.page-id-977 .et_pb_row_9 {
    row-gap: 5px !important;
  }
  /* photo + list columns: original half widths, side by side under the header */
  body.page-id-977 .et_pb_row_3 > .et_pb_column,
  body.page-id-977 .et_pb_row_5 > .et_pb_column,
  body.page-id-977 .et_pb_row_7 > .et_pb_column,
  body.page-id-977 .et_pb_row_9 > .et_pb_column {
    width: calc(50% - 40px) !important;
    max-width: calc(50% - 40px) !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
}
@media only screen and (max-width: 767px) {
  body.page-id-977 .et_pb_row_3,
  body.page-id-977 .et_pb_row_5,
  body.page-id-977 .et_pb_row_7,
  body.page-id-977 .et_pb_row_9 {
    flex-direction: column !important;
  }
  body.page-id-977 .sq-svc-header .et_pb_heading,
  body.page-id-977 .sq-svc-header .et_pb_text {
    width: 100%;
    max-width: 100%;
  }
  body.page-id-977 .et_pb_row_3 > .et_pb_column,
  body.page-id-977 .et_pb_row_5 > .et_pb_column,
  body.page-id-977 .et_pb_row_7 > .et_pb_column,
  body.page-id-977 .et_pb_row_9 > .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   bookkeeping#4 section heading sizes (page-id-977: .et_pb_heading_4–7 =
   Accounts Receivable / Accounts Payable / Payroll / Year-End)
   2026-07-14 — Ali: match the site-wide convention for these h3 service
   sub-headings. Surveyed the whole site: the identical h3 headings on the
   Services page (Cloud Accounting, Financial Analysis, Process, Change) and
   the Change page (Impact Assessment … Adoption & Reinforcement) are all
   uniformly 32px desktop / 26px tablet / 26px phone. Bookkeeping's four broke
   from that — tablet compiled to 28px on all four, and Payroll (heading_6)
   compiled to 32px on phone (the other three were already 26). One ≤980 rule
   (covers tablet + phone) pins all four to 26px there; desktop keeps its 32px.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 980px) {
  body.page-id-977 .et_pb_heading_4 .et_pb_module_header,
  body.page-id-977 .et_pb_heading_5 .et_pb_module_header,
  body.page-id-977 .et_pb_heading_6 .et_pb_module_header,
  body.page-id-977 .et_pb_heading_7 .et_pb_module_header {
    font-size: 26px !important;
  }
}
/* AP nested blurb columns (.et_pb_column_12–15 in .et_pb_row_6): donor
   width pinched all four to 174px of the 580px column, wrapping the text
   every couple of words. Full width like their AR/Payroll siblings. */
body.page-id-977 .et_pb_row_6 > .et_pb_column {
  width: 100% !important;
  max-width: 100% !important;
}
/* Year-End boxes (.et_pb_column_24 blurbs / _25 image): the compiled
   hsl(from …) border-color doesn't resolve and fell back to near-black
   (#333). Borders off; rounded corners + soft shadow stay. */
body.page-id-977 .et_pb_column_24,
body.page-id-977 .et_pb_column_25 {
  border: none !important;
}

/* --------------------------------------------------------------------------
   bookkeeping#5 "Cloud Accounting Integration" (page-id-977: .et_pb_section_4;
   heading box .et_pb_column_26, image box .et_pb_column_27)
   2026-07-06 — same unresolved hsl(from …) border-color as the Year-End
   boxes: both boxes drew a 1px near-black frame. Borders off; the rounded
   corners + soft shadows stay.
   -------------------------------------------------------------------------- */
body.page-id-977 .et_pb_column_26,
body.page-id-977 .et_pb_column_27 {
  border: none !important;
}

/* --------------------------------------------------------------------------
   bookkeeping#6 "What We Provide" (page-id-977: .et_pb_section_5; blurb card
   row .et_pb_row_14, columns .et_pb_column_29/_30, blurbs 15–20)
   2026-07-06 — de-card the blurb block: compiled row background texture
   (New-Project-9.png), 1px border and drop shadow all off, plus the
   section's own wavy background artwork (New-Project-3.png, !important).
   Section top padding was 0 ("What We Provide" sat on the section's top
   edge) — 50px top/bottom, same as section_4 above it. The two 24/24
   columns stacked all six blurbs in a single column; side-by-side 50%
   ≥768px restores the two-column icon/heading/text layout.
   -------------------------------------------------------------------------- */
body.page-id-977 .et-l--post .et_pb_section.et_pb_section_5 {
  background-image: none !important;
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}
body.page-id-977 .et_pb_row_14 {
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}
@media only screen and (min-width: 768px) {
  body.page-id-977 .et_pb_row_14 {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }
  body.page-id-977 .et_pb_row_14 > .et_pb_column {
    /* same 5.5% compiled column-gap as the section_3 rows — 50%-40px keeps
       the pair on one line */
    width: calc(50% - 40px) !important;
    max-width: calc(50% - 40px) !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    align-self: flex-start !important; /* compiled align-self:center sank the shorter column */
  }
}

/* --------------------------------------------------------------------------
   bookkeeping#7 "Cloud Accounting Platforms" (page-id-977: .et_pb_section_6;
   logo images .et_pb_image_6–13 in nested rows 16/17)
   2026-07-06 — logo sizing was per-image compiled px with no regard for the
   source ratios (Wave, 150×43 natural, was stretched to 100×495). Uniform
   tiles instead: a fixed-height flex box per logo, each image scaling
   inside at its own aspect ratio.
   -------------------------------------------------------------------------- */
body.page-id-977 .et_pb_section_6 .et_pb_image {
  width: 100% !important;
  max-width: 100% !important; /* compiled max-width:100px clipped the Wave logo */
  margin: 0 !important;
}
body.page-id-977 .et_pb_section_6 .et_pb_image a {
  display: block;
  width: 100%;
}
body.page-id-977 .et_pb_section_6 .et_pb_image .et_pb_image_wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 110px !important;
  /* Wave inherited the photo-frame treatment (radius+shadow+clip) — none of
     the other logo tiles have it */
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body.page-id-977 .et_pb_section_6 .et_pb_image img {
  width: auto !important;
  height: auto !important;
  max-width: 170px !important;
  max-height: 100px !important;
  object-fit: contain !important;
}

/* --------------------------------------------------------------------------
   bookkeeping phone gutter normalization (page-id-977, ≤767px)
   2026-07-06 — Ali: every section's content should sit exactly as far from
   the viewport edges as the hero's (section pad 30px + nothing else = 30px).
   Compiled mobile CSS stacked extra horizontal padding on top of the
   section's 30px in several places (or centered narrow images), pushing
   content to 44–90px. Visible CARDS already at 30px are left alone — their
   own padding is part of the card design (hero text card, AR white
   container, Payroll shadowed columns, Year-End blurb card, FAQ toggles,
   CTA card). Fixed to 30px here:
   - #3 intro text row (.et_pb_row_2, +30px row padding)
   - #4 photos: host columns .et_pb_column_10/_25 (+20px padding) and the
     images 2–5 themselves (compiled width:81–90% + auto margins)
   - #5 image box row (.et_pb_row_12, +30px row padding — its heading box
     row_11 already sat at 30px)
   - #6 heading + blurbs rows (.et_pb_row_13/_14, +30px row padding)
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  body.page-id-977 .et_pb_row_2,
  body.page-id-977 .et_pb_row_12,
  body.page-id-977 .et_pb_row_13,
  body.page-id-977 .et_pb_row_14 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.page-id-977 .et_pb_column_10,
  body.page-id-977 .et_pb_column_25 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.page-id-977 .et_pb_image_2,
  body.page-id-977 .et_pb_image_3,
  body.page-id-977 .et_pb_image_4,
  body.page-id-977 .et_pb_image_5 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   bookkeeping#4 shadow purge (page-id-977: .et_pb_section_3)
   2026-07-06 — Ali: no element in this section may carry any drop/box
   shadow at any resolution. Audit found box-shadows on the AR white
   container (.et_pb_column_5), the AR blurb cards (_6–_9), the Payroll
   cards (_18–_21), the Year-End blurb card (_24) and the four photo
   wraps (.et_pb_image_2–5 .et_pb_image_wrap); no filter drop-shadows or
   text-shadows anywhere. Blanket kill, deliberately outside any media
   query.
   -------------------------------------------------------------------------- */
body.page-id-977 .et_pb_section_3,
body.page-id-977 .et_pb_section_3 * {
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   bookkeeping#4 de-boxed service groups (page-id-977: containers
   .et_pb_column_5 / _11 / _17 / _24; items _6–9 / _12–15 / _18–21 and
   .et_pb_column_24's blurbs)
   2026-07-12 — Ali: remove the four white boxes entirely — no white fill, no
   rounded card, no box/drop shadow (shadows already killed by the purge block
   above). The content stays and now sits directly on the section background.
   Container fill/radius/padding all drop to 0 so nothing is indented by the
   now-invisible card: each group's blurbs align flush with its heading (left
   groups) or fill the same right-hand band (right groups). The 1px #ececec
   separators are the only divider that remains.
   Inter-item spacing is halved and made uniform: was 30px item pad-bottom +
   10px row-gap + 30px item pad-top = 70px (and 90px on items whose description
   is a nested .et_pb_blurb_3 carrying a stray 20px pad-bottom). Now 15px pad +
   5px row-gap + 15px pad = a uniform 35px, the stray 20px zeroed. Item
   left/right padding is 0 (flush edges + full-width separators). See the
   responsive block below for the halved ≤980 / ≤767 values.
   -------------------------------------------------------------------------- */
body.page-id-977 .et_pb_column_5,
body.page-id-977 .et_pb_column_11,
body.page-id-977 .et_pb_column_17,
body.page-id-977 .et_pb_column_24 {
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
/* the nested flex rows (AR/AP/Payroll) and the Year-End container carry the
   10px row-gap between items — halve to 5px */
body.page-id-977 .et_pb_row_4,
body.page-id-977 .et_pb_row_6,
body.page-id-977 .et_pb_row_8,
body.page-id-977 .et_pb_column_24 {
  row-gap: 5px !important;
}
/* items: transparent, no card, half vertical padding, flush horizontally */
body.page-id-977 .et_pb_column_6,
body.page-id-977 .et_pb_column_7,
body.page-id-977 .et_pb_column_8,
body.page-id-977 .et_pb_column_9,
body.page-id-977 .et_pb_column_12,
body.page-id-977 .et_pb_column_13,
body.page-id-977 .et_pb_column_14,
body.page-id-977 .et_pb_column_15,
body.page-id-977 .et_pb_column_18,
body.page-id-977 .et_pb_column_19,
body.page-id-977 .et_pb_column_20,
body.page-id-977 .et_pb_column_21,
body.page-id-977 .et_pb_column_24 > .et_pb_blurb {
  background-color: transparent !important;
  background-image: none !important;
  padding: 15px 0 !important;
}
/* zero the stray 20px pad-bottom on nested description blurbs so every item's
   spacing is uniform (the h6's own 10px pad-bottom, the title→text gap, stays) */
body.page-id-977 .et_pb_section_3 .et_pb_blurb_3 {
  padding-bottom: 0 !important;
}
/* 1px #ececec separator between consecutive items (all but the last of each
   group); spans the full column width now that horizontal padding is 0 */
body.page-id-977 .et_pb_column_6,
body.page-id-977 .et_pb_column_7,
body.page-id-977 .et_pb_column_8,
body.page-id-977 .et_pb_column_12,
body.page-id-977 .et_pb_column_13,
body.page-id-977 .et_pb_column_14,
body.page-id-977 .et_pb_column_18,
body.page-id-977 .et_pb_column_19,
body.page-id-977 .et_pb_column_20,
body.page-id-977 .et_pb_column_24 > .et_pb_blurb_12,
body.page-id-977 .et_pb_column_24 > .et_pb_blurb_13 {
  border-bottom: 1px solid #ececec;
}

/* bookkeeping#4 AR blurb heading sizes: superseded 2026-07-18 by the inline
   lead-in block below. The item titles are no longer headings at any width —
   they render at the 18px body size like the rest of the sentence — so the
   ≤980px 24px match for "Collections Management" / "Reporting & Analytics"
   has nothing left to equalize. */

/* --------------------------------------------------------------------------
   bookkeeping#4 item titles → inline blue lead-ins (page-id-977:
   .et_pb_section_3, the 15 h6.et_pb_module_header item titles across the
   AR / AP / Payroll / Year-End groups)
   2026-07-18 — Ali: make every item title read like the "Complimentary
   Service" line in bookkeeping#3 — bold blue text, not a heading — with its
   description running on in the same paragraph after a "-".
   Reference (.et_pb_text_3): Open Sans 18px, <strong> in #1020a5, then an
   unbolded "- " in body colour, then the sentence. Matched here exactly:
   the h6 drops from Poppins 600 24px to Open Sans 700 18px, and both it and
   its description collapse to display:inline so they share one line box.
   The separator is a ::before on the description (not an ::after on the
   title) so the dash inherits the description's body colour and normal
   weight, exactly as it does in the markup of the reference line.
   The h6 tags stay in the HTML — this is a visual demotion only, so the
   markup keeps working if the styling is ever reverted.
   Two description shapes exist in this section: a bare <p>, and a nested
   .et_pb_column_3 > .et_pb_group_3 > .et_pb_blurb_3 wrapper chain around
   the <p>. The descendant `*` rule flattens both to inline, overriding the
   compiled flex display on those wrappers.
   -------------------------------------------------------------------------- */
/* the container is a flex item of .et_pb_blurb_content, which the compiled CSS
   sets to align-items:flex-start. Block children used to hold it at full
   width; once its children are inline it shrink-wraps to the longest word and
   the text wraps every couple of words — so stretch it back explicitly. */
body.page-id-977 .et_pb_section_3 .et_pb_blurb_container {
  display: block !important;
  width: 100% !important;
  align-self: stretch !important;
}
body.page-id-977 .et_pb_section_3 .et_pb_blurb_container > h6.et_pb_module_header {
  display: inline !important;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.7em !important;
  color: #1020a5 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.page-id-977 .et_pb_section_3 .et_pb_blurb_container > h6.et_pb_module_header + .et_pb_blurb_description,
body.page-id-977 .et_pb_section_3 .et_pb_blurb_container > h6.et_pb_module_header + .et_pb_blurb_description * {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* leading space collapses against any trailing space already in the title
   text ("Collections Management "), so the gap is a single space either way */
body.page-id-977 .et_pb_section_3 .et_pb_blurb_container > h6.et_pb_module_header + .et_pb_blurb_description::before {
  content: " - ";
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   bookkeeping#4 de-boxed groups — responsive item spacing (page-id-977)
   2026-07-12 — halve the inter-item spacing at every breakpoint like the base:
   ≤980 items 7.5px top/bottom (was 15), ≤767 items 5px (was 10); horizontal
   stays 0. Containers are padding:0 at all widths (base !important). The
   compiled ≤980 rule that adds 20px top/bottom padding to the nested rows
   4/6/8/10 is zeroed so it can't re-inflate the vertical inset.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 980px) {
  body.page-id-977 .et_pb_column_6,
  body.page-id-977 .et_pb_column_7,
  body.page-id-977 .et_pb_column_8,
  body.page-id-977 .et_pb_column_9,
  body.page-id-977 .et_pb_column_12,
  body.page-id-977 .et_pb_column_13,
  body.page-id-977 .et_pb_column_14,
  body.page-id-977 .et_pb_column_15,
  body.page-id-977 .et_pb_column_18,
  body.page-id-977 .et_pb_column_19,
  body.page-id-977 .et_pb_column_20,
  body.page-id-977 .et_pb_column_21,
  body.page-id-977 .et_pb_column_24 > .et_pb_blurb {
    padding: 7.5px 0 !important;
  }
  body.page-id-977 .et_pb_row_4,
  body.page-id-977 .et_pb_row_6,
  body.page-id-977 .et_pb_row_8,
  body.page-id-977 .et_pb_row_10 {
    padding: 0 !important;
  }
}
@media only screen and (max-width: 767px) {
  body.page-id-977 .et_pb_column_6,
  body.page-id-977 .et_pb_column_7,
  body.page-id-977 .et_pb_column_8,
  body.page-id-977 .et_pb_column_9,
  body.page-id-977 .et_pb_column_12,
  body.page-id-977 .et_pb_column_13,
  body.page-id-977 .et_pb_column_14,
  body.page-id-977 .et_pb_column_15,
  body.page-id-977 .et_pb_column_18,
  body.page-id-977 .et_pb_column_19,
  body.page-id-977 .et_pb_column_20,
  body.page-id-977 .et_pb_column_21,
  body.page-id-977 .et_pb_column_24 > .et_pb_blurb {
    padding: 5px 0 !important;
  }
}

/* bookkeeping#4 AP / Payroll / Year-End boxes: folded into the unified
   de-boxed treatment above (2026-07-12). Containers _11/_17/_24 and their
   items _12–15 / _18–21 / _24's blurbs are handled by the same rules as the
   AR group, so this block (previously the #fff-box replica) is gone. */

/* the nested blurb rows are stacked lists at every width by design, but a
   donor ≤980 rule flips .et_pb_row_8 to flex-direction:row/nowrap and
   pinches Payroll's four columns to 30px slivers. Pin all four nested rows
   to stacked full-width at every resolution (supersedes the earlier
   row_6-only width fix). */
body.page-id-977 .et_pb_row_4,
body.page-id-977 .et_pb_row_6,
body.page-id-977 .et_pb_row_8,
body.page-id-977 .et_pb_row_10 {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}
body.page-id-977 .et_pb_row_4 > .et_pb_column,
body.page-id-977 .et_pb_row_6 > .et_pb_column,
body.page-id-977 .et_pb_row_8 > .et_pb_column,
body.page-id-977 .et_pb_row_10 > .et_pb_column {
  width: 100% !important;
  max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   bookkeeping#4 photos — top-aligned, natural aspect ratio (page-id-977:
   .et_pb_image_2–5 in columns _10/_16/_22/_25)
   2026-07-06 — Ali: all four photos top-aligned in their columns, width
   100% and height auto so the ratio survives every screen size. Compiled
   CSS forced fixed heights (480/460/450px — all four visibly squashed) and
   pushed the modules off the top (50px column padding on AR, 10px module
   margins on AP/Payroll, 20px column padding on Year-End, align-self:
   center everywhere). Rounded corners on the wraps stay.
   -------------------------------------------------------------------------- */
body.page-id-977 .et_pb_column_10,
body.page-id-977 .et_pb_column_16,
body.page-id-977 .et_pb_column_22,
body.page-id-977 .et_pb_column_25 {
  padding: 0 !important;
  justify-content: flex-start !important;
}
body.page-id-977 .et_pb_image_2,
body.page-id-977 .et_pb_image_3,
body.page-id-977 .et_pb_image_4,
body.page-id-977 .et_pb_image_5 {
  width: 100% !important;
  max-width: 100% !important;
  /* 2026-07-14 — Ali: 15px top margin on every photo (drops the top edge to
     line up with the first list item's heading, which sits 15px below the
     column top). Left/right/bottom stay 0 — that zeroed the compiled auto
     margins that used to push the image off-centre. */
  margin: 15px 0 0 0 !important;
  align-self: flex-start !important;
}
body.page-id-977 .et_pb_image_2 .et_pb_image_wrap,
body.page-id-977 .et_pb_image_3 .et_pb_image_wrap,
body.page-id-977 .et_pb_image_4 .et_pb_image_wrap,
body.page-id-977 .et_pb_image_5 .et_pb_image_wrap {
  width: 100% !important;
}
body.page-id-977 .et_pb_image_2 .et_pb_image_wrap img,
body.page-id-977 .et_pb_image_3 .et_pb_image_wrap img,
body.page-id-977 .et_pb_image_4 .et_pb_image_wrap img,
body.page-id-977 .et_pb_image_5 .et_pb_image_wrap img {
  width: 100% !important;
  height: auto !important;
}

/* --------------------------------------------------------------------------
   bookkeeping#4 phone stacking order (page-id-977, ≤767px)
   2026-07-06 — Ali: on phones each service row must stack heading → intro
   text → photo → white blurb box. The heading+text pair is the
   .sq-svc-header (already first); DOM order puts the blurb box before the
   photo, so the photo columns (_10/_16/_22/_25) are pulled ahead of the
   box columns (_5/_11/_17/_23) with flex order.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  body.page-id-977 .et_pb_row_3 > .sq-svc-header,
  body.page-id-977 .et_pb_row_5 > .sq-svc-header,
  body.page-id-977 .et_pb_row_7 > .sq-svc-header,
  body.page-id-977 .et_pb_row_9 > .sq-svc-header {
    order: 1;
  }
  body.page-id-977 .et_pb_column_10,
  body.page-id-977 .et_pb_column_16,
  body.page-id-977 .et_pb_column_22,
  body.page-id-977 .et_pb_column_25 {
    order: 2;
  }
  body.page-id-977 .et_pb_column_5,
  body.page-id-977 .et_pb_column_11,
  body.page-id-977 .et_pb_column_17,
  body.page-id-977 .et_pb_column_23 {
    order: 3;
  }
}

/* --------------------------------------------------------------------------
   bookkeeping#5 heading box shadow off (page-id-977: .et_pb_column_26)
   2026-07-06 — Ali: no drop/box shadow on the "Cloud Accounting
   Integration" heading (its border was already removed 2026-07-06; the
   soft compiled shadow now goes too).
   -------------------------------------------------------------------------- */
body.page-id-977 .et_pb_column_26,
body.page-id-977 .et_pb_column_26 * {
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   bookkeeping#5 heading→image gap halved (page-id-977: .et_pb_row_12)
   2026-07-06 — Ali: half the space between "Cloud Accounting Integration"
   and the image below it, at all three sizes. The gap = row_12's compiled
   40px padding-top + the section's row-gap (10px desktop/tablet, 30px
   phone): 50→25 via padding-top 15px, and 70→35 on phones via 5px.
   -------------------------------------------------------------------------- */
body.page-id-977 .et_pb_row_12 {
  padding-top: 15px !important;
}
@media only screen and (max-width: 767px) {
  body.page-id-977 .et_pb_row_12 {
    padding-top: 5px !important;
  }
}

/* --------------------------------------------------------------------------
   bookkeeping#6 intro→blurbs gap halved (page-id-977: .et_pb_section_5)
   2026-07-06 — Ali: half the space between "We provide a complete journey…"
   and the blurb block below, all three sizes. The 110px gap = 60px section
   row-gap + 50px row_14 padding-top at every width; row-gap 5px lands the
   total at 55px without touching the blurb row itself.
   -------------------------------------------------------------------------- */
body.page-id-977 .et-l--post .et_pb_section.et_pb_section_5 {
  row-gap: 5px !important;
}

/* --------------------------------------------------------------------------
   process#3 "Unlock Your Potential…" intro (page-id-1132: .et_pb_section_2)
   2026-07-06 — Ali: no background image, background #fff, paragraphs #333333.
   Same compile as career#3/financial#3: the New-Project-7-1.png wash rides
   `.et_pb_section_2` with !important, the tint rides the 4-class
   `.et-l--post>.et_builder_inner_content .et_pb_section.et_pb_section_2`
   (!important), and the paragraph carries the donor white-on-photo
   color:#fff!important on .et_pb_text_inner.
   -------------------------------------------------------------------------- */
body.page-id-1132 .et_pb_section_2 {
  background-image: none !important;
}
body.page-id-1132 .et-l--post > .et_builder_inner_content .et_pb_section.et_pb_section_2 {
  background-color: #fff !important;
}
body.page-id-1132 .et_pb_text_2 .et_pb_text_inner {
  color: #333333 !important;
}

/* --------------------------------------------------------------------------
   process#4 "The Saturnique Framework" (page-id-1132: .et_pb_section_3;
   heading box .et_pb_row_3 > .et_pb_column_5 with heading_3 + text_3,
   blurbs box .et_pb_row_4 > .et_pb_column_6 with blurbs 0–4)
   2026-07-06 — Ali: (1) heading box and (2) blurbs box lose the
   New-Project-9.png card wash and the drop shadow — content sits directly
   on the section background (its own New-Project-7.png wash stays, not
   part of the ask); (3) all icons the same size. Blurbs 0–3 carried the
   familiar donor icon cap (max-width:32% of the 60px wrap → 19px rendered,
   same bug as contact#4) while blurb_4 rendered the full authored 60px —
   uniform 60px for all five.
   -------------------------------------------------------------------------- */
body.page-id-1132 .et_pb_column_5,
body.page-id-1132 .et_pb_column_6 {
  background-image: none;
  background-color: transparent;
  box-shadow: none;
}
body.page-id-1132 .et_pb_section_3 .et_pb_blurb .et_pb_image_wrap {
  width: 60px;
  max-width: 60px;
}

/* --------------------------------------------------------------------------
   process#5 "Process Automation with COTS" (page-id-1132: .et_pb_section_4;
   heading box .et_pb_row_5 > .et_pb_column_7; photo band .et_pb_row_6
   (otc.jpg, 400px) with EMPTY overlay column .et_pb_column_8; "Work
   Smarter…" .et_pb_row_7 > .et_pb_column_9 (heading_5 + text_4); "Who This
   is For" .et_pb_row_8 > .et_pb_column_10 (heading_6 + texts 5–7))
   2026-07-06 — Ali: (1) heading box loses the New-Project-9.png wash +
   shadow; (2) the white strip across the middle of the photo is the empty
   column_8 carrying the same card treatment on top of the otc.jpg band —
   fully transparent, no shadow; (3) text below "Work Smarter, Scale Faster"
   centered (the module was pinned left at its 70%/60% max-width — center
   the block and the lines); (4) "Who This is For" + its three paragraphs
   centered (compiled text-align:left / start).
   -------------------------------------------------------------------------- */
body.page-id-1132 .et_pb_column_7,
body.page-id-1132 .et_pb_column_8 {
  background-image: none;
  background-color: transparent;
  box-shadow: none;
}
body.page-id-1132 .et_pb_text_4 {
  margin-left: auto;
  margin-right: auto;
}
/* 2026-07-20 — Ali: the "Work Smarter…" copy goes back to left-aligned. */
body.page-id-1132 .et_pb_text_4 .et_pb_text_inner {
  text-align: left;
}

/* 2026-07-18 — Ali: the "Work Smarter, Scale Faster" block sits in the
   default 1080px row while the otc.jpg band above it is a 1280px / no-
   padding row — widen the row and drop the module's 70%/60% cap so the copy
   spans exactly the photo's container. */
body.page-id-1132 .et_pb_row_7.et_pb_row {
  max-width: 1280px !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
body.page-id-1132 .et_pb_text_4 {
  max-width: 100%;
}

/* 2026-07-18 — Ali: the three "Who This is For" paragraphs become a bulleted
   list (three separate text modules, so the bullet is a ::before marker
   rather than a real <li>).
   2026-07-20 — Ali: the list is centered, so the marker rides inline with the
   first line instead of being absolutely pinned to the module's left edge. */
body.page-id-1132 .et_pb_text_5 .et_pb_text_inner p:first-child::before,
body.page-id-1132 .et_pb_text_6 .et_pb_text_inner p:first-child::before,
body.page-id-1132 .et_pb_text_7 .et_pb_text_inner p:first-child::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--gcid-qq6bd4rg9l);
}
/* 2026-07-20 — Ali: the list stays centered in the row, but the three bullets
   read as a left-aligned block: cap the modules at the longest line (846px +
   the marker) and center that box, then align the text left inside it.
   The hanging indent keeps wrapped lines off the marker at narrow widths. */
body.page-id-1132 .et_pb_text_5,
body.page-id-1132 .et_pb_text_6,
body.page-id-1132 .et_pb_text_7 {
  width: 870px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
body.page-id-1132 .et_pb_text_5 .et_pb_text_inner,
body.page-id-1132 .et_pb_text_6 .et_pb_text_inner,
body.page-id-1132 .et_pb_text_7 .et_pb_text_inner {
  text-align: left;
}
body.page-id-1132 .et_pb_text_5 .et_pb_text_inner p:first-child,
body.page-id-1132 .et_pb_text_6 .et_pb_text_inner p:first-child,
body.page-id-1132 .et_pb_text_7 .et_pb_text_inner p:first-child {
  padding-left: calc(7px + 0.55em);
  text-indent: calc(-7px - 0.55em);
}
/* selector mirrors Divi's `.et_pb_heading_N .et_pb_heading_container hX` */
body.page-id-1132 .et_pb_heading_6 .et_pb_heading_container h1,
body.page-id-1132 .et_pb_heading_6 .et_pb_heading_container h2,
body.page-id-1132 .et_pb_heading_6 .et_pb_heading_container h3,
body.page-id-1132 .et_pb_heading_6 .et_pb_heading_container h4 {
  text-align: center;
}

/* --------------------------------------------------------------------------
   process#6 "Why Choose Us?" cards (page-id-1132: .et_pb_section_5; cards
   row .et_pb_row_10, card columns .et_pb_column_12–15)
   2026-07-06 — Ali: (1) desktop card gap halved; (2) tablet two cards per
   row (compiled kept all four on one squeezed line); (3) phone one card
   per row (compiled went 45% two-up). Same recipe as about#6: the gutters
   are the theme's legacy et_block_row 5.5% margin-right (the compiled
   width:30% just flex-shrinks around them), so gaps are halved by
   restating width + margin — 4 × 22.9375% + 3 × 2.75% = 100%.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 981px) {
  body.page-id-1132 .et_pb_row_10 > .et_pb_column {
    width: 22.9375%;
    margin-right: 2.75%;
  }
  body.page-id-1132 .et_pb_row_10 > .et_pb_column.et-last-child {
    margin-right: 0;
  }
}
/* tablet: 2×2 grid — space-between provides the middle gutter, the
   columns' existing 30px bottom margin the row spacing */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  body.page-id-1132 .et_pb_row_10 {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  body.page-id-1132 .et_pb_row_10 > .et_pb_column {
    width: 47.25%;
    margin-right: 0;
    margin-bottom: 30px;
  }
  /* bottom pair: no stacking margin (col_14 carries no et-last-child-*
     marker, so it's named directly), and the leftover 30px would also
     unbalance the line's stretch-equal heights */
  body.page-id-1132 .et_pb_row_10 > .et_pb_column_14,
  body.page-id-1132 .et_pb_row_10 > .et_pb_column.et-last-child {
    margin-bottom: 0;
  }
  /* Divi's zero-width clearfix ::after becomes a flex item on the wrapped
     second line, skewing its space-between — drop it while the row wraps */
  body.page-id-1132 .et_pb_row_10::after {
    content: none;
  }
}
/* phone: full-width stack */
@media only screen and (max-width: 767px) {
  body.page-id-1132 .et_pb_row_10 > .et_pb_column {
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
  }
  body.page-id-1132 .et_pb_row_10 > .et_pb_column.et-last-child {
    margin-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   process#7 "Ready to Streamline Your Operations?" CTA (page-id-1132:
   .et_pb_section_6; card row .et_pb_row_11, heading col .et_pb_column_16
   with .et_pb_heading_8, text+button col .et_pb_column_17 with .et_pb_text_8
   + .et_pb_button_0)
   2026-07-06 — Ali: match the fixed about#10 / services#5 / career#6 CTA.
   The card row itself already matches the reference; divergences are all
   donor: (a) columns crushed to width:30% (45% phone) — the heading wrapped
   over four lines — instead of the reference's full-width 20px-padded
   columns; (b) heading_8 compiled text-align:left with
   align-self:flex-start!important + max-width:950px where the reference
   title is centered full-width (left on phone only, as approved on
   services#5/career#6).
   -------------------------------------------------------------------------- */
body.page-id-1132 .et_pb_column_16,
body.page-id-1132 .et_pb_column_17 {
  width: 100%;
  padding: 20px;
}
body.page-id-1132 .et_pb_heading_8 {
  align-self: center !important;
  max-width: none;
}
/* selector mirrors Divi's `.et_pb_heading_N .et_pb_heading_container hX` */
body.page-id-1132 .et_pb_heading_8 .et_pb_heading_container h1,
body.page-id-1132 .et_pb_heading_8 .et_pb_heading_container h2,
body.page-id-1132 .et_pb_heading_8 .et_pb_heading_container h3,
body.page-id-1132 .et_pb_heading_8 .et_pb_heading_container h4 {
  text-align: center;
}
@media only screen and (max-width: 767px) {
  body.page-id-1132 .et_pb_heading_8 .et_pb_heading_container h1,
  body.page-id-1132 .et_pb_heading_8 .et_pb_heading_container h2,
  body.page-id-1132 .et_pb_heading_8 .et_pb_heading_container h3,
  body.page-id-1132 .et_pb_heading_8 .et_pb_heading_container h4 {
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   process phone gutter normalization (page-id-1132, ≤767px)
   2026-07-06 — Ali: every section's content should sit exactly as far from
   the viewport edges as the hero's (section pad 30px + nothing else = 30px).
   Compiled mobile CSS stacked extra horizontal padding on top of the
   section's 30px (or crushed a column), pushing content to 50–147px.
   Visible CARDS whose edge already sits at 30px keep their own padding —
   it's part of the card design (hero text card, Why-Choose-Us cards, CTA
   card). Fixed to 30px here, side padding only (vertical rhythm stays):
   - #3 intro text row (.et_pb_row_2, +30px row padding, !important)
   - #4 framework: de-carded boxes .et_pb_column_5/_6 (+30px each)
   - #5 COTS: de-carded heading box .et_pb_column_7 (+30px) and the
     "Work Smarter" / "Who This is For" columns _9/_10 (+20px each)
   - #6 cards row (.et_pb_row_10, +30px row padding, !important — card
     edges land at 30px like the hero's text card); the "Why Choose Us?"
     heading column (.et_pb_column_11) kept its two-up 45% width, floating
     the crushed two-line heading 147px in — full width like its siblings
   - #7 CTA already at 30px (the 81px text inset is the card row's 30px +
     border + the columns' 20px, both card-internal) — untouched
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  body.page-id-1132 .et_pb_row_2.et_pb_row,
  body.page-id-1132 .et_pb_row_10.et_pb_row {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.page-id-1132 .et_pb_column_5,
  body.page-id-1132 .et_pb_column_6,
  body.page-id-1132 .et_pb_column_7,
  body.page-id-1132 .et_pb_column_9,
  body.page-id-1132 .et_pb_column_10 {
    padding-left: 0;
    padding-right: 0;
  }
  body.page-id-1132 .et_pb_column_11 {
    width: 100%;
  }
}

/* ==========================================================================
   UNIFY EVERY PAGE CTA TO THE HOMEPAGE CTA        (Ali — 2026-07-09)
   --------------------------------------------------------------------------
   Reference = home#8  (.et_pb_section_15 / .et_pb_row_29 / cols 60-61 /
   .et_pb_button_9).  The card row itself — 1080px max-width, watermark bg
   image, 14px radius, faint-blue 1px border, drop shadow, 50px/30px padding —
   is a shared Divi preset (hp3jn2g) and already renders identically on every
   page, so it is left alone.  What diverged from the homepage, and is forced
   to the homepage values below, is:

     1. SECTION PADDING  — home is top 4% (the Divi `.et_pb_section{padding:4% 0}`
        default, left un-overridden), bottom 100px, sides 30px; top 0 at
        <=980px; bottom 50px at <=767px.  The sub-pages had set top 0 or 100px
        and bottom 50 or 100.
     2. SECTION BG IMAGE — none (home has none; financial#6 carried a donor
        section image).
     3. INNER COLUMN PADDING — 0 (home cols 60/61 are unpadded; the sub-pages
        carried the about#10 reference's 20px).
     4. BUTTON — the sub-pages showed the Divi theme-default GHOST button
        (transparent, 2px outline, 3px radius, 20px, 6/20 padding).  The
        homepage button is a FILLED #1020a5 pill: white text, Open Sans 18px,
        1px solid #1020a5, 14px radius, 12/45 padding, no icon, and it flips to
        the ghost look only on :hover.  Replicated verbatim from button_9.
        (#page-container in the selector mirrors the homepage's own compiled
        button selector so it outranks the Divi button defaults.)

   This SUPERSEDES the earlier per-page "match the about#10 CTA" button/padding
   work in the about#10 / services#5 / change#7 / career#6 blocks above.
   Heading text/copy is untouched (content, not layout).

   Page map (page-id / section / heading-col / text+button-col / button):
     about        843  sec9  col25 col26 btn0
     services    1505  sec4  col13 col14 btn4   (btn0-3 are the card buttons)
     bookkeeping  977  sec9  col48 col49 btn0
     financial   1100  sec5  col29 col30 btn0
     process     1132  sec6  col16 col17 btn0
     change      1139  sec6  col23 col24 btn0
     career      1152  sec5  col12 col13 btn0
   ========================================================================== */

/* 1 + 2 — section padding + no section background image (desktop base) */
body.page-id-843  .et_pb_section_9.et_pb_section,
body.page-id-1505 .et_pb_section_4.et_pb_section,
body.page-id-977  .et_pb_section_9.et_pb_section,
body.page-id-1100 .et_pb_section_5.et_pb_section,
body.page-id-1132 .et_pb_section_6.et_pb_section,
body.page-id-1139 .et_pb_section_6.et_pb_section,
body.page-id-1152 .et_pb_section_5.et_pb_section {
  padding-top: 4% !important;
  padding-right: 30px !important;
  padding-bottom: 100px !important;
  padding-left: 30px !important;
  background-image: none !important;
}
@media only screen and (max-width: 980px) {
  body.page-id-843  .et_pb_section_9.et_pb_section,
  body.page-id-1505 .et_pb_section_4.et_pb_section,
  body.page-id-977  .et_pb_section_9.et_pb_section,
  body.page-id-1100 .et_pb_section_5.et_pb_section,
  body.page-id-1132 .et_pb_section_6.et_pb_section,
  body.page-id-1139 .et_pb_section_6.et_pb_section,
  body.page-id-1152 .et_pb_section_5.et_pb_section {
    padding-top: 0 !important;
  }
}
@media only screen and (max-width: 767px) {
  body.page-id-843  .et_pb_section_9.et_pb_section,
  body.page-id-1505 .et_pb_section_4.et_pb_section,
  body.page-id-977  .et_pb_section_9.et_pb_section,
  body.page-id-1100 .et_pb_section_5.et_pb_section,
  body.page-id-1132 .et_pb_section_6.et_pb_section,
  body.page-id-1139 .et_pb_section_6.et_pb_section,
  body.page-id-1152 .et_pb_section_5.et_pb_section {
    padding-bottom: 50px !important;
  }
}

/* 1b — MOBILE ONLY (<=767px): 50px top padding on the CTA section, on all eight
   incl. the homepage (Ali 2026-07-09). The CTA section previously had 0 top
   padding on phones; this adds breathing room above the CTA card. Sides (30px)
   and bottom (50px) are unchanged. Placed after the <=980 top:0 rule so it wins
   at phone width; homepage (179) included, so this diverges from the homepage's
   original phone top:0 — intended, applies to every CTA page. */
@media only screen and (max-width: 767px) {
  body.page-id-179  .et_pb_section_15.et_pb_section,
  body.page-id-843  .et_pb_section_9.et_pb_section,
  body.page-id-1505 .et_pb_section_4.et_pb_section,
  body.page-id-977  .et_pb_section_9.et_pb_section,
  body.page-id-1100 .et_pb_section_5.et_pb_section,
  body.page-id-1132 .et_pb_section_6.et_pb_section,
  body.page-id-1139 .et_pb_section_6.et_pb_section,
  body.page-id-1152 .et_pb_section_5.et_pb_section {
    padding-top: 50px !important;
  }
}

/* 3 — inner columns unpadded, like the homepage's columns 60/61 */
body.page-id-843  .et_pb_column_25, body.page-id-843  .et_pb_column_26,
body.page-id-1505 .et_pb_column_13, body.page-id-1505 .et_pb_column_14,
body.page-id-977  .et_pb_column_48, body.page-id-977  .et_pb_column_49,
body.page-id-1100 .et_pb_column_29, body.page-id-1100 .et_pb_column_30,
body.page-id-1132 .et_pb_column_16, body.page-id-1132 .et_pb_column_17,
body.page-id-1139 .et_pb_column_23, body.page-id-1139 .et_pb_column_24,
body.page-id-1152 .et_pb_column_12, body.page-id-1152 .et_pb_column_13 {
  padding: 0 !important;
}

/* 4 — button: the homepage's filled #1020a5 pill (resting state).
   2026-07-09 (Ali): three CTA-button tweaks applied to every page's CTA —
     • min-width:185px  — the button is always at least 185px wide (border-box;
       a longer label just grows it past 185px).
     • padding:12px     — left/right cut from 45px to 12px (top/bottom stay 12px).
     • label centred    — justify-content:center centres the label inside the
       flex button now that min-width can make it wider than the text;
       text-align:center is the fallback for any non-flex compile.
   The homepage (179 / button_9) is folded into this rule so all eight CTA
   buttons are identical; it previously carried the compiled 12/45 padding and
   no min-width. (#page-container in the selector out-ranks the compiled
   .et_pb_button_9_wrapper .et_pb_button_9 padding rule.) */
body.page-id-179  #page-container .et_pb_section .et_pb_button_9,
body.page-id-843  #page-container .et_pb_section .et_pb_button_0,
body.page-id-1505 #page-container .et_pb_section .et_pb_button_4,
body.page-id-977  #page-container .et_pb_section .et_pb_button_0,
body.page-id-1100 #page-container .et_pb_section .et_pb_button_0,
body.page-id-1132 #page-container .et_pb_section .et_pb_button_0,
body.page-id-1139 #page-container .et_pb_section .et_pb_button_0,
body.page-id-1152 #page-container .et_pb_section .et_pb_button_0 {
  background-color: var(--gcid-qq6bd4rg9l) !important;
  color: var(--gcid-g6jkbgz9fy) !important;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 18px !important;
  border: 1px solid var(--gcid-qq6bd4rg9l) !important;
  border-radius: 14px !important;
  min-width: 185px !important;
  padding: 12px !important;
  justify-content: center !important;
  text-align: center !important;
  transition: background-color .3s ease-in, border-color .3s ease-in, color .3s ease-in !important;
}
/* button :hover — flips to the ghost look, exactly like button_9:hover.
   Padding re-stated at 12px (was 12/45) so the button keeps its resting width
   on hover; min-width / justify-content / text-align carry over from rule 4. */
body.page-id-179  #page-container .et_pb_section .et_pb_button_9:hover,
body.page-id-843  #page-container .et_pb_section .et_pb_button_0:hover,
body.page-id-1505 #page-container .et_pb_section .et_pb_button_4:hover,
body.page-id-977  #page-container .et_pb_section .et_pb_button_0:hover,
body.page-id-1100 #page-container .et_pb_section .et_pb_button_0:hover,
body.page-id-1132 #page-container .et_pb_section .et_pb_button_0:hover,
body.page-id-1139 #page-container .et_pb_section .et_pb_button_0:hover,
body.page-id-1152 #page-container .et_pb_section .et_pb_button_0:hover {
  background-color: transparent !important;
  color: var(--gcid-primary-color) !important;
  border-color: var(--gcid-qq6bd4rg9l) !important;
  padding: 12px !important;
}
/* button icon: the homepage button hides :before/:after (no arrow) */
body.page-id-843  #page-container .et_pb_section .et_pb_button_0:before,
body.page-id-843  #page-container .et_pb_section .et_pb_button_0:after,
body.page-id-1505 #page-container .et_pb_section .et_pb_button_4:before,
body.page-id-1505 #page-container .et_pb_section .et_pb_button_4:after,
body.page-id-977  #page-container .et_pb_section .et_pb_button_0:before,
body.page-id-977  #page-container .et_pb_section .et_pb_button_0:after,
body.page-id-1100 #page-container .et_pb_section .et_pb_button_0:before,
body.page-id-1100 #page-container .et_pb_section .et_pb_button_0:after,
body.page-id-1132 #page-container .et_pb_section .et_pb_button_0:before,
body.page-id-1132 #page-container .et_pb_section .et_pb_button_0:after,
body.page-id-1139 #page-container .et_pb_section .et_pb_button_0:before,
body.page-id-1139 #page-container .et_pb_section .et_pb_button_0:after,
body.page-id-1152 #page-container .et_pb_section .et_pb_button_0:before,
body.page-id-1152 #page-container .et_pb_section .et_pb_button_0:after {
  display: none !important;
}

/* 5 — CTA heading: keep every CTA title centred, on one line or two.
   The heading is centred by its column, so a one-line title always reads
   centred. It only matters when the title WRAPS: services has the longest
   title and is the only one that wraps at common desktop widths, so with
   text-align:left its 2nd line hugged the left and it alone looked
   left-aligned. text-align:center centres a wrapped title too, so all seven
   match. align-self:center also pins services' heading (its import left it
   align-self:flex-start) so it stays centred at <=980px, like every other
   page and the homepage. (Supersedes the center rules in the change#7 /
   career#6 blocks above.) */
body.page-id-843  .et_pb_heading_12 .et_pb_heading_container h2,
body.page-id-1505 .et_pb_heading_7  .et_pb_heading_container h2,
body.page-id-977  .et_pb_heading_14 .et_pb_heading_container h2,
body.page-id-1100 .et_pb_heading_11 .et_pb_heading_container h2,
body.page-id-1132 .et_pb_heading_8  .et_pb_heading_container h2,
body.page-id-1139 .et_pb_heading_12 .et_pb_heading_container h2,
body.page-id-1152 .et_pb_heading_5  .et_pb_heading_container h2 {
  text-align: center !important;
}
body.page-id-843  .et_pb_heading_12,
body.page-id-1505 .et_pb_heading_7,
body.page-id-977  .et_pb_heading_14,
body.page-id-1100 .et_pb_heading_11,
body.page-id-1132 .et_pb_heading_8,
body.page-id-1139 .et_pb_heading_12,
body.page-id-1152 .et_pb_heading_5 {
  align-self: center !important;
}

/* 5b — MOBILE ONLY (<=767px): CTA heading left-aligned (Ali 2026-07-09).
   Desktop/tablet stay centred (rule 5). On phones every CTA title sits
   flush-left: align-self:flex-start moves the heading block to the card's
   left edge (it's otherwise centred by the column, so text-align alone would
   leave a one-line title looking centred), and text-align:left left-aligns
   the text / any wrapped lines. Homepage CTA (179/heading_17) included so all
   eight match on phones. */
@media only screen and (max-width: 767px) {
  body.page-id-179  .et_pb_heading_17,
  body.page-id-843  .et_pb_heading_12,
  body.page-id-1505 .et_pb_heading_7,
  body.page-id-977  .et_pb_heading_14,
  body.page-id-1100 .et_pb_heading_11,
  body.page-id-1132 .et_pb_heading_8,
  body.page-id-1139 .et_pb_heading_12,
  body.page-id-1152 .et_pb_heading_5 {
    align-self: flex-start !important;
  }
  body.page-id-179  .et_pb_heading_17 .et_pb_heading_container h2,
  body.page-id-843  .et_pb_heading_12 .et_pb_heading_container h2,
  body.page-id-1505 .et_pb_heading_7  .et_pb_heading_container h2,
  body.page-id-977  .et_pb_heading_14 .et_pb_heading_container h2,
  body.page-id-1100 .et_pb_heading_11 .et_pb_heading_container h2,
  body.page-id-1132 .et_pb_heading_8  .et_pb_heading_container h2,
  body.page-id-1139 .et_pb_heading_12 .et_pb_heading_container h2,
  body.page-id-1152 .et_pb_heading_5  .et_pb_heading_container h2 {
    text-align: left !important;
  }
}

/* ==========================================================================
   TOP NAV — apply the homepage's nav styling site-wide   (Ali — 2026-07-09)
   --------------------------------------------------------------------------
   The header is one Theme-Builder template (tb-12) shared by every page, but
   only the homepage's compiled CSS (et-cache/179/…-deferred-179) colours the
   nav links: it paints the menu links the brand blue (--gcid-qq6bd4rg9l /
   #1020a5), the hover teal (--gcid-qceypqi0s4 / #44c0c5), and sizes the logo
   at 270px. Sub-pages don't load that file, so their links fell back to
   Divi's default grey (rgba(0,0,0,.6)) and their logo rendered at 280px.
   (Copying the homepage's header markup does NOT fix this — verified: the
   colour comes from the homepage-only CSS, not from the preset--group classes.
   So the fix is a site-wide override here, loaded on every page.)

   The gcid brand variables are defined globally (same ones the CTA button
   uses), so they resolve on every page. current-menu-item is folded in too so
   the active page's link matches the rest — on sub-pages it was grey like the
   others anyway (no visible "you are here" state), and the homepage shows all
   links one blue. Site-wide (no page-id scope) by design; the homepage already
   matches these values, so re-stating them there is a harmless no-op.
   ========================================================================== */

/* menu links (top level + current item + submenu + mobile) → homepage blue */
.et_pb_menu_0_tb_header.et_pb_menu ul li a,
.et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item > a,
.et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-ancestor > a,
.et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu a {
  color: var(--gcid-qq6bd4rg9l) !important;
}

/* hover (top level + submenu) → homepage teal */
.et_pb_menu_0_tb_header.et_pb_menu ul li > a:hover,
.et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu li > a:hover {
  color: var(--gcid-qceypqi0s4) !important;
}

/* mobile hamburger icon → homepage blue */
.et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar:before {
  color: var(--gcid-qq6bd4rg9l) !important;
}

/* logo: homepage sizes the header logo module at 270px; sub-pages left it at
   the 280px max — unify to the homepage's 270px */
.et_pb_image_0_tb_header {
  width: 270px !important;
}

/* menu items' horizontal position (desktop nav, >980px) — match the homepage.
   The nav is right-aligned inside its column on every page, but on sub-pages
   the menu module CENTRES its inner container, so the whole menu block sits
   mid-column (closer to the logo, short of the row's right edge). The homepage
   lets that inner container fill the column (flex-grow), so the right-aligned
   menu reaches the row edge. Grow it here to reproduce the homepage exactly
   (verified: menu block lands at 825–1353px, "About" at x=875, identical to
   home). Scoped to the desktop breakpoint so the <=980px hamburger — whose
   inner container holds the toggle — is untouched. */
@media only screen and (min-width: 981px) {
  .et_pb_menu_0_tb_header .et_pb_menu_inner_container {
    flex-grow: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   bookkeeping#4 photos — one uniform size (page-id-977: .et_pb_image_2–5)
   2026-07-20 — Ali: all four service photos the same size as the first
   (Accounts Receivable). Two causes of the mismatch:
   (a) the AP row (.et_pb_row_5) compiles with 20px side padding and a 40px
       column gap while rows 3/7/9 use 0 padding + a 5.5% gap — its columns
       came out 543px against 563px, so photo 3 was narrower;
   (b) the source files have different ratios (1000x667 and 1000x665 vs
       500x281 and 1280x720), so with height:auto photos 3 and 4 rendered
       ~60px shorter.
   Row 5 is normalised to the others, and every photo is pinned to the first
   image's 1000/667 ratio with object-fit:cover (crops the 16:9 pair top and
   bottom rather than letterboxing).
   -------------------------------------------------------------------------- */
body.page-id-977 .et_pb_row_5 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  column-gap: 5.5% !important;
}
body.page-id-977 .et_pb_image_2 .et_pb_image_wrap img,
body.page-id-977 .et_pb_image_3 .et_pb_image_wrap img,
body.page-id-977 .et_pb_image_4 .et_pb_image_wrap img,
body.page-id-977 .et_pb_image_5 .et_pb_image_wrap img {
  aspect-ratio: 1000 / 667 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* --------------------------------------------------------------------------
   bookkeeping#6 top padding removed (page-id-977: .et_pb_section_5)
   2026-07-20 — Ali: no padding above the "What We Provide" heading. The
   compiled 50px padding-top rides the 4-class
   `.et-l--post .et_pb_section.et_pb_section_5` selector, so the override
   matches it; padding-bottom (50px) is left alone.
   -------------------------------------------------------------------------- */
body.page-id-977 .et-l--post .et_pb_section.et_pb_section_5 {
  padding-top: 0 !important;
}

/* --------------------------------------------------------------------------
   bookkeeping#6 heading column padding (page-id-977: .et_pb_column_28)
   2026-07-20 — Ali: 20px padding on all four sides of the column holding
   the "What We Provide" heading. Compiled padding was 0.
   -------------------------------------------------------------------------- */
body.page-id-977 .et_pb_column_28 {
  padding: 20px !important;
}

/* --------------------------------------------------------------------------
   financial#4 photos — match the bookkeeping service photos (page-id-1100:
   .et_pb_section_3, .et_pb_image_2–8)
   2026-07-20 — Ali: the seven "Advanced Financial Analysis" images should be
   the same size and have the same corner radius as the bookkeeping service
   photos. Those (page-id-977 .et_pb_image_2–5, bookkeeping#4) are pinned to
   the 1000/667 ratio at full column width with a 14px radius; the financial
   ones compiled to a fixed 300px height (350px on block 6) with no radius.
   Same treatment here: full column width, 1000/667 with object-fit:cover,
   14px radius. Both pages use 12/24 columns at a 5.5% gap, so the rendered
   size matches. The ≤980px block above already forces width:100% /
   height:auto — the ratio carries the height there too.
   -------------------------------------------------------------------------- */
body.page-id-1100 .et_pb_section_3 .et_pb_image,
body.page-id-1100 .et_pb_section_3 .et_pb_image .et_pb_image_wrap {
  width: 100%;
  border-radius: 14px;
}
body.page-id-1100 .et_pb_section_3 .et_pb_image .et_pb_image_wrap img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1000 / 667 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 14px !important;
}
