/*
 * 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;
}

/* Office address and phone beside the footer logo (NAP, 2026-10-26). Same divider and hover as
   the social links. */
.footer--brand {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  min-width: 0;
}
.footer--brand .footer4_logo-link {
  flex: none;
  width: auto;
}
.footer--contact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 2.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  font-style: normal;
}
.footer--contact-link {
  color: var(--true-white);
  opacity: 0.85;
  text-decoration: none;
  transition: opacity 0.3s, color 0.3s;
}
.footer--contact-link:hover,
.footer--contact-link:focus-visible {
  opacity: 1;
  color: var(--yellow, #ffcc33);
}
/* Tablet: the top row is a centered column (site.css), so center the address under the logo.
   Phone: the row is left-aligned (fixes.css), so the address follows. */
@media screen and (max-width: 991px) {
  .footer--brand {
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
  }
  .footer--contact {
    align-items: center;
    padding-left: 0;
    border-left: 0;
  }
}
@media screen and (max-width: 479px) {
  .footer--brand,
  .footer--contact {
    align-items: flex-start;
    text-align: left;
  }
}
@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 left this list 2026-10-27: it is the
     /it-security-scorecard HERO, so it keeps Webflow's 14rem and clears the fixed nav. At 5.5rem
     the progress bar sat under the nav.) */
  .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;
  }
  /* Solution pages: the FAQ is white (review 2026-10-27), so hero content → FAQ heading is one
     ~136px break. The CMS template's hero keeps 48px below its content (is-blog-post), the static
     solution pages' 96px (is-solutions). */
  .section_hero:has(.padding-vertical--hero.is-blog-post) + .section_faq {
    padding-top: 4rem;
  }
  .section_hero:has(.padding-vertical--hero.is-solutions) + .section_faq {
    padding-top: 1rem;
  }
  /* ...and last FAQ item → dark CTA card: 80px band padding + 56px. */
  .section_faq + .section_cta {
    padding-top: 3.5rem;
  }
}

/* ...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;
  }
}

/* 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 {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
/* MarkUp #25 (2026-10-27): display:block on the table itself left the header and rows narrower
   than the rounded box, so tables read as cut off. The table stays a table at full width and
   the embed around it scrolls instead. The post column may also shrink now, so the 22rem
   "On this page" panel no longer pushes the page wider than the screen at 992-1240px. */
.blog-body-content {
  min-width: 0;
}
.blog-rich-text table {
  width: 100%;
  max-width: 100%;
}
/* Header labels keep whole words (overflow-wrap:anywhere split "STATISTIC" at 1076px). Only in
   embeds, which can scroll; bare rich-text tables can't, so their headers may still wrap. */
.blog-rich-text .w-embed th {
  overflow-wrap: normal;
}
.blog-rich-text .w-embed:has(> table) {
  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;
}

/* Blog topic chips are real links (BlogListing; review 2026-10-27 replaced the separate
   "ab-topics" link row, which read as a second filter). The link inherits the chip's look. */
[data-topic-link] {
  color: inherit;
  text-decoration: none;
}
.ab-topic-intro {
  max-width: 48rem;
  margin: 0 0 1.5rem;
}

/* Review 2026-10-27, desktop spacing fixes. */
@media screen and (min-width: 992px) {
  /* /cyber-security "What We Secure": the circles graphic (445px tall) set the height of a
     bottom-aligned header row, leaving ~390px of white above the 189px heading block. Capped
     at 20rem tall and kept on the right. The heading block is top-aligned in the row, so it
     starts the site's one 136px under the logo strip (bottom-aligned it sat 269px under it,
     review 2026-10-27). */
  .section--features .header--features > .features--header-wrapper {
    align-self: start;
  }
  .section--features .features--image-wrapper {
    display: flex;
    justify-content: flex-end;
  }
  .section--features .features--image-wrapper img {
    width: auto;
    max-height: 20rem;
  }

  /* Service pages (all four): the grey "Part of Our Complete IT Package" card is pulled 10rem up
     over the dark tab band, but the band ended 7rem under its last row of cards, so the card
     covered their bullet lists by 48px. The band now ends 14rem under the cards: the card keeps
     its overlap and starts 4rem below them. */
  .section--tabs:has(+ .section--2col-table) .padding-vertical--sub-services {
    padding-bottom: 14rem;
  }

  /* /compliance "Frameworks we support": pulled 4rem up under the dark band's rounded foot, its
     7rem top padding left 48px between the band and the eyebrow. 12.5rem leaves the site's
     one 136px break. */
  .section--tabs.is-compliance + .section--frameworks .padding-vertical--frameworks {
    padding-top: 12.5rem;
  }
}

/* Solutions index (2026-10-27): the topic buttons filter the list now, so the chosen one keeps the
   hover look (brand blue) until it is cleared. */
.button.filter-buttons.is-active {
  border-color: var(--blue);
  background-color: var(--blue);
  color: var(--true-white);
}

/* Mobile QA 2026-10-27 */

/* Blog pagination: the "previous" link used the same right-pointing chevron as "next", so page 1
   showed a grey > beside the blue > (every width). Point it left. */
.blog-pagination-previous .blog-pagination-icon svg {
  transform: scaleX(-1);
}

/* Blog post breadcrumb: chevron + category travel together (BlogPost.tsx). */
.ab-crumb-tail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Blog posts: tables become cards under 850px (Webflow's blog embed). Their labels were 0.6rem
   (9.6px) and the cards had a drop shadow, which the brand does not use. */
/* (scoped under .mobile-table-cards: the blog block stylesheet loads after this file) */
.mobile-table-cards .mobile-table-card {
  box-shadow: none;
}
.mobile-table-cards .mobile-table-card-label {
  font-size: 0.75rem;
}

@media screen and (max-width: 991px) {
  /* /cyber-security-risk-assessment, /hack-free-guarantee: the table was pulled out to the
     screen edge (negative margins), so "Real issues..." and the icons touched it. */
  .content--3col-table {
    margin-left: 0;
    margin-right: 0;
  }
}

@media screen and (max-width: 767px) {
  /* Under 768 the hero text is centred (site.css), but the eyebrow pill kept its left
     alignment (the :not(.is-center) rule above): centre it wherever the hero is centred.
     /managed-ai and /shadow-ai keep left-aligned heroes. */
  .content--hero:not(.is-managed-ai):not(.is-shadow-ai) > .hero--eyebrow-wrapper:not(.is-center) {
    align-self: center;
  }
  /* ...and the heading: /how-we-help-the-community's H1 sat left over its centred subtitle. */
  .content--hero:not(.is-managed-ai):not(.is-shadow-ai) > .hero--heading-wrapper {
    align-items: center;
  }

  /* Footer address and phone links were 21px tall; 24px tap targets like the legal links. */
  .footer--contact-link {
    display: inline-block;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
  }

  /* Hero stat rows ("60+ Happy Clients • 3+ Years Hack-Free • ..."): they wrap on phones and
     left a "•" at the end of the first line. The dots go; the items centre with a gap. */
  .callouts-with-dots {
    justify-content: center;
    column-gap: 1rem;
    row-gap: 0.25rem;
  }
  .callouts-with-dots > .body-3:nth-child(even) {
    display: none;
  }

  /* Centred CTA cards with a checklist ("Talk to an Airdrie IT Specialist", the pricing quote
     card, the Hack-Free assessment card): the heading, text and button are centred but the list
     sat on the left. The list is centred as a block; its lines stay left-aligned. */
  .hero_card-features,
  .body2-rich-text-center-on-mobile ul {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
    text-align: left;
  }

  /* Solution pages: last FAQ item → dark CTA card on the phone rhythm (~120px, 80px of it the FAQ's
     own bottom padding). */
  .section_faq + .section_cta {
    padding-top: 2.5rem;
  }
  /* ...and the static solution pages' taller hero padding left 176px above the FAQ heading; 2rem
     matches the CMS template's 128px. */
  .section_hero:has(.padding-vertical--hero.is-solutions) + .section_faq {
    padding-top: 2rem;
  }

  /* /cyber-security: 40px between the last flip card and "What Working With Always Beyond". */
  .padding-vertical--flip-cards.is-cyber {
    padding-bottom: 5rem;
  }

  /* /get-it-support: 160px of empty blue under the hero buttons. */
  .padding-vertical--simple-hero.is-it-support {
    padding-bottom: 4rem;
  }

  /* Text-and-icon cards (/hack-free-guarantee, /cyber-security-risk-assessment, /managed-it-service,
     /compare): the card's space-between pushed ~60px between the title and the text, and the
     stacked cards were 4px apart. */
  .simple-card--item-wrapper {
    justify-content: flex-start;
    gap: 1.5rem;
  }
  .content--what-to-expect {
    row-gap: 1rem;
  }

  /* Stat cards (/hack-free-guarantee, /client-success, /compliance, community): 80px empty above
     the number, 40px below. Even padding. */
  .numbers--item-wrapper {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  /* Blog: the must-read lead card's excerpt was 14px, the other cards' 18px. */
  .blog10_main-list .blog-card-bottom > .body-3 {
    font-size: 1.125rem;
    line-height: 1.4;
  }

  /* /hack-free-guarantee CTA: the circles graphic was pushed 2rem down (Webflow) and clipped by
     the card's bottom edge, with ~100px of empty blue above it. It now sits whole, with even
     room above and below, over the dark oval. */
  ._2col-cta--col-wrapper.is-guarantee ._2col-cta--image-wrapper {
    bottom: 0;
    margin-top: -1.5rem;
    margin-bottom: 1rem;
  }
  ._2col-cta--accent-wrapper.is-guarantee {
    bottom: -12rem;
  }
}

@media screen and (max-width: 479px) {
  /* Blog cards: "September 18, 2026 • 5 min read" wrapped onto two centred lines on long dates;
     it stays on one left-aligned line like the other cards. */
  .blog_meta-wrapper,
  .featured-blog_meta-wrapper {
    flex-wrap: nowrap;
    justify-content: flex-start;
    column-gap: 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
  }

  /* Blog post breadcrumb: slightly smaller pills, so "Insights & Guides > Category" fits on one
     line for most categories. */
  .blog-breadcrumbs.is-updated {
    column-gap: 0.25rem;
  }
  .blog-breadcrumbs.is-updated .blog-category-tag.blog-page {
    padding: 0.3rem 0.625rem;
    font-size: 0.875rem;
    white-space: nowrap;
  }
}

/* Phone section rhythm (review 2026-10-27, "gap too large here on mobile"). Most section breaks
   on phones measure 120-136px; these pairs ran 141-200px. Each is corrected to ~120px on the
   side that carried the extra padding (measured with scripts/qa/_markup-gaps.mjs at W=375 and
   scripts/qa/_gap-sources.mjs). */
@media screen and (max-width: 767px) {
  /* /managed-it-service-calgary: mission band -> FAQs (200px) */
  .section--mission:has(+ .section--faqs) .padding-vertical--mission {
    padding-bottom: 5rem;
  }
  /* /managed-it-service-calgary: flip cards -> "How we help" (144px) */
  .section--flip-cards + .section--benefits .padding-vertical--benefits {
    padding-top: 5rem;
  }
  /* /about-us: testimonials -> how it works (200px) */
  .section--testimonials:has(+ .section--cards) .padding-vertical--testimonials.is-about {
    padding-bottom: 2.5rem;
  }
  /* /book-a-consultation: cards -> FAQs (184px); /cyber-security-risk-assessment: table -> FAQs (144px) */
  .section--cards + .section--faqs .padding-vertical--faqs,
  .section--3col-table + .section--faqs .padding-vertical--faqs {
    padding-top: 1rem;
  }
  /* home: "the struggle" -> tabs (145px) */
  .section--the-struggle:has(+ .section--tabs-v2) .padding-vertical--the-struggle {
    padding-bottom: 3.5rem;
  }
  /* home: what to expect -> testimonials (160px) */
  .section--what-to-expect + .section--testimonials .padding-vertical--testimonials {
    padding-top: 2.5rem;
  }
  /* /compare (144px), /managed-it-service (156px): -> testimonials */
  .section--scorecard-cta + .section--testimonials .padding-vertical--testimonials {
    padding-top: 3.5rem;
  }
  .section--table + .section--testimonials .padding-vertical--testimonials {
    padding-top: 2.75rem;
  }
  /* /compare (160px), /cyber-security-risk-assessment (184px): what to expect -> tabs */
  .section--what-to-expect + .section--tabs-v2 .padding-vertical--tabs-v2 {
    padding-top: 2.5rem;
  }
  .section--what-to-expect:has(.is-assessment) + .section--tabs-v2 .padding-vertical--tabs-v2 {
    padding-top: 1rem;
  }
  /* -> scorecard CTA card: /compare table (141px), /cyber-security features (144px),
     /cyber-security-risk-assessment hover table (168px) */
  .section--table + .section--scorecard-cta .padding-vertical--2col-cta {
    padding-top: 2.75rem;
  }
  .section--features + .section--scorecard-cta .padding-vertical--2col-cta {
    padding-top: 2.5rem;
  }
  .section--hover-table + .section--scorecard-cta .padding-vertical--2col-cta {
    padding-top: 1rem;
  }
  /* /general-inquiry: contact list -> map (160px) */
  .section--simple-list + .section--map .padding-vertical--map {
    padding-top: 2.5rem;
  }
  /* /services/*: testimonials -> simple list (152px) */
  .padding-vertical--testimonials.is-managed {
    padding-bottom: 5.5rem;
  }
}

/* Review 2026-10-27: the solution-page FAQ is white like the rest of the page (Webflow had it on a
   #f2f2f2 band). */
.section_faq {
  background-color: #fff;
}

/* MarkUp 2026-10-29 #6: /cyber-security full-width Compliance Bundle card under the six flip
   cards. Same face as a flip card (grey, 2rem radius, blue square, arrow) without the flip. */
.ab-compliance-card {
  grid-column: 1 / -1;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem;
  border-radius: 2rem;
  background-color: var(--grey);
  color: var(--blue);
}
.ab-compliance-card--body {
  max-width: 47rem;
}
.ab-compliance-card > .button {
  align-self: flex-start;
}

/* 2026-10-29 MarkUp #29: new 404 ("This Page Got Unplugged"). Inline SVG in NotFound.tsx; the
   socket's eyes blink and glance, the plug wiggles. Motion is off under prefers-reduced-motion. */
.ab-404 .image--404 {
  align-self: center;
}
.ab-404-art {
  display: block;
  width: 100%;
  height: auto;
  max-width: 37.5rem;
}
.ab-404-digit {
  font-family: PolySans, system-ui, sans-serif;
  font-weight: 700;
  font-size: 220px;
  letter-spacing: -0.04em;
  fill: #101820;
}
.ab-404-eyebrow {
  margin-bottom: 1rem;
  font-family: PolySans, system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow, #ffcc33);
}
.ab-404 .content--404 {
  align-self: center;
}
.ab-404-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.ab-404-help {
  opacity: 0.85;
}
.ab-404-help a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ab-404-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: ab404-blink 4.5s infinite;
}
.ab-404-eyes {
  animation: ab404-glance 7s ease-in-out infinite;
}
.ab-404-plug {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ab404-wiggle 2.4s ease-in-out infinite;
}
.ab-404-sparks {
  animation: ab404-spark 1.2s ease-in-out infinite;
}
@keyframes ab404-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.1); }
}
@keyframes ab404-glance {
  0%, 35%, 100% { transform: translate(0, 0); }
  45%, 70% { transform: translate(10px, 8px); }
}
@keyframes ab404-wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg) translateY(-4px); }
}
@keyframes ab404-spark {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-404-eye, .ab-404-eyes, .ab-404-plug, .ab-404-sparks { animation: none; }
}
@media screen and (max-width: 991px) {
  .ab-404 .content--404 { align-items: flex-start; }
}

/* 2026-10-29: blog tables lose the drop shadow from the blog block stylesheet (the brand uses no
   shadows; its rule is !important and loads after this file, hence body + !important). */
body .blog-rich-text table {
  box-shadow: none !important;
}

/* 2026-10-29: blog tables pasted as Webflow rich-text tables sit in figure.w-richtext-figure-type-table,
   which picked up Webflow's figure defaults: max-width 60% (the "condensed" table, MarkUp #27) and
   transparent 0px text on figure divs, so the phone cards built from them were blank. */
.w-richtext figure.w-richtext-figure-type-table {
  width: 100%;
  max-width: 100%;
}
.w-richtext figure.w-richtext-figure-type-table div {
  color: inherit;
  font-size: inherit;
}
/* ...and give the card labels/values back the sizes and colours they have on every other post. */
.w-richtext figure.w-richtext-figure-type-table .mobile-table-card-label {
  color: #1e3a5f;
  font-size: 0.75rem;
}
.w-richtext figure.w-richtext-figure-type-table .mobile-table-card-value {
  color: #374151;
  font-size: 0.85rem;
}
/* Cells break only between words (overflow-wrap:anywhere on .blog-rich-text let the browser squeeze
   columns down to "PROVIDE / R", "second / s"); a table that then doesn't fit scrolls in its box. */
.blog-rich-text table th,
.blog-rich-text table td {
  overflow-wrap: break-word;
}
.blog-rich-text table th {
  overflow-wrap: normal;
}
.w-richtext figure.w-richtext-figure-type-table > div {
  max-width: 100%;
  overflow-x: auto;
}
/* Between the phone cards (<=850px) and 1280px the post column is narrow: tighter cell padding lets
   the 7-column comparison tables fit without splitting words (the block's padding is !important). */
@media screen and (min-width: 851px) and (max-width: 1279px) {
  body .blog-rich-text table th,
  body .blog-rich-text table td {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}
/* 992-1199px also has the "On this page" panel beside the post: a little tighter still. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  body .blog-rich-text table th,
  body .blog-rich-text table td {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  body .blog-rich-text table td {
    font-size: 0.875rem !important;
  }
}

/* Launch QA 2026-11-03: the four /cyber-security "What we secure" card titles were <h1>s (6 H1s
   on the page); they are <h3> now. h3 tightens letter-spacing differently on phones, so keep the
   h1 value and the cards look the same. */
.features-item--heading-wrapper h3.heading-style-h4 { letter-spacing: -.03em; }