/*
 * Client-requested changes since the port (MarkUp review "ABC Migration | Internal Review",
 * 2026-10-23). Unlike fixes.css these are not live-site defects and are not switched off in
 * pristine mode. Each rule names the MarkUp thread.
 */

/* #19 / #21: the vCard QR, 168px (240px read too large; 30% smaller on review 2026-10-26). The PNG is trimmed to the
   code itself so its left edge lines up with the contact icons above; the page's white
   background supplies the quiet zone scanners need. */
.contact-item--image-wrapper {
  width: 10.5rem;
  max-width: 100%;
}
.contact-item--image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

/* #23: social links sit beside the back-to-top button as a compact group of plain icons
   (no outlines, per review), separated from it by a short divider. */
.footer--end-wrapper {
  display: flex;
  align-items: center;
  gap: 2rem;
  align-self: flex-end;
}
.footer--social-list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0 2rem 0 0;
  list-style: none;
  border-right: 1px solid rgba(255, 255, 255, 0.4);
}
.footer--social-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--true-white);
  opacity: 0.85;
  transition: opacity 0.3s, color 0.3s;
}
.footer--social-link svg {
  width: 1.5rem;
  height: 1.5rem;
}
.footer--social-link:hover,
.footer--social-link:focus-visible {
  opacity: 1;
  color: var(--yellow, #ffcc33);
}
.footer--end-wrapper .footer--back-to-top-wrapper.is-updated {
  align-self: center;
}
@media screen and (max-width: 767px) {
  .footer--end-wrapper {
    align-self: stretch;
    justify-content: space-between;
  }
  .footer--social-list {
    margin-left: -0.625rem;
  }
}

/* #8: blog posts start sooner. The hero carried 80px margins under both columns plus 96px of
   padding, then the body added 136px on top (~320px between the image and the first line). */
.padding-vertical--hero.is-blog-post {
  padding-bottom: 3rem;
}
.padding-vertical--hero.is-blog-post .content--hero.is-blog,
.padding-vertical--hero.is-blog-post .blog10_image-wrapper.is-blog-header {
  margin-bottom: 0;
}
.padding-vertical--blog-body.is-post {
  padding-top: 4rem;
}
@media screen and (max-width: 767px) {
  .padding-vertical--blog-body.is-post {
    padding-top: 3rem;
  }
}

/* #12: comparison tables (/managed-it-service, /compare, home, /hack-free-guarantee): every column
   is vertically centred in its row. The middle column carried margin-bottom:-2.875rem inside a
   row with overflow:hidden, which pinned the large blue values to the bottom of each row. */
@media screen and (min-width: 768px) {
  .pricing-table_row.is-managed,
  .pricing-table_row.is-comparison-2 {
    align-items: center;
  }
  .pricing-table_cell.is-managed,
  .pricing-table_cell.is-comparison,
  .pricing-table_cell.is-mid.is-managed {
    justify-content: center;
    margin-bottom: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .pricing-table_cell.is-mid .heading-style-h2 {
    line-height: 1;
  }
}

/* #17 /shadow-ai-assessment: the decorative oval ran behind the intro paragraph (half white,
   half blue). It now starts below the paragraph, behind the cards, sized so the whole ellipse
   fits inside the section (review: it must not be cropped); the clip is only a safety net so it
   never reaches the next section (fixes.css #9). */
@media screen and (min-width: 992px) {
  .section--mission.is-managed-ai:has(.mission--bg-wrapper.is-shadow-ai) {
    overflow: clip;
  }
  .mission--bg-wrapper.is-shadow-ai {
    top: 20rem;
    bottom: auto;
    right: -6%;
    width: 54rem;
    max-width: 54rem;
  }
}

/* #14, #16, #24: one eyebrow style on every service and notice page hero: the white pill with
   blue text (.hero--eyebrow-wrapper > .eyebrow, as on /managed-it-service-calgary). It names the
   service area; /compliance keeps its SOC 2 line and /hack-free-guarantee its offer line. */
.hero--eyebrow-wrapper {
  margin-bottom: 1.5rem;
}
.hero--eyebrow-wrapper.is-center {
  text-align: center;
  align-self: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.header--1col-hero .hero--eyebrow-wrapper {
  width: fit-content;
}
/* site.css centres the pill under 992px even where the heading stays left-aligned */
.hero--eyebrow-wrapper:not(.is-center) {
  align-self: flex-start;
}

/* Follow-up to #22: the office section's map slot holds a live Google Maps embed of the new address. */
.map--embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Section rhythm (review 2026-10-23: "gaps too large"). The port kept Webflow's 8.5rem (136px)
   top and bottom padding on nearly every section, so neighbours met with ~272px of white, and a
   few went further (sub-services 232px, simple-list 208px). On desktop, white section padding is
   capped at 5.5rem: white sections ~176px apart, a white section ~88px from a coloured block
   (4.5rem read too tight) and padding inside full-width tinted sections at
   7rem. Heroes keep theirs (it clears the fixed nav). Tablet and mobile already use smaller
   values. Selectors generated from a measured sweep of every page (scripts/qa/_markup-gaps.mjs). */
@media screen and (min-width: 992px) {
  .padding-section-medium.is-scorecard.is-rev,
  .padding-vertical--2col,
  .padding-vertical--2col-cta,
  .padding-vertical--2col-cta.is-cyber,
  .padding-vertical--2col-table.is-compliance,
  .padding-vertical--2col-with-wrapper,
  .padding-vertical--3col-challenges,
  .padding-vertical--3col-challenges.is-managed-ai,
  .padding-vertical--3col-challenges.is-shadow-ai,
  .padding-vertical--3col-table,
  .padding-vertical--about-timeline.is-top,
  .padding-vertical--ai-plans,
  .padding-vertical--awards,
  .padding-vertical--benefits,
  .padding-vertical--benefits.is-assessment,
  .padding-vertical--benefits.is-awards,
  .padding-vertical--benefits.is-comparison,
  .padding-vertical--benefits.is-compliance,
  .padding-vertical--benefits.is-managed,
  .padding-vertical--blog-grid.is-updated,
  .padding-vertical--by-the-numbers,
  .padding-vertical--cards,
  .padding-vertical--cards.is-assessment,
  .padding-vertical--cards.is-guarantee,
  .padding-vertical--community-numbers.is-guarantee,
  .padding-vertical--faqs,
  .padding-vertical--faqs.is-compliance,
  .padding-vertical--faqs.is-managed,
  .padding-vertical--features,
  .padding-vertical--filter,
  .padding-vertical--flip-cards.is-cyber,
  .padding-vertical--flip-cards.is-managed,
  .padding-vertical--hover-table,
  .padding-vertical--intro,
  .padding-vertical--legal,
  .padding-vertical--map,
  .padding-vertical--mission,
  .padding-vertical--mission.is-shadow-ai,
  .padding-vertical--notice,
  .padding-vertical--prompts,
  .padding-vertical--risks,
  .padding-vertical--simple-list.is-assessment,
  .padding-vertical--simple-list.is-it-support,
  .padding-vertical--stats.is-managed-ai,
  .padding-vertical--steps,
  .padding-vertical--steps.is-about,
  .padding-vertical--steps.is-cyber,
  .padding-vertical--table,
  .padding-vertical--table.is-comparison,
  .padding-vertical--tabs-v2.is-tall-top,
  .padding-vertical--testimonials,
  .padding-vertical--testimonials.is-about,
  .padding-vertical--testimonials.is-managed,
  .padding-vertical--testimonials.is-short-bottom,
  .padding-vertical--the-struggle,
  .padding-vertical--what-to-expect,
  .padding-vertical--what-to-expect.is-assessment,
  .padding-vertical--what-to-expect.is-comparison {
    padding-top: 5.5rem;
  }
  .padding-section-medium.is-scorecard.is-rev,
  .padding-vertical--2col,
  .padding-vertical--2col-cta,
  .padding-vertical--2col-cta.is-cyber,
  .padding-vertical--2col-table.is-compliance,
  .padding-vertical--2col-with-wrapper,
  .padding-vertical--3col-challenges.is-managed-ai,
  .padding-vertical--3col-challenges.is-shadow-ai,
  .padding-vertical--3col-table,
  .padding-vertical--about-timeline.is-top,
  .padding-vertical--ai-plans,
  .padding-vertical--ai-self-check-quiz,
  .padding-vertical--award-logos,
  .padding-vertical--benefits,
  .padding-vertical--benefits.is-assessment,
  .padding-vertical--benefits.is-awards,
  .padding-vertical--benefits.is-comparison,
  .padding-vertical--benefits.is-compliance,
  .padding-vertical--benefits.is-managed,
  .padding-vertical--blog-body.is-post,
  .padding-vertical--blog-grid.is-updated,
  .padding-vertical--blog-related-posts,
  .padding-vertical--cards,
  .padding-vertical--cards.is-assessment,
  .padding-vertical--community-numbers,
  .padding-vertical--community-numbers.is-guarantee,
  .padding-vertical--contact-form,
  .padding-vertical--faqs,
  .padding-vertical--faqs.is-compliance,
  .padding-vertical--faqs.is-contact,
  .padding-vertical--faqs.is-managed,
  .padding-vertical--faqs.is-managed.is-v3,
  .padding-vertical--features,
  .padding-vertical--filter,
  .padding-vertical--flip-cards.is-cyber,
  .padding-vertical--hover-table,
  .padding-vertical--intro,
  .padding-vertical--legal,
  .padding-vertical--map,
  .padding-vertical--mission,
  .padding-vertical--notice,
  .padding-vertical--prompts,
  .padding-vertical--risks,
  .padding-vertical--simple-list,
  .padding-vertical--simple-list.is-assessment,
  .padding-vertical--simple-list.is-contact,
  .padding-vertical--simple-list.is-it-support,
  .padding-vertical--standards,
  .padding-vertical--stats,
  .padding-vertical--stats.is-managed-ai,
  .padding-vertical--stats.is-shadow-ai,
  .padding-vertical--steps,
  .padding-vertical--steps.is-about,
  .padding-vertical--steps.is-cyber,
  .padding-vertical--support-causes,
  .padding-vertical--table,
  .padding-vertical--table.is-comparison,
  .padding-vertical--testimonials,
  .padding-vertical--testimonials.is-about,
  .padding-vertical--testimonials.is-managed,
  .padding-vertical--testimonials.is-single,
  .padding-vertical--the-struggle,
  .padding-vertical--what-to-expect,
  .padding-vertical--what-to-expect.is-comparison,
  .padding-vertical--what-to-expect.is-guarantee {
    padding-bottom: 5.5rem;
  }
  .padding-vertical--2col-simple,
  .padding-vertical--featured-blogs,
  .padding-vertical--flip-cards,
  .padding-vertical--footer-cta,
  .padding-vertical--frameworks,
  .padding-vertical--managed-ai-table,
  .padding-vertical--sub-services,
  .padding-vertical--sub-services.is-compliance,
  .padding-vertical--tabs {
    padding-top: 7rem;
  }
  .padding-vertical--2col-simple,
  .padding-vertical--app,
  .padding-vertical--featured-blogs,
  .padding-vertical--flip-cards,
  .padding-vertical--footer-cta,
  .padding-vertical--frameworks,
  .padding-vertical--managed-ai-table,
  .padding-vertical--pricing-cta,
  .padding-vertical--steps.is-comparison,
  .padding-vertical--sub-services,
  .padding-vertical--sub-services.is-compliance,
  .padding-vertical--tabs {
    padding-bottom: 7rem;
  }
  /* the white spacer the footer opens with added 136px after every page's last section */
  .spacer-136px {
    padding-top: 5.5rem;
  }
  /* /cyber-security-risk-assessment FAQ stacked 80px section padding on 48px inner padding */
  .section--faqs-1-2 {
    padding-top: 0;
  }
}

/* Review 2026-10-23/26: the office map is a short landscape strip (was taller than wide). */
.map--image-wrapper:has(.map--embed) {
  padding-top: 48%;
}

/* Review 2026-10-23: the dark oval on the /hack-free-guarantee assessment card is larger and
   reaches further left, so it sits behind the whole circle graphic instead of half of it. */
@media screen and (min-width: 992px) {
  ._2col-cta--accent-wrapper.is-guarantee {
    max-width: none;
    width: max(52rem, 58vw);
    margin-top: max(-14rem, -15vw);
    margin-right: max(-9rem, -10vw);
  }
  ._2col-cta--accent-wrapper.is-guarantee img {
    width: 100%;
    height: auto;
  }
}

/* Review 2026-10-23 #3: testimonial sliders left ~90px between the slide and its dots/arrows
   (62px padding on the navigation row). */
.content--testimonials > .navigation-wrapper {
  padding-top: 1.5rem;
}

/* Review 2026-10-23: gaps inside sections. Heading to testimonial slider was 140px (8.75rem gap),
   heading to comparison table ~138px (/hack-free-guarantee "How We're Different"), and /solutions
   category groups sat 136px apart. Desktop only; smaller screens already use smaller gaps. */
@media screen and (min-width: 992px) {
  .wrapper--testimonials {
    grid-row-gap: 4rem;
  }
  .wrapper--3col-table {
    grid-row-gap: 2.5rem;
  }
  .pricing-table--header-spacer {
    margin-bottom: 0;
  }
  .solution-categories--list-wrapper {
    grid-row-gap: 5rem;
  }
}

/* Review 2026-10-26: nav dropdowns use one system. The panel radius (1.25rem) equals the item
   radius (.75rem) plus the panel padding (.5rem), so the hover state nests evenly inside it on
   simple lists; mega menus get 1.5rem padding with headings, items and "View all solutions" on
   one left edge; every panel opens the same distance below its button. Overrides the round-3
   negative-margin hover in fixes.css for the simple lists. */
@media screen and (min-width: 992px) {
  .nav-link-dropdown-menu-inner-wrap {
    border-radius: 1.25rem;
  }
  /* simple lists: About, Get Support */
  .nav-link-dropdown-menu.is-about,
  .nav-link-dropdown-menu.is-get-support {
    padding: .5rem;
  }
  .nav-items-wrap.is-about,
  .nav-items-wrap.is-get-support {
    row-gap: .25rem;
  }
  .nav-link-dropdown-menu.is-about {
    grid-template-columns: max-content;
  }
  .nav-items-wrap.is-about .nav_link.is-dropdown {
    white-space: nowrap;
  }
  .nav-items-wrap.is-about .nav_link.is-dropdown,
  .nav-items-wrap.is-get-support .nav_link.is-dropdown {
    margin: 0;
    padding: .625rem 1rem;
    border-radius: .75rem;
    width: 100%;
  }
  .nav-items-wrap.is-get-support .nav_link.is-dropdown > div + div {
    margin-top: .125rem;
  }
  /* mega menus: Services, Solutions */
  .nav-link-dropdown-menu.is-services,
  .nav-link-dropdown-menu:not(.is-about):not(.is-get-support) {
    padding: 1.5rem;
  }
  .button-group.is-nav-dropdown-menu {
    padding: 0;
    margin-top: .25rem;
  }
  .button-group.is-nav-dropdown-menu .button {
    padding-left: 0;
    padding-right: 0;
  }
  /* same 12px between every nav button and its panel; the space is the transparent wrapper's
     padding (part of the dropdown), so hovering across it keeps the menu open */
  .nav-link-dropdown-nav:not(.is-get-support) .nav-link-dropdown-menu-wrap {
    padding-top: .5625rem;
  }
  .nav-link-dropdown-menu-spacer.is-get-support {
    height: .75rem;
  }
}

/* Review 2026-10-26: home "Simple, Transparent, and Built to Fit Your Business" starts on the
   same line as the flip cards above it (cards sit on a thirds grid with a .25rem gap; this block
   sat on a 1 : 3.21 grid, ~100px further left). "What to Expect" heading row uses the same grid
   as its list (header--steps is-rev, in Home.tsx). */
@media screen and (min-width: 992px) {
  .padding-vertical--pricing-cta .header--simple-list.is-rev {
    grid-template-columns: 1fr 2fr;
    column-gap: .25rem;
  }
}

/* Review 2026-10-26: "See What the Right IT Partner Could Do" (home): the link sat at the bottom
   of the card, ~260px under the paragraph; it now follows the text. The blue background ellipse
   (1242px tall) was taller than its overflow-hidden wrapper once section padding tightened, so its
   top was cut flat at the case-study cards; it is scaled to fit with room to spare (also used on
   /cyber-security-risk-assessment). */
@media screen and (min-width: 992px) {
  ._2col-cta--col-wrapper.is-wide {
    justify-content: flex-start;
    row-gap: 2.5rem;
  }
  .ellipse-wrapper ._2col-cta--bg-wrapper {
    width: 108rem;
  }
}

/* Review 2026-10-26: one gap at every section break. Whatever the sections are (white, grey cards,
   a coloured CTA band, the footer), the visible space between the end of one section's content and
   the start of the next is ~136px on desktop. The base padding above gives most of it; these
   rules correct each pair of neighbouring sections whose own padding made it smaller or larger,
   scoped to that exact pair so the same section elsewhere is unaffected. Logo strips and the blog
   post body stay attached to the section above by design. Generated from a measured sweep of every
   page (scripts/qa/_markup-gaps.mjs + pair measurement). */
@media screen and (min-width: 992px) {
  .section--1col-hero + .section--legal .padding-vertical--legal {
    padding-top: 8.5rem;
  }
  .section--1col-hero + .section--legal .padding-vertical--notice {
    padding-top: 8.5rem;
  }
  .section--2col + .section--2col-with-wrapper .padding-vertical--2col-with-wrapper.is-no-padding {
    padding-top: 3rem;
  }
  .section--2col + .section--by-the-numbers .padding-vertical--by-the-numbers.is-about {
    padding-top: 3.25rem;
  }
  .section--2col-cta + .section--footer .padding-vertical--footer {
    padding-top: 8rem;
  }
  .section--2col-cta + .section--simple-list.is-darkmode .padding-vertical--simple-list {
    padding-top: 3rem;
  }
  .section--2col-simple.background-color-grey + .section--placeholder-copy .padding-vertical--3col-challenges {
    padding-top: 8.5rem;
  }
  .section--2col-table + .section--benefits .padding-vertical--benefits.is-managed {
    padding-top: 8.5rem;
  }
  .section--2col-table + .section-stats .padding-vertical--stats {
    padding-top: 1.5rem;
  }
  .section--2col-with-wrapper + .section--2col .padding-vertical--2col {
    padding-top: 8.5rem;
  }
  .section--2col-with-wrapper + .section--support-causes .padding-vertical--support-causes {
    padding-top: 3rem;
  }
  .section--3col-table + .section--cards .padding-vertical--cards.is-guarantee {
    padding-top: 8.5rem;
  }
  .section--ai-plans + .section--ai-self-check-quiz .padding-vertical--ai-self-check-quiz {
    padding-top: 3rem;
  }
  .section--ai-self-check-quiz + .section--managed-ai-table .padding-vertical--managed-ai-table {
    padding-top: 10rem;
  }
  .section--ai-self-check-quiz + .section--mission.is-managed-ai .padding-vertical--mission.is-shadow-ai {
    padding-top: 8.5rem;
  }
  .section--benefits + .section--hover-table .padding-vertical--hover-table {
    padding-top: 3rem;
  }
  .section--benefits + .section--scorecard-cta .padding-vertical--2col-cta {
    padding-top: 3rem;
  }
  .section--benefits + .section--standards .padding-vertical--standards {
    padding-top: 3rem;
  }
  .section--benefits + .section--steps.is-comparison .padding-vertical--steps.is-comparison {
    padding-top: 8.5rem;
  }
  .section--benefits + .section--tabs .padding-vertical--sub-services {
    padding-top: 10rem;
  }
  .section--benefits + .section--tabs .padding-vertical--tabs {
    padding-top: 10rem;
  }
  .section--benefits + .section--testimonials .padding-vertical--testimonials.is-single {
    padding-top: 2.875rem;
  }
  .section--benefits + .section-stats .padding-vertical--stats.is-shadow-ai {
    padding-top: 3rem;
  }
  .section--blog-body + .section--related-posts .padding-vertical--blog-related-posts {
    padding-top: 3rem;
  }
  .section--blog-grid.fab-btn-dark + .section--footer .padding-vertical--footer {
    padding-top: 8rem;
  }
  .section--by-the-numbers + .section--community-numbers .padding-vertical--community-numbers {
    padding-top: 6.75rem;
  }
  .section--by-the-numbers + .section--testimonials .padding-vertical--testimonials.is-about {
    padding-top: 8.75rem;
  }
  .section--cards + .section--faqs .padding-vertical--faqs {
    padding-top: 3rem;
  }
  .section--cards + .section--steps .padding-vertical--steps.is-about {
    padding-top: 8.5rem;
  }
  .section--cards + .section--testimonials .padding-vertical--testimonials.is-managed {
    padding-top: 8.5rem;
  }
  .section--community-numbers + .section--3col-table .padding-vertical--3col-table.is-guarantee {
    padding-top: 3rem;
  }
  .section--community-numbers + .section--cta .padding-vertical--cta {
    padding-top: 3rem;
  }
  .section--contact-form + .section--simple-list .padding-vertical--simple-list.is-contact {
    padding-top: 3rem;
  }
  .section--cta + .section--benefits .padding-vertical--benefits.is-comparison {
    padding-top: 8.5rem;
  }
  .section--cta + .section--faqs .padding-vertical--faqs.is-managed {
    padding-top: 8.5rem;
  }
  .section--cta + .section--flip-cards.is-lightmode .padding-vertical--flip-cards.is-cyber {
    padding-top: 8.5rem;
  }
  .section--cta + .section--simple-list.is-darkmode .padding-vertical--simple-list.is-assessment {
    padding-top: 8.5rem;
  }
  .section--cta + .section--steps .padding-vertical--steps {
    padding-top: 8.5rem;
  }
  .section--faqs + .section--2col-cta .padding-vertical--2col-cta.is-cyber {
    padding-top: 6.625rem;
  }
  .section--faqs + .section--footer .padding-vertical--footer {
    padding-top: 8.5rem;
  }
  .section--features + .section--scorecard-cta .padding-vertical--2col-cta {
    padding-top: 3rem;
  }
  .section--flip-cards.is-lightmode + .section--tabs-v2 .padding-vertical--tabs-v2 {
    padding-top: 3rem;
  }
  .section--frameworks + .section--2col-table .padding-vertical--2col-table.is-compliance {
    padding-top: 8.5rem;
  }
  .section--hero + .section--2col-with-wrapper .padding-vertical--2col-with-wrapper {
    padding-top: 8.5rem;
  }
  .section--hero + .section--benefits .padding-vertical--benefits.is-compliance {
    padding-top: 8.5rem;
  }
  .section--hero + .section--benefits .padding-vertical--benefits.is-managed {
    padding-top: 8.5rem;
  }
  .section--hero + .section--solutions-intro {
    padding-top: 4.5rem;
  }
  .section--hero + .section--testimonials .padding-vertical--testimonials {
    padding-top: 8.25rem;
  }
  .section--hero + .section-stats .padding-vertical--stats.is-managed-ai {
    padding-top: 8.5rem;
  }
  .section--intro + .section--benefits .padding-vertical--benefits {
    padding-top: 3rem;
  }
  .section--legal + .section--footer .padding-vertical--footer {
    padding-top: 8rem;
  }
  .section--logos + .section--benefits .padding-vertical--benefits.is-assessment {
    padding-top: 8.5rem;
  }
  .section--logos + .section--cards .padding-vertical--cards {
    padding-top: 8.5rem;
  }
  .section--logos + .section--faqs .padding-vertical--faqs.is-compliance {
    padding-top: 8.5rem;
  }
  .section--logos + .section--features .padding-vertical--features {
    padding-top: 8.5rem;
  }
  .section--logos + .section--intro .padding-vertical--intro {
    padding-top: 8.5rem;
  }
  .section--logos + .section--table .padding-vertical--table.is-comparison {
    padding-top: 8.5rem;
  }
  .section--logos + .section--testimonials .padding-vertical--testimonials.is-managed {
    padding-top: 8.5rem;
  }
  .section--managed-ai-table + .section-prompts .padding-vertical--prompts {
    padding-top: 8.5rem;
  }
  .section--map + .section--faqs .padding-vertical--faqs.is-contact {
    padding-top: 3rem;
  }
  .section--mission + .section--faqs .padding-vertical--faqs.is-managed.is-v3 {
    padding-top: 6rem;
  }
  .section--mission.is-managed-ai + .section-prompts .padding-vertical--prompts {
    padding-top: 8.5rem;
  }
  .section--placeholder-copy + .section--ai-self-check-quiz {
    padding-top: 3rem;
  }
  .section--placeholder-copy + .section--mission.is-managed-ai .padding-vertical--mission.is-rev.is-managed-ai {
    padding-top: 9rem;
  }
  .section--pricing-cta + .section--the-struggle .padding-vertical--the-struggle {
    padding-top: 8.5rem;
  }
  .section--related-posts + .section--cta .padding-vertical--cta {
    padding-top: 3rem;
  }
  .section--risks + .section--cta .padding-vertical--cta {
    padding-top: 1rem;
  }
  .section--scorecard-cta + .section--cards .padding-vertical--cards.is-assessment {
    padding-top: 4rem;
  }
  .section--scorecard-cta + .section--flip-cards .padding-vertical--flip-cards {
    padding-top: 11rem;
  }
  .section--scorecard-cta + .section--risks .padding-vertical--risks {
    padding-top: 4rem;
  }
  .section--scorecard-cta + .section--table .padding-vertical--table.is-managed {
    padding-top: 4rem;
  }
  .section--scorecard-cta + .section--testimonials .padding-vertical--testimonials {
    padding-top: 4rem;
  }
  .section--shadow-ai-risk + .section--placeholder-copy .padding-vertical--3col-challenges.is-shadow-ai {
    padding-top: 8.5rem;
  }
  .section--simple-hero + .section--awards .padding-vertical--awards {
    padding-top: 8.5rem;
  }
  .section--simple-hero + .section--legal .padding-vertical--legal {
    padding-top: 8.5rem;
  }
  .section--simple-hero + .section--mission .padding-vertical--mission {
    padding-top: 8.5rem;
  }
  .section--simple-list + .section--cta .padding-vertical--cta {
    padding-top: 3rem;
  }
  .section--simple-list + .section--footer .padding-vertical--footer {
    padding-top: 8rem;
  }
  .section--simple-list + .section--map .padding-vertical--map {
    padding-top: 3rem;
  }
  .section--standards + .section--tabs.is-compliance .padding-vertical--sub-services.is-compliance {
    padding-top: 10rem;
  }
  .section--steps + .section--footer .padding-vertical--footer {
    padding-top: 8rem;
  }
  .section--steps.is-comparison + .section--what-to-expect .padding-vertical--what-to-expect.is-comparison {
    padding-top: 8.5rem;
  }
  .section--table + .section--cta .padding-vertical--cta {
    padding-top: 3rem;
  }
  .section--table + .section--scorecard-cta .padding-vertical--2col-cta {
    padding-top: 2rem;
  }
  .section--table + .section--testimonials .padding-vertical--testimonials {
    padding-top: 7.5rem;
  }
  .section--tabs + .section--what-to-expect .padding-vertical--what-to-expect {
    padding-top: 8.5rem;
  }
  .section--tabs-v2 + .section--scorecard-cta .padding-vertical--2col-cta {
    padding-top: 8.5rem;
  }
  .section--tabs-v2 + .section--table .padding-vertical--table {
    padding-top: 8.5rem;
  }
  .section--tabs-v2 + .section--testimonials .padding-vertical--testimonials {
    padding-top: 8.5rem;
  }
  .section--tabs-v2 + .section--testimonials .padding-vertical--testimonials.is-short-bottom {
    padding-top: 8.5rem;
  }
  .section--team-image + .section--2col .padding-vertical--2col {
    padding-top: 8.5rem;
  }
  .section--testimonials + .section--3col-table .padding-vertical--3col-table {
    padding-top: 8.5rem;
  }
  .section--testimonials + .section--cards .padding-vertical--cards.is-about {
    padding-top: 3rem;
  }
  .section--testimonials + .section--cta .padding-vertical--cta {
    padding-top: 1.875rem;
  }
  .section--testimonials + .section-award-logos .padding-vertical--award-logos {
    padding-top: 3rem;
  }
  .section--testimonials + .section-stats .padding-vertical--stats {
    padding-top: 0.75rem;
  }
  .section--the-struggle + .section--tabs-v2 .padding-vertical--tabs-v2 {
    padding-top: 1.5rem;
  }
  .section--video-testimonials + .section--testimonials .padding-vertical--testimonials.is-managed {
    padding-top: 8.5rem;
  }
  .section--what-to-expect + .section--cta .padding-vertical--cta {
    padding-top: 3rem;
  }
  .section--what-to-expect + .section--tabs-v2 .padding-vertical--tabs-v2 {
    padding-top: 3rem;
  }
  .section--what-to-expect + .section--tabs-v2 .padding-vertical--tabs-v2.is-tall-top {
    padding-top: 3rem;
  }
  .section--what-to-expect + .section--testimonials .padding-vertical--testimonials {
    padding-top: 3rem;
  }
  .section-featured-blogs + .section--blog-grid.fab-btn-dark .padding-vertical--blog-grid.is-updated {
    padding-top: 8.5rem;
  }
  .section-models + .section--placeholder-copy .padding-vertical--3col-challenges.is-managed-ai {
    padding-top: 8.5rem;
  }
  .section-prompts + .section--cta .padding-vertical--cta {
    padding-top: 3rem;
  }
  .section-stats + .section--shadow-ai-risk {
    padding-top: 3rem;
  }
  .section-stats + .section--video-testimonials .padding-vertical--testimonials.is-client-success-page {
    padding-top: 3rem;
  }
  .section-stats + .section-models {
    padding-top: 3rem;
  }
  .section_cta + .section--footer .padding-vertical--footer {
    padding-top: 8.5rem;
  }
  .section_hero + .section_faq {
    padding-top: 1rem;
  }
}

/* ...continued: where the lower section is a coloured band (footer, dark tab bands, grey FAQ
   bands) its padding sits inside the colour, so the white gap is set with a margin on that pair. */
@media screen and (min-width: 992px) {
  .section--testimonials:has(.is-single) + .section--cta {
    margin-top: -1.0625rem;
  }
  .section--testimonials:not(:has(.is-single)) + .section--cta {
    margin-top: 1.125rem;
  }
  .section--2col-cta + .section--footer {
    margin-top: 3rem;
  }
  .section--ai-self-check-quiz + .section--managed-ai-table {
    margin-top: 3rem;
  }
  .section--benefits + .section--steps.is-comparison {
    margin-top: 3rem;
  }
  .section--benefits + .section--tabs {
    margin-top: 3rem;
  }
  .section--blog-grid.fab-btn-dark + .section--footer {
    margin-top: 3rem;
  }
  .section--faqs + .section--footer {
    margin-top: 3.5rem;
  }
  .section--hero + .section--solutions-intro {
    margin-top: 4rem;
  }
  .section--legal + .section--footer {
    margin-top: 3rem;
  }
  .section--scorecard-cta + .section--flip-cards {
    margin-top: 4rem;
  }
  .section--simple-list + .section--footer {
    margin-top: 3rem;
  }
  .section--standards + .section--tabs.is-compliance {
    margin-top: 3rem;
  }
  .section--steps + .section--footer {
    margin-top: 3rem;
  }
  .section--what-to-expect:has(.is-assessment) + .section--tabs-v2 {
    margin-top: 3rem;
  }
  .section_cta + .section--footer {
    margin-top: 3.5rem;
  }
  .section_hero + .section_faq {
    margin-top: 1rem;
  }
}

/* Review 2026-10-26, mobile QA: the office map keeps a usable height on phones (48% of 343px was
   ~165px), and the vCard QR lines up with the contact rows above it as on desktop (it centred). */
@media screen and (max-width: 767px) {
  .map--image-wrapper:has(.map--embed) {
    padding-top: 80%;
  }
  .contact-item--bottom-wrapper,
  .contact-item--bottom-wrapper .vcard-wrapper {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }
}

/* Mobile QA 2026-10-26: the service pages' edge-to-edge services list (margins of -5rem) widened
   the whole page on phones because its section did not clip it (page 423px wide at 375px, menu
   button pushed half off-screen). */
@media screen and (max-width: 991px) {
  .section--2col-table {
    overflow-x: clip;
  }
}

/* Mobile QA 2026-10-26: technical posts (PowerShell commands, file paths) stretched the post body
   to 470-800px on phones and the whole page scrolled sideways (menu button off-screen). Long
   strings now wrap, the column may shrink, and code and tables scroll inside themselves. */
.max-width-blog,
.blog-rich-text {
  min-width: 0;
  max-width: 100%;
}
.blog-rich-text {
  overflow-wrap: anywhere;
}
.blog-rich-text pre,
.blog-rich-text table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.blog-rich-text pre,
.blog-rich-text code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Mobile QA 2026-10-26: footer legal and trust links were 18-21px tall tap targets; give them a
   24px minimum without changing how they look. */
.footer4--link-wrapper {
  min-height: 1.5rem;
  display: inline-flex;
  align-items: center;
}