/* The icon font ships with the site at assets/theme/icomoon.woff.
   Icon glyphs sit in the private use area and no fallback face has anything
   to draw there: block rather than swap, so nothing wrong is painted first. */
@font-face {
  font-family: icomoon;
  src: url("../theme/icomoon.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

.page-main {
  flex: 1 0 auto;
}

.cb--mist { background: #f4f7fa; }

.cb--navy {
  background: linear-gradient(53deg, #003469 0, #003469 16%, #003e73 16%, #002556 47%, #000e3c 65%, #001441 75%, #000634 75%, #000434 100%);
  color: #fff;
}

.cb--navy h2,
.cb--navy h3,
.cb--navy a { color: #fff; }

.cb--teal {
  background: #00abb6;
  color: #003469;
}

.cb--teal h2 { color: #003469; }

.cb__kicker {
  font-size: var(--font-size--xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #00abb6;
  margin-bottom: 1.2rem;
}

.cb--navy .cb__kicker { color: #00abb6; }
.cb__kicker--purple { color: #a967aa; }
.cb__kicker--orange { color: #c56b12; }

.cb__lead {
  max-width: 62rem;
  margin: 1.2rem 0 3.2rem;
  font-size: var(--font-size);
  line-height: 1.35;
}

.cb--navy .cb__lead { color: rgba(255,255,255,.86); }

.wysiwyg-styling p + p { margin-top: 1.2rem; }

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 769px) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.mm-card {
  background: #fff;
  border: 1px solid #e4eaf0;
  border-radius: 1.2rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  min-height: 100%;
}

a.mm-card:hover { border-color: #00abb6; }

.mm-card__media {
  height: 22rem;
  overflow: hidden;
  background: #003469;
}

.mm-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mm-card__body { padding: 2.4rem; display: flex; flex-direction: column; gap: 1.2rem; flex: 1; }

.mm-card__body p { color: #4d5d73; }

.mm-card--azure { border-top: 6px solid #a967aa; }
.mm-card--sovereign { border-top: 6px solid #00abb6; }
.mm-card--database { border-top: 6px solid #00abb6; }

.mm-card__more {
  margin-top: auto;
  font-weight: 700;
  color: #003469;
  text-transform: uppercase;
  font-size: var(--font-size--s);
}

.quote-block {
  max-width: 82rem;
  margin: 0 auto;
  text-align: center;
}

.quote-block blockquote {
  margin: 0 0 1.6rem;
  font-size: var(--font-size--m);
  font-weight: 700;
  color: #003469;
  line-height: 1.3;
  text-transform: none;
}

.quote-block cite {
  font-style: normal;
  font-weight: 700;
  color: #4d5d73;
}

.fact {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.2rem;
  padding: 2rem;
}

.fact strong {
  display: block;
  font-size: var(--font-size--l);
  color: #fff;
  text-transform: uppercase;
}

.fact p { color: rgba(255,255,255,.78); margin-top: .8rem; }

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.2rem;
}

.checklist li { padding-left: 2.4rem; position: relative; }

.checklist li:before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #00abb6;
}

.checklist--purple li:before { background: #a967aa; }

.steps { display: grid; gap: 2rem; }

.step { display: grid; grid-template-columns: 5.2rem 1fr; gap: 1.6rem; }

.step__num {
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 1.2rem;
  background: #a967aa;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--font-size--m);
}

.photo-split {
  display: grid;
  gap: var(--gutter-double);
  align-items: center;
}

@media (min-width: 769px) {
  .photo-split { grid-template-columns: 1.05fr .95fr; }
}

.photo-frame {
  border-radius: 0 5rem 0 0;
  overflow: hidden;
  min-height: 40rem;
  background: #003469;
}

.photo-frame img {
  width: 100%;
  height: 100%;
  min-height: 40rem;
  object-fit: cover;
  display: block;
}

.form-card {
  background: #fff;
  border-radius: 1.6rem;
  padding: 2.8rem;
  box-shadow: 0 2rem 5rem rgba(0,4,52,.12);
}

.form-card form { display: grid; gap: 1.4rem; }

.form-card label {
  display: grid;
  gap: .6rem;
  font-weight: 700;
  color: #003469;
  font-size: var(--font-size--s);
  text-transform: uppercase;
}

.form-card input,
.form-card select,
.form-card textarea {
  width: 100%;
  border: 1px solid #d7e0ea;
  border-radius: 1.2rem;
  padding: 1.2rem 1.4rem;
  font: inherit;
  color: #1e1e1e;
  text-transform: none;
  font-weight: 400;
}

.form-card textarea { min-height: 14rem; resize: vertical; }

.form-note { font-size: var(--font-size--xs); color: #4d5d73; text-transform: none; font-weight: 400; }
.form-status { margin: 1rem 0 0; }
.form-status--error { color: #a3261f; }

.hp { position: absolute; left: -9999px; }

.page-footer {
  background: #000434;
  color: rgba(255,255,255,.78);
  margin-top: auto;
}

.page-footer-inner { padding: 0; }

.page-footer-inner__logo {
  display: block;
  margin-bottom: 3rem;
}

.page-footer-inner__logo img { width: 24.5rem; height: auto; }

.page-footer__column-title {
  color: #fff;
  font-size: var(--font-size--s);
  margin-bottom: 1.2rem;
}

.page-footer ul { list-style: none; margin: 0; padding: 0; }

.page-footer a { color: #fff; text-decoration: none; }

.page-footer a:hover { color: #f99f3f; }

.page-footer-inner__partners {
  display: block;
  width: 100%;
  max-width: 54rem;
  aspect-ratio: 3.75 / 1;
  object-fit: cover;
  object-position: left center;
  margin-left: auto;
}

.page-footer-bottom {
  border-top: 0;
  padding: 3rem 0 0;
}

.page-footer-bottom__copyright {
  display: flex;
  align-items: center;
  /* Not space-between. The two paragraphs are the legal links and the copyright
     line, and pushing them to opposite ends left an 860px hole between them at
     desktop width. On masterminds.io they read as one continuous line, so they
     sit together here too and wrap onto their own rows when there is no space. */
  justify-content: flex-start;
  gap: 1.6rem;
  flex-wrap: wrap;
  font-size: var(--font-size--xs);
}

.page-footer-bottom a { margin-right: 1.5rem; }

/* The original footer does not carry a second product navigation bar. */
.page-footer-services { display: none; }

.home-help .cb__content__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}

#services {
  scroll-margin-top: 10rem;
}

.home-help .cb__content__title a,
.cb__kicker a {
  color: inherit;
  text-decoration: none;
}

.home-help .cb__content__title a:hover,
.cb__kicker a:hover {
  text-decoration: underline;
}

.page-footer .socials a { font-size: 2.4rem; }

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@media (max-width: 360px) {
  .page-footer-inner .o-layout,
  .page-footer-inner .o-layout .o-layout {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .page-footer-inner .o-layout__item {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

  .page-footer-inner__partners,
  .page-footer-inner__logo img,
  .home .post__content-separator {
    max-width: 100%;
  }
}

.page-header__hero-content__intro { color: #fff; }
.page-header__hero-content__intro p { color: #fff; }

.page-header__top-inner__nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
  overflow: visible;
  gap: 1.2rem;
}

.page-header__top-inner__nav .mmenu__button { order: 2; }
.page-header__top-inner__nav .lang-switch { order: 1; }
.page-header__top-inner__nav .mmenu { order: 3; }

.page-header__top,
.page-header__top-inner {
  overflow: visible;
}

.page-header__hero-content .domain-logo {
  display: block;
  width: min(50rem, 88%);
  height: auto;
  max-width: none;
}

.domain-logo-heading {
  margin: 0;
  padding: 0;
}

.seo-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.page-header__hero-content .domain-logo[src$="logo-analytics.svg"] {
  width: min(60rem, 88%);
}

.post--border.group-data {
  background: linear-gradient(180deg, #00abb6 0, #033e79 70.67%) !important;
}

img.swiper-lazy,
.swiper-container,
.swiper {
  opacity: 1 !important;
}

/* The WordPress theme starts every card image at opacity 0 and waits for an
   .animate class the static build never added, so the fade had to be cancelled
   outright and the thumbnails snap in as their bytes land. Hand the fade back
   to the script instead: visible is the default here, and only a document that
   carries js-fade starts its images hidden, each one fading in when site.js
   marks it on its load event. The class is set inline in the head so it is
   present before the first image parses. Scripts off means the default stands
   and nothing is ever blank, and someone who asked for less motion never
   enters the second block at all. */
.anim-fadein {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  html.js-fade .anim-fadein:not(.animate) {
    opacity: 0;
  }
}

.cb-cards--image-icon .post__image img {
  opacity: 1 !important;
}

.cb-reviews {
  overflow: visible;
}

.cb-reviews .swiper-container,
.cb-reviews .swiper-wrapper {
  transform: none !important;
  height: auto !important;
  overflow: visible !important;
}

.cb-reviews .swiper-wrapper {
  display: block !important;
}

.cb-reviews .swiper-slide + .swiper-slide {
  display: none !important;
}

/* The data page shows two quotes, the University of Zurich and EMP (which
   appears nowhere else), as cards side by side in the style of the Health
   Check panel above, rather than one heading-sized quote under another.
   The homepage shows the University of Zurich and GolfBox quotes the same way. */
.page-template-template-data .cb-reviews .swiper-wrapper,
.cb-reviews.cb-reviews--pair .swiper-wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 38rem), 1fr));
  gap: var(--gutter);
  text-align: left;
}

.page-template-template-data .cb-reviews .swiper-slide:nth-child(2),
.cb-reviews.cb-reviews--pair .swiper-slide:nth-child(2) {
  display: block !important;
}

.page-template-template-data .cb-reviews .swiper-slide,
.cb-reviews.cb-reviews--pair .swiper-slide {
  width: auto;
}

.page-template-template-data .cb-reviews .post--review,
.cb-reviews.cb-reviews--pair .post--review {
  box-sizing: border-box;
  height: 100%;
  padding: clamp(2.8rem, 3vw, 4rem);
  border: 1px solid #dce5ed;
  border-radius: 1.6rem;
  background: #f3f6f9;
}

.page-template-template-data .cb-reviews .post--review .post__content,
.cb-reviews.cb-reviews--pair .post--review .post__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: left;
}

/* One logo box, as on the Fabric page, so the marks match in width and the
   two quotes start on the same line. */
.page-template-template-data .cb-reviews .post__logo,
.cb-reviews.cb-reviews--pair .post__logo {
  align-self: flex-start;
  width: 12rem;
  height: 4.4rem;
  margin-bottom: 2.4rem;
  object-fit: contain;
  object-position: left center;
}

.page-template-template-data .cb-reviews .post__content-intro,
.cb-reviews.cb-reviews--pair .post__content-intro {
  margin-bottom: 2.4rem;
  font-size: clamp(2rem, 1.6vw, 2.2rem);
  line-height: 1.45;
}

.page-template-template-data .cb-reviews .post__content-meta,
.cb-reviews.cb-reviews--pair .post__content-meta {
  align-self: stretch;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: auto 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid #dce5ed;
  font-size: var(--font-size--s);
}

/* Automatic hyphenation split DataMasterminds in the German quote. */
.review--whole-words .post__content-intro {
  hyphens: manual;
}

.cb-reviews .swiper-nav,
.cb-reviews .swiper-pagination {
  display: none;
}

/* The meta line is inline-flex, which drops the space between name and
   "- Organisation"; column-gap restores it without touching the stacked mobile layout. */
.cb-reviews .post__content-meta {
  column-gap: .25em;
}

.cb-reviews .post--review,
.cb-reviews .post--review .post__content {
  overflow: visible;
  height: auto;
}

.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  flex-shrink: 0;
  z-index: 60;
  min-height: 3.6rem;
  padding: 0 .3rem;
  border-radius: 10rem;
  background: rgba(217, 217, 217, .2);
}

@media (min-width: 941px) {
  .lang-switch {
    position: absolute;
    top: 50%;
    right: max(2.4rem, env(safe-area-inset-right, 0px));
    transform: translateY(-50%);
  }
}

@media (min-width: 941px) and (max-width: 1600px) {
  .lang-switch {
    min-height: 3.6rem;
    padding: 0 .3rem;
    gap: 0;
  }
  .lang-switch__code {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .lang-switch a {
    width: 1.6rem;
    min-width: 2.8rem;
    min-height: 3.6rem;
    padding: .1rem 0;
    justify-content: center;
    gap: 0;
  }
  .lang-switch__flag {
    width: 1.2rem;
    height: 1.2rem;
  }
  /* The current language keeps its code next to the flag, so the row
     says which language the page is in. A white ring alone did not read
     as "current" at this size. */
  .lang-switch a.is-active {
    width: auto;
    padding: .1rem .6rem .1rem .3rem;
    gap: .35rem;
  }
  .lang-switch a.is-active .lang-switch__code {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    font-size: 1.2rem;
    font-weight: 700;
  }
}

/* The full, stationary link handles hover and clicks. Decorative SVGs and
   hidden language labels must never become separate pointer targets. */
.lang-switch a * { pointer-events: none; }

/* Respond immediately, including when approaching from above. Keep the
   enlarged flag inside its target, with the same behaviour at wide sizes. */
@media (hover: hover) and (pointer: fine) {
  .lang-switch a:hover,
  .lang-switch a:focus-visible {
    z-index: 1;
  }
  .lang-switch a:hover .lang-switch__flag,
  .lang-switch a:focus-visible .lang-switch__flag {
    transform: scale(1.7);
  }
  /* The current one is already a labelled pill; a smaller nudge is enough. */
  .lang-switch a.is-active:hover .lang-switch__flag,
  .lang-switch a.is-active:focus-visible .lang-switch__flag {
    transform: scale(1.2);
  }
  @media (max-width: 768px) {
    .lang-switch a:hover .lang-switch__flag,
    .lang-switch a:focus-visible .lang-switch__flag { transform: scale(1.2); }
  }
}

.lang-switch a {
  position: relative;
  height: auto;
  min-height: 3.6rem;
  padding: .2rem .6rem;
  border-radius: 10rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .15s ease;
}

@media (min-width: 769px) {
  .lang-switch a { min-width: 2.8rem; justify-content: center; }
}

.lang-switch a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lang-switch__flag {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.22);
  background: #012169;
}

.lang-switch__flag svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lang-switch a:hover,
.lang-switch a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .16);
}

.lang-switch a.is-active {
  background: #fff;
  color: #003469;
}

@media (max-width: 768px) {
  .lang-switch {
    min-height: 3.2rem;
    padding: 0 .3rem;
    gap: 0;
  }
  .lang-switch a { min-height: 3.2rem; font-size: 1.2rem; padding: .15rem .3rem; }
  .lang-switch__flag { width: 1.3rem; height: 1.3rem; }
}

@media (max-width: 576px) {
  .lang-switch__code { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lang-switch a { width: 2.6rem; padding: .15rem 0; justify-content: center; }
}

@media (max-width: 1199px) {
  .page-header__top-inner__logo {
    min-width: 0;
    width: 15rem;
    height: 4.4rem;
    margin-right: 1rem;
    flex: 0 1 15rem;
  }

  .page-header__top-inner__nav {
    margin-left: auto;
    gap: .8rem;
  }

  .lang-switch__code {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .lang-switch a {
    width: 2.2rem;
    padding: .15rem 0;
    justify-content: center;
  }
}

@media (min-width: 942px) and (max-width: 1199px) {
  .lang-switch {
    top: 7rem;
    right: max(2.4rem, env(safe-area-inset-right, 0px));
    transform: none;
    background: rgba(0, 4, 52, .88);
  }
}

/* From 1200px the switcher sits in the header row after the menu, so the
   flex layout reserves its width. Pinned to the header's right edge, it
   landed on the menu pill's rounded end at every width up to about 1900px,
   because the pill ends at the content container and the pin did not. The
   menu's own margin-right is the gap between the two. */
@media (min-width: 1200px) {
  .page-header__top-inner__nav .lang-switch {
    /* relative rather than static: identical as an in-flow flex item,
       and it stays a positioning anchor for anything inside it. */
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    order: 4;
  }
}

@media (max-width: 941px) {
  .mmenu {
    right: auto;
    left: calc(100vw - min(35rem, 100vw));
    width: min(35rem, 100vw);
    transform: translateX(100%);
  }

  .mmenu--open .mmenu {
    transform: translateX(0);
  }

  .lang-switch {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
  }
}

@media (max-width: 480px) {
  .page-header__top-inner__logo {
    width: 12.5rem;
    height: 3.8rem;
    margin-right: 0;
    flex-basis: 12.5rem;
  }

  .page-header__top-inner { gap: .6rem; }
  .page-header__top-inner__nav { gap: .6rem; }

  .lang-switch {
    min-height: 3.2rem;
    padding: 0 .3rem;
    gap: 0;
  }

  .lang-switch a { width: 1.9rem; }
  .lang-switch__flag { width: 1.2rem; height: 1.2rem; }
}

.article {
  max-width: 82rem;
  margin: 0 auto;
}

.article-meta {
  color: #4d5d73;
  margin: 0 0 2.8rem;
  font-size: var(--font-size--s);
}

.article h2 {
  margin: 3.2rem 0 1.2rem;
}

.article p { margin: 0 0 1.6rem; }

.article ul {
  margin: 0 0 2rem 2rem;
}

.article li { margin-bottom: .8rem; }

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 769px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
}

.blog-card__media {
  height: 20rem;
  overflow: hidden;
  background: #003469;
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-header__hero .button,
.page-header__hero .button--default {
  background: #fff !important;
  color: #003469 !important;
}

.page-header__hero .button span,
.page-header__hero .button--default span {
  color: #003469 !important;
}

.page-header__hero .button:hover,
.page-header__hero .button--default:hover {
  background: #00abb6 !important;
  color: #fff !important;
}

.page-header__hero .button:hover span,
.page-header__hero .button--default:hover span {
  color: #fff !important;
}

.product-page .page-header__hero-content__header {
  max-width: 24ch;
}

.product-page .page-header__hero-content__intro {
  max-width: 54rem;
}

.product-page .product-how {
  padding-top: clamp(96px, 7vw, 120px);
  padding-bottom: clamp(96px, 7vw, 120px);
}

.product-page .product-how .cb__heading {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(5.6rem, 4.4vw, 8.8rem);
  max-width: 70rem;
}

.product-page .product-how .cb__heading-title,
.product-page .product-how .cb__heading-intro {
  color: #fff;
}

.product-page .product-how .cb__heading-intro {
  opacity: .86;
}

.product-page .cb__heading {
  margin-bottom: clamp(4.4rem, 3vw, 6.4rem);
}

.product-page main > .cb.cb-bg-color--default + .cb.cb-bg-color--default,
.services-page main > .cb.cb-bg-color--default + .cb.cb-bg-color--default {
  padding-top: var(--cb-spacer) !important;
}

.services-page .cb__heading {
  margin-bottom: clamp(4.4rem, 3vw, 6.4rem);
}

.services-page .offers-row .post--border .post__content {
  min-height: 22rem;
}

:is(.page-template-template-devops, .page-template-template-data, .page-template-template-analytics) #services {
  padding-top: calc(30rem + clamp(4rem, 3.5vw, 5.6rem));
  padding-bottom: clamp(3.2rem, 2.5vw, 4.8rem);
}

/* Localized domain pages use a compact intro instead of the overlapping
   English card section, so they do not need the English 30rem compensation. */
.domain-localized-intro + #services {
  padding-top: var(--cb-spacer);
}

:is(.page-template-template-devops, .page-template-template-data, .page-template-template-analytics) #services + .cb-reviews {
  padding-top: clamp(3.2rem, 2.5vw, 4.8rem);
  padding-bottom: clamp(3.2rem, 2.5vw, 4.8rem);
}

.page-template-template-devops #services > .o-container > h2 {
  max-width: 86rem;
  margin-bottom: 1.6rem;
}

.page-template-template-devops #services > .o-container > .cb__lead {
  max-width: 72rem;
  margin-bottom: clamp(4rem, 3.5vw, 6rem);
}

.product-page .cb-text-and-text .post--border .post__content,
.services-page .cb-text-and-text .post--border .post__content {
  display: flex;
  align-items: center;
  padding: 3.2rem 3.2rem;
  min-height: 100%;
}

.product-page .product-open-list,
.services-page .product-open-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.6rem;
  text-align: left;
}

.product-page .product-open-list li,
.services-page .product-open-list li {
  position: relative;
  padding-left: 2.2rem;
  color: #fff;
  line-height: 1.35;
}

.product-page .product-open-list li::before,
.services-page .product-open-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: currentColor;
}

.product-page .group-devops .product-open-list li::before,
.services-page .group-devops .product-open-list li::before { background: #a967aa; }
.product-page .group-data .product-open-list li::before,
.services-page .group-data .product-open-list li::before { background: #00abb6; }
.product-page .group-analytics .product-open-list li::before,
.services-page .group-analytics .product-open-list li::before { background: #f99f3f; }

.product-open {
  display: grid;
  gap: var(--gutter-double);
  align-items: start;
}

@media (min-width: 769px) {
  .product-open { grid-template-columns: 1.15fr .85fr; }
}

.product-open .checklist {
  background: #f4f7fa;
  border-radius: 1.2rem;
  padding: 2.8rem 2.4rem;
}

.product-open .cb__actions { margin-top: 2.4rem; }

.product-page,
.services-page {
  --service-accent: #00abb6;
}

.product-page .group-devops,
.services-page .group-devops { --service-accent: #a967aa; }
.product-page .group-data,
.services-page .group-data { --service-accent: #00abb6; }
.product-page .group-analytics,
.services-page .group-analytics { --service-accent: #f99f3f; }

.product-page .button--default,
.services-page .button--default {
  max-width: 100%;
  min-height: 4rem !important;
  height: auto;
  padding-top: .9rem !important;
  padding-bottom: .9rem !important;
  white-space: normal !important;
  text-align: center;
}

.service-hero-action {
  margin-top: 2.4rem;
}

.service-hero-action__note {
  max-width: 48rem;
  margin-top: 1.2rem;
  color: #fff;
  font-size: var(--font-size--s);
  line-height: 1.35;
  opacity: .88;
}

.service-hero-action__secondary {
  display: block;
  width: fit-content;
  margin-top: 1.6rem;
  color: #fff;
  font-size: var(--font-size--s);
  line-height: 1.35;
  text-decoration: underline;
}

.service-hero-action__secondary:hover,
.service-hero-action__secondary:focus-visible {
  color: #fff;
  text-decoration-thickness: .2rem;
}

.health-check-page .page-header__hero-content__header {
  max-width: 18ch;
}

.service-summary-section .cb__kicker {
  margin-bottom: .8rem;
}

.service-summary__title {
  max-width: 90rem;
  margin-bottom: 1.6rem;
}

.service-summary__lead {
  max-width: 80rem;
  margin-bottom: clamp(3.2rem, 3vw, 5.2rem);
  color: #38495d;
}

.service-summary {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid #dce5ed;
  border-radius: 1.2rem;
  overflow: hidden;
  background: #fff;
}

.service-summary__item {
  position: relative;
  padding: 2.4rem;
  border-top: 5px solid var(--service-accent);
  min-width: 0;
}

.service-summary__item + .service-summary__item {
  border-top-color: #dce5ed;
}

.service-summary__item h3 {
  margin-bottom: 1rem;
  font-size: var(--font-size--s);
  color: #003469;
}

.service-summary__item p {
  color: #38495d;
}

.service-summary__start {
  display: grid;
  gap: .8rem;
  margin-top: 1.6rem;
  padding: 2rem 2.4rem;
  border-left: .6rem solid var(--service-accent);
  border-radius: .6rem 1.2rem 1.2rem .6rem;
  background: #f4f7fa;
  color: #38495d;
}

.service-summary__start strong {
  color: #003469;
  font-size: var(--font-size--s);
  text-transform: uppercase;
}

.service-approach:not(.service-approach--light),
.service-jobs {
  color: #fff;
}

.service-approach:not(.service-approach--light) h2,
.service-approach:not(.service-approach--light) h3,
.service-jobs h2,
.service-jobs h3 {
  color: #fff;
}

.service-approach__layout {
  display: grid;
  gap: clamp(3.2rem, 5vw, 7.2rem);
}

.service-approach__heading p {
  margin-top: 1.6rem;
  max-width: 56rem;
  color: inherit;
  opacity: .86;
}

.service-sequence {
  display: grid;
  min-width: 0;
}

.service-step {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: 1.6rem;
  padding: 2.4rem 0;
  border-top: 1px solid rgba(255,255,255,.24);
}

.service-step:last-child {
  border-bottom: 1px solid rgba(255,255,255,.24);
}

.service-step__number {
  color: var(--service-accent);
  font-size: var(--font-size--l);
  font-weight: 700;
  line-height: 1;
}

.service-step h3 { margin-bottom: .8rem; }
.service-step p { color: inherit; opacity: .86; }

.service-approach__note {
  margin-top: 3.2rem;
  padding: 2.2rem 2.4rem;
  border-left: .6rem solid var(--service-accent);
  background: rgba(255,255,255,.1);
  color: #fff;
}

.service-approach__note strong {
  display: block;
  margin-bottom: .6rem;
  color: #fff;
  font-size: var(--font-size--m);
  text-transform: uppercase;
}

.service-approach--light {
  background: #f4f7fa !important;
}

.service-approach--light .service-approach__heading p,
.service-approach--light .service-step p {
  color: #38495d;
  opacity: 1;
}

.service-approach--light .service-step {
  padding: 2.4rem;
  border: 1px solid #dce5ed;
  border-top: 5px solid var(--service-accent);
  border-radius: 1.2rem;
  background: #fff;
}

.service-offers .cb__heading,
.service-jobs .cb__heading {
  max-width: 72rem;
}

.service-offers__note {
  max-width: 82rem;
  margin: 3.2rem auto 0;
  padding: 2.2rem 2.4rem;
  border-left: .6rem solid var(--service-accent);
  background: #f4f7fa;
  color: #38495d;
}

.service-jobs .cb__heading-title,
.service-jobs .cb__heading-intro {
  color: #fff;
}

.service-jobs .cb__heading-intro { opacity: .86; }

.service-deliverables__layout {
  display: grid;
  gap: var(--gutter-double);
  align-items: start;
}

.service-checklist {
  display: grid;
  gap: 1.4rem;
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
}

.service-checklist li {
  position: relative;
  padding-left: 2.6rem;
}

.service-checklist li::before {
  content: "";
  position: absolute;
  top: .55em;
  left: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--service-accent);
}

.service-technologies {
  padding: 2.8rem;
  border-top: .6rem solid var(--service-accent);
  border-radius: 1.2rem;
  background: #003469;
  color: #fff;
}

.service-technologies h3 {
  margin-bottom: 1.2rem;
  color: #fff;
}

.service-technologies__cta {
  display: inline-flex;
  max-width: 100%;
  margin-top: 2.4rem;
  white-space: normal !important;
  text-align: center;
}

.service-proof__inner {
  display: grid;
  gap: var(--gutter);
  align-items: center;
  padding: 3.2rem;
  border-radius: 1.2rem;
  background: #f4f7fa;
}

.service-proof__inner h2 { margin-bottom: 1.2rem; }

.service-proof__names {
  color: #003469;
  font-size: var(--font-size--m);
  font-weight: 700;
  text-transform: uppercase;
}

.service-related__list {
  border-top: 1px solid #cfdbe5;
}

.service-related__item {
  display: grid;
  gap: 1.2rem;
  padding: 2.4rem 0;
  border-bottom: 1px solid #cfdbe5;
  color: #003469;
  text-decoration: none;
}

.service-related__item > span:first-child {
  display: grid;
  gap: .6rem;
}

.service-related__item strong {
  font-size: var(--font-size--m);
  text-transform: uppercase;
}

.service-related__item > span:first-child span {
  color: #38495d;
}

.service-related__action {
  align-self: center;
  font-weight: 700;
  text-transform: uppercase;
}

.service-related__item:hover .service-related__action {
  color: #00abb6;
}

.service-why__layout {
  display: grid;
  gap: var(--gutter-double);
  align-items: start;
}

.service-choice-list {
  display: grid;
  gap: 1.6rem;
}

.product-filters {
  margin: 0 0 clamp(3.2rem, 3vw, 4.8rem);
}

[data-product-domain][hidden] {
  display: none !important;
}

.product-component__footer {
  margin-top: clamp(2.4rem, 2.5vw, 4rem);
}

.product-component__footer a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  padding: 1.8rem 0;
  border-top: 1px solid #d3dee8;
  border-bottom: 1px solid #d3dee8;
  color: #003469;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

.product-component__footer-domains {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.product-component__footer-domain {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
}

.product-component__footer-domain--devops {
  border-radius: .2rem;
  background: #a967aa;
}

.product-component__footer-domain--data {
  border-radius: 50%;
  background: #00abb6;
}

.product-component__footer-domain--analytics {
  background: #f99f3f;
  transform: rotate(45deg) scale(.76);
}

.product-component__footer-arrow {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border: 2px solid #003469;
  border-radius: 50%;
  line-height: 1;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.product-component__footer a:hover .product-component__footer-arrow,
.product-component__footer a:focus-visible .product-component__footer-arrow {
  background: #003469;
  color: #fff;
  transform: translateX(.4rem);
}

@media (max-width: 480px) {
  .product-component__footer a {
    gap: 1.2rem;
    padding: 1.6rem 0;
  }

  .product-component__footer-domains { gap: .5rem; }
  .product-component__footer-domain { width: 1.2rem; height: 1.2rem; }
}

.service-choice {
  position: relative;
  display: grid;
  gap: 2rem;
  min-width: 0;
  padding: 2.4rem 2.4rem 2.4rem 3rem;
  border: 1px solid #dce5ed;
  border-radius: 1.2rem;
  background: #fff;
  color: #003469;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.service-choice:hover {
  border-color: var(--service-accent);
  transform: translateY(-2px);
  box-shadow: 0 1.2rem 3rem rgba(0, 52, 105, .1);
}

.service-choice__rail {
  position: absolute;
  inset: 0 auto 0 0;
  width: .8rem;
  background: var(--service-accent);
}

.service-choice__content {
  display: grid;
  gap: .8rem;
  min-width: 0;
}

.service-choice__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  font-size: var(--font-size--s);
  text-transform: uppercase;
}

.service-choice__meta span { color: var(--service-accent); font-weight: 700; }

.service-choice__problem {
  font-size: var(--font-size--m);
  font-weight: 700;
  line-height: 1.18;
  text-transform: uppercase;
}

.service-choice__text { color: #38495d; }

.service-choice__action {
  align-self: center;
  font-weight: 700;
  text-transform: uppercase;
}

.service-start__grid {
  display: grid;
  gap: var(--gutter);
}

.service-start__item {
  padding: 2.4rem;
  border: 1px solid #dce5ed;
  border-top: .6rem solid var(--service-accent);
  border-radius: 1.2rem;
}

.service-start__item h3 { margin-bottom: 1rem; }
.service-start__item p { color: #38495d; }

.service-overview-proof__customers {
  max-width: 96rem;
  margin: 0 auto;
  text-align: left;
}

.service-overview-proof__customers h2 { margin-bottom: 1.4rem; }

.service-overview-proof {
  padding-bottom: clamp(4.8rem, 4vw, 6.4rem);
}

/* Keep the angled panel and its image on one shared top edge. The generic
   hero aligns shorter content to the bottom, which leaves a dark shelf above
   the panel when this component is used as the Services page closing CTA. */
.service-final-banner .page-header__hero-content {
  align-self: stretch;
}

.health-check-feature {
  scroll-margin-top: 12rem;
}

.health-check-feature__panel {
  position: relative;
  display: grid;
  min-height: 38rem;
  border: 1px solid #dce5ed;
  border-radius: 1.6rem;
  background: #000434;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 1.4rem 3.6rem rgba(0, 52, 105, .12);
}

.health-check-feature__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: clamp(3.2rem, 5vw, 6.4rem);
  background: linear-gradient(100deg, #000434 4%, #003469 100%);
}

.health-check-feature .cb__kicker {
  margin-bottom: 1rem;
  color: #00abb6;
}

.health-check-feature__title {
  max-width: 15ch;
  color: #fff;
  font-size: var(--font-size--xl);
  line-height: 1;
  text-transform: uppercase;
}

.health-check-feature__text {
  max-width: 62rem;
  margin-top: 1.8rem;
  font-size: var(--font-size--m);
  line-height: 1.35;
}

.health-check-feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.8rem;
  margin-top: 2rem;
  color: rgba(255,255,255,.82);
  font-size: var(--font-size--s);
}

.health-check-feature__meta span {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.health-check-feature__meta span::before {
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: #00abb6;
  content: "";
}

.health-check-feature__meta span:nth-child(2)::before { background: #f99f3f; }
.health-check-feature__meta span:nth-child(3)::before { background: #a967aa; }

.health-check-feature__action {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 2.8rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid #00abb6;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
}

.health-check-feature__action span {
  transition: transform .2s ease;
}

.health-check-feature__panel:hover .health-check-feature__action span,
.health-check-feature__panel:focus-visible .health-check-feature__action span {
  transform: translateX(.5rem);
}

.health-check-feature__visual {
  position: relative;
  min-height: 28rem;
  overflow: hidden;
}

.health-check-feature__visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,4,52,.08), rgba(0,4,52,.35));
  content: "";
}

.page-main .health-check-feature__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
  transition: transform .45s ease;
}

.health-check-feature__panel:hover .health-check-feature__visual img,
.health-check-feature__panel:focus-visible .health-check-feature__visual img {
  transform: scale(1.025);
}

@media (min-width: 769px) {
  .service-summary { grid-template-columns: repeat(3, 1fr); }
  .service-summary__item + .service-summary__item {
    border-top: 5px solid var(--service-accent);
    border-left: 1px solid #dce5ed;
  }
  .service-deliverables__layout { grid-template-columns: minmax(0, 1.25fr) minmax(26rem, .75fr); }
  .service-proof__inner { grid-template-columns: minmax(0, 1.4fr) minmax(24rem, .6fr); }
  .service-related__item { grid-template-columns: minmax(0, 1fr) auto; }
  .service-why__layout { grid-template-columns: minmax(24rem, .75fr) minmax(0, 1.25fr); }
  .service-choice { grid-template-columns: minmax(0, 1fr) auto; padding: 2.8rem 3.2rem 2.8rem 4rem; }
  .service-start__grid { grid-template-columns: repeat(3, 1fr); }
  .health-check-feature__panel { grid-template-columns: minmax(0, 1.05fr) minmax(32rem, .95fr); }
}

@media (min-width: 941px) {
  .service-approach--split .service-approach__layout { grid-template-columns: minmax(26rem, .7fr) minmax(0, 1.3fr); }
  .service-approach--timeline .service-approach__heading { max-width: 72rem; margin-bottom: 4rem; }
  .service-approach--timeline .service-approach__layout { display: block; }
  .service-approach--timeline .service-sequence,
  .service-approach--wave .service-sequence { grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
  .service-approach--wave .service-sequence { grid-template-columns: repeat(3, 1fr); }
  .service-approach--timeline .service-step,
  .service-approach--wave .service-step { grid-template-columns: 1fr; align-content: start; }
  .service-approach--timeline .service-step { padding: 2.4rem; border: 1px solid rgba(255,255,255,.24); border-top: 5px solid var(--service-accent); border-radius: 1.2rem; }
}

@media (max-width: 768px) {
  .service-choice__action { margin-top: .4rem; }
  .service-related__action { margin-top: .4rem; }
  .service-step { grid-template-columns: 4.2rem minmax(0, 1fr); }
  .service-step__number { font-size: var(--font-size--m); }
}

@media (max-width: 480px) {
  .service-choice { padding: 2.2rem 2rem 2.2rem 2.8rem; }
  .service-summary__item,
  .service-start__item,
  .service-technologies,
  .service-proof__inner { padding: 2rem; }
  .health-check-feature__panel { min-height: 0; }
  .health-check-feature__content { padding: 3.2rem 2.4rem; }
  .health-check-feature__title { font-size: var(--font-size--l); }
  .health-check-feature__visual { min-height: 22rem; }
}

.cb-reviews .cb__actions {
  display: flex;
  justify-content: center;
  margin-top: 2.8rem;
}

.home .logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3.2rem 4.8rem;
}

.home .logo-row img {
  height: 4.8rem;
  width: auto;
  max-width: 16rem;
  object-fit: contain;
}

.home .swiper6-container .swiper-slide + .swiper-slide,
.home .swiper-nav,
.home .swiper-pagination {
  display: none;
}

.cb__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 2.4rem;
}

.audience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 769px) {
  .audience-grid { grid-template-columns: repeat(3, 1fr); }
}

.audience {
  background: #fff;
  border: 1px solid #e4eaf0;
  border-radius: 1.2rem;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.audience--platforms { border-top: 6px solid #a967aa; }
.audience--retail { border-top: 6px solid #f99f3f; }
.audience--public { border-top: 6px solid #00abb6; }

.audience p { color: #4d5d73; }

.audience__names {
  margin-top: auto;
  font-size: var(--font-size--s);
  font-weight: 700;
  color: #003469;
}

.who-not {
  margin-top: 2.4rem;
  max-width: 78rem;
  color: #4d5d73;
}

.route {
  display: grid;
  gap: 2rem;
}

@media (min-width: 769px) {
  .route { grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
  .route .step { grid-template-columns: 1fr; }
}

.route .step__num { margin-bottom: .4rem; }
.route h3 { margin-bottom: .6rem; }
.route p { color: #4d5d73; }

.related-strip {
  display: grid;
  gap: var(--gutter);
}

@media (min-width: 769px) {
  .related-strip { grid-template-columns: repeat(2, 1fr); }
}

.home .page-blocks { overflow: visible; }

/* Keep the closing CTA out of cosmetic "banner" filters while matching the
   official component at every breakpoint. */
.cb-next-step {
  margin-top: clamp(15px, 1.0416666667vw, 30px);
  margin-bottom: clamp(30px, 2.0833333333vw, 60px);
  padding: 0 !important;
}

.cb-next-step.m-image-position--right {
  display: flex;
  padding-top: 0 !important;
}

.cb-next-step.m-image-position--right figure {
  left: initial;
  right: 0;
}

.cb-next-step.m-image-position--right .page-header__hero-content {
  margin-left: initial;
  margin-right: auto;
}

.cb-next-step.m-image-position--right .page-header__hero-content .o-container {
  padding-left: clamp(45px, 3.125vw, 90px);
  padding-right: clamp(100px, 6.9444444444vw, 200px);
}

.cb-next-step.m-image-position--right .page-header__hero-content:after {
  transform: skewX(18deg);
  left: initial;
  background: linear-gradient(89deg, #003469 0, #003469 16%, #003e73 16%, #002556 47%, #000e3c 85%, #001441 100%, #000634 100%, #000434 100%);
}

.cb-next-step .cb__content__title {
  font-size: var(--font-size--xl);
  font-weight: 700;
}

.cb-next-step .page-header__hero-content {
  padding-top: clamp(100px, 6.9444444444vw, 200px);
  padding-bottom: clamp(80px, 5.5555555556vw, 160px);
}

.page-main .cb-next-step.page-header__hero {
  position: relative;
  z-index: 1;
  min-height: 52rem;
}

.page-main .cb-next-step.page-header__hero figure,
.page-main .cb-next-step.page-header__hero figure img {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 769px) {
  .cb-next-step.m-image-position--right .page-header__hero-content .o-container {
    padding: 0 clamp(200px, 13.8888888889vw, 400px);
  }
}

@media (min-width: 1200px) {
  .cb-next-step.m-image-position--right .page-header__hero-content .o-container {
    padding-right: clamp(300px, 20.8333333333vw, 600px);
  }
}

@media (max-width: 768px) {
  .cb-next-step.m-image-position--right figure { width: 80%; }
  .cb-next-step.m-image-position--right .page-header__hero-content {
    width: 80%;
    padding-top: clamp(150px, 10.4166666667vw, 300px);
    padding-bottom: clamp(50px, 3.4722222222vw, 100px);
  }
  .page-main .cb-next-step.page-header__hero { min-height: 0; }
}

@media (max-width: 576px) {
  .cb-next-step.m-image-position--right .page-header__hero-content { width: 100%; }
}

.page-main .cb-banner.page-header__hero {
  position: relative;
  z-index: 1;
  min-height: 52rem;
}

.page-main .cb-banner.page-header__hero figure,
.page-main .cb-banner.page-header__hero figure img {
  opacity: 1;
  visibility: visible;
}

.cb-bg-color--cortex .o-container .cb__slider {
  margin-top: 0 !important;
  padding: 3.2rem 2.4rem !important;
}

.cb-bg-color--cortex .o-container .cb__slider figure {
  padding: 0 !important;
  height: auto !important;
  width: 100% !important;
}

.cb-bg-color--cortex .o-container .cb__slider figure img {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
  border-radius: 1.2rem;
  box-shadow: 0 1.2rem 3rem rgba(0, 52, 105, .18);
}

.cb-bg-color--cortex .o-container .cb__slider:after {
  margin-top: 2rem !important;
}

@media (max-width: 768px) {
  .photo-frame,
  .photo-frame img { min-height: 26rem; }
  .page-main .cb-banner.page-header__hero { min-height: 0; }
}

.page-main table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
}

.page-main .article {
  max-width: 86rem;
}

.page-main .post__single-content {
  max-width: none;
}

body.blog .page-header__hero img.has-focus-point {
  object-fit: cover;
  object-position: 76% 39%;
}

body.blog:not(.blog--paged) .o-layout[data-blog-list] > .o-layout__item:nth-child(n + 13) {
  display: none;
}

body.blog .o-layout[data-blog-list] > .o-layout__item.is-hidden {
  display: none !important;
}

.offers-row .post--border .post__content {
  padding: 2.8rem 2.4rem 2.4rem;
}

.offers-row .post__content-title {
  margin-bottom: 1.2rem;
}

.offers-row .post__content-link {
  justify-content: center;
  min-width: 24rem;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.blog-grid {
  display: grid;
  gap: var(--gutter);
}

@media (min-width: 769px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
}

.cb-masterminds .mastermind-item[hidden] {
  display: none !important;
}

/* Balanced hero headlines: avoid a single orphaned word on the last line */
.product-page .page-header__hero-content__header,
.services-page .page-header__hero-content__header,
.health-check-page .page-header__hero-content__header {
  text-wrap: balance;
}

/* Client logo band on the services overview and the contact page.
   Still, not scrolling: a logo that slides past cannot be read by someone
   looking for a name they recognise, and motion reads as decoration where the
   point is evidence. Every client is visible at once, wrapping onto as many
   rows as the width needs. */
.logo-band-section { padding: clamp(3.2rem, 3vw, 4.8rem) 0; }

/* The band sits inside the page's content column rather than running edge to
   edge: on a wide screen a row of ten marks across the whole viewport read as
   a separate stripe rather than part of the page. On a desktop the eleven marks
   share one row that meets the same left and right edges as the intro block
   above it; on narrower screens they wrap and centre. */
.logo-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2.4rem, 3vw, 4rem) clamp(2.4rem, 3vw, 4rem);
  padding: 0;
}

@media (min-width: 1200px) {
  /* Eleven equal cells across the column, so the row can never be wider than the
     block above it: each mark scales to its cell rather than the row growing
     to the marks. The first and last marks sit on the column's edges. */
  .logo-band {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 2rem;
    justify-items: center;
  }
  .logo-band img { height: auto; max-height: 34px; max-width: 100%; width: auto; object-fit: contain; }
  .logo-band img:first-child { justify-self: start; }
  .logo-band img:last-child { justify-self: end; }
}

.logo-band img {
  height: 38px;
  width: auto;
  flex: none;
  /* The marks arrive in many weights and colours. A touch of restraint holds
     them together as one row without washing out the recognisable ones. */
  opacity: .75;
  filter: saturate(.9);
  transition: opacity .2s ease, filter .2s ease;
}

.logo-band img:hover { opacity: 1; filter: none; }

@media (max-width: 768px) {
  .logo-band { gap: 2.8rem 3.6rem; }
  .logo-band img { height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-band img { transition: none; }
}

/* Health Check featured card inside the services grid.
   The card frame is the article background showing through the 2px inset
   of .post--border:after, so the tri-color accent goes on the background:
   border-image would ignore the rounded corners. */
.health-feature-card {
  background: linear-gradient(100deg, #00abb6 0%, #f99f3f 50%, #a967aa 100%) !important;
}



/* Contact page: trust column beside the form */
.contact-expect { margin: 2.4rem 0 0; padding: 0; list-style: none; }
.contact-expect li {
  position: relative;
  padding: .9rem 0 .9rem 3rem;
  border-top: 1px solid #dce5ed;
  font-size: var(--font-size--s);
}
.contact-expect li::before {
  position: absolute;
  left: 0;
  top: 1.5rem;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: #00abb6;
  content: "";
}
.contact-expect li:nth-child(2)::before { background: #f99f3f; }
.contact-expect li:nth-child(3)::before { background: #a967aa; }
.contact-mail { margin-top: 2.4rem; }

/* Keep the intro column visually aligned with the taller form card */
@media (min-width: 769px) {
  .contact-intro { align-self: center; }
}


/* Domain pages: hero headline under the sub-brand logo */
.page-template-template-devops .page-header__hero-content__intro,
.page-template-template-data .page-header__hero-content__intro,
.page-template-template-analytics .page-header__hero-content__intro {
  max-width: 62rem;
}
.domain-hero__headline {
  margin: 0 0 1.2rem;
  color: #fff;
  font-family: "PT Sans Narrow", Verdana, sans-serif;
  font-size: var(--font-size--xl);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Domain pages: Health Check entry band */
.domain-health__panel {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding: clamp(2.8rem, 4vw, 4.4rem);
  border: 1px solid #dce5ed;
  border-radius: 1.6rem;
  background: #f3f6f9;
  color: #003469;
  text-decoration: none;
}
.domain-health__panel:hover,
.domain-health__panel:focus-visible { border-color: #00abb6; }
.domain-health__content { display: block; min-width: 0; }
.domain-health .cb__kicker { display: block; margin-bottom: .8rem; color: #00abb6; }
.domain-health__title {
  display: block;
  margin-bottom: 1rem;
  font-family: "PT Sans Narrow", Verdana, sans-serif;
  font-size: var(--font-size--m);
  line-height: 1.1;
  text-transform: uppercase;
}
.domain-health__text { display: block; max-width: 68rem; color: #42536a; }
.domain-health__action {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid #00abb6;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
.domain-health__panel:hover .domain-health__action span { transform: translateX(.5rem); }
.domain-health__action span { transition: transform .2s ease; }
@media (min-width: 769px) {
  .domain-health__panel { grid-template-columns: minmax(0, 1fr) auto; column-gap: 4rem; }
}

/* Header: the desktop nav needs ~1200px to fit alongside the logo and language
   switcher, but theme.css switches to it at 941px, so between those widths the
   nav overflowed the viewport and clipped the language switcher. Keep the
   burger menu until there is genuinely room for the inline nav. */
@media (max-width: 1199px) {
  .mmenu {
    position: fixed;
    z-index: 98;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 35rem;
    background-color: #003469;
    border-radius: 0;
    min-height: 0;
    padding: 8rem 3rem 3rem;
    margin-right: 0;
    overflow-y: auto;
    transition: transform .3s ease-out;
    transform: translateX(35rem);
  }

  body.mmenu--open .mmenu { transform: translateX(0); }
  .mmenu > ul { display: block; }
  .mmenu__item-lvl1 { margin: 0; }
  .mmenu__item-lvl1 > a { display: block; padding: 1.2rem 0; color: #fff; }
  .mmenu__button {
    display: flex;
    align-items: center;
    height: 2rem;
    width: auto;
    visibility: visible;
    opacity: 1;
  }

  .mmenu__button-lines { position: relative; width: 2rem; }

  .mmenu__button-lines span {
    position: relative;
    display: block;
    width: 2rem;
    height: .2rem;
    background: #fff;
    transition: all .2s ease;
  }

  .mmenu__button-lines span:nth-child(1) { top: 0; }
  .mmenu__button-lines span:nth-child(2) { margin: .7rem 0; opacity: 1; }
  .mmenu__button-lines span:nth-child(3) { bottom: 0; }

  body.mmenu--open .mmenu__button-lines span:nth-child(1) { top: .2rem; transform: rotate(45deg); }
  body.mmenu--open .mmenu__button-lines span:nth-child(2) { margin: 0; opacity: 0; }
  body.mmenu--open .mmenu__button-lines span:nth-child(3) { bottom: .7rem; transform: rotate(-45deg); }

  /* The theme draws the MENU label as an absolutely positioned pseudo-element
     at left:-4rem, so it takes no space of its own and lands on top of the
     language flags beside it at every width below 941px. Put it back in the
     button's own flow: the button is already a flex row, so the label becomes
     a sibling of the three lines and the gap in the header keeps it clear of
     the flags. */
  .mmenu__button:before {
    display: block;
    position: static;
    left: auto;
    top: auto;
    margin-right: .8rem;
    line-height: 1;
  }
  .mmenu__overlay { display: block; }
}
/* Paged product grid.
   Seven products do not divide by three, so the last card sat alone on its own
   row. The cards are grouped into full screens instead, one screen per swipe,
   with dots underneath. Everything below only applies once the script has added
   .is-paged: with no JavaScript the grid stays exactly as it was, which is the
   correct fallback rather than a broken carousel. */
/* The product row scrolls sideways rather than paging into whole screens.
   Seven products over pages of six left the seventh alone on a second page,
   which reads as a mistake. As one row the seventh is just the next card
   along, and a sliver of it is visible from the start, which is what tells the
   reader there is more. */
.offers-pager {
  /* The list it is inserted into is itself a twelve-column grid, so without
     this the pager becomes a single grid item one column wide. */
  grid-column: 1 / -1;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* The card shadows and focus rings would be clipped by the scroll container,
     so give them room and pull it back with a negative margin. */
  padding: 1rem 0;
  margin: -1rem 0;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.offers-pager::-webkit-scrollbar { display: none; }

/* Two rows deep, flowing into columns, scrolling sideways. Columns are sized so
   three fit with part of the fourth showing: an exact three would look like a
   finished block with nothing after it, and the sliver is what tells the reader
   there is more. */
/* grid-template-columns is cleared explicitly: this track sits inside
   .o-layout, which is a twelve-column grid, and an inherited explicit template
   would win over grid-auto-columns and size every card to a twelfth. */
.offers-track {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: var(--offers-column);
  align-items: stretch;
  gap: var(--gutter);
  padding-right: var(--gutter);
}

/* The cards keep the u-size classes the grid layout gives them, and those set
   grid-column: span 4, span 6, span 12. Inside this track a column is one card
   wide, so a span of four made each card occupy four columns and swallow the
   sizing entirely. Each card is one column here. */
.offers-pager .o-layout__item {
  grid-column: auto;
  grid-row: auto;
  max-width: none;
  width: auto;
  min-width: 0;
  padding: 0;
  scroll-snap-align: start;
}

/* Cards are never stretched to double height: a card twice the height of its
   neighbours looks wrong, whatever it is filling. An odd count is solved by
   having the right number of cards instead, which is why the Health Check is the
   eighth card rather than a panel above the grid. */

/* The column width is carried on the scroll container, whose width is the
   visible one, and read by the track. Columns are exact thirds: the strip is a
   stepped carousel now, so the affordance for "there is more" is the arrows
   overlaying its edges, and a sliced fourth card would just look broken. */
.offers-pager {
  /* cqi is 1% of the container's inline size, which is the visible width, so
     the column keeps its meaning inside a track that scrolls. */
  container-type: inline-size;
  --offers-column: calc((100cqi - 2 * var(--gutter)) / 3);
}

@media (max-width: 1199px) {
  .offers-pager { --offers-column: calc((100cqi - var(--gutter)) / 2); }
}

@media (max-width: 768px) {
  /* One row on a phone: two half-height rows would leave nothing readable.
     The arrows go too. Swipe is the control there, and the visible sliver of
     the next card is the hint that more follows. */
  .offers-pager { --offers-column: 82cqi; }
  .offers-track { grid-template-rows: auto; }
}

/* The arrows sit just below the strip, as a pair on the right. Over the cards
   they covered content; under them they drive the same stepped movement
   without standing on anything. A hidden arrow keeps its space so its partner
   never shifts sideways. */
.offers-arrows {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.2rem;
  margin-top: 2.4rem;
}

.offers-arrows[hidden] { display: none; }

.offers-arrow {
  width: 6rem;
  height: 6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f99f3f;
  color: #fff;
  font-size: var(--font-size--l);
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(1, 17, 68, .25);
  transition: background .18s ease, transform .18s ease, opacity .25s ease;
}

.offers-arrow:hover:not(:disabled) { background: #003469; transform: scale(1.06); }

/* An arrow with nothing in its direction disappears rather than dims: at the
   start there is no "previous", so showing a grey button would only pose a
   question the reader cannot act on. */
.offers-arrow:disabled { opacity: 0; pointer-events: none; cursor: default; }

/* No arrows on phones. Swipe is the control there, and the visible sliver of
   the next card is the hint that more follows. This lives after the overlay
   block above because the later rule wins the cascade. */
@media (max-width: 768px) {
  .offers-arrows { display: none; }
}

.offers-arrow:focus-visible {
  outline: 2px solid var(--color-secondary, #00ABB6);
  outline-offset: 3px;
}



@media (prefers-reduced-motion: reduce) {
  .offers-pager { scroll-behavior: auto; }
  .offers-arrow { transition: none; }
}


/* ---------- 404 ----------
   A trail marker rather than a shrug. The number is the sign, the routes below
   are where people who reach this page were usually trying to go. */
/* The block is centred and held to a reading width. Left-aligned in a 1280px
   container it sat in the corner of a mostly empty page, which made the empty
   space look like the mistake. */
.four-section { padding: clamp(4rem, 4vw, 6rem) 0 clamp(5.6rem, 6vw, 8rem); }
.four-section .o-container { display: flex; flex-direction: column; align-items: center; text-align: center; }

.four-marker {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  padding: 2.4rem 3.2rem;
  border-radius: .8rem;
  background: linear-gradient(150deg, #003469 0%, #00abb6 100%);
  color: #fff;
  /* Tilted like a marker post pushed into the ground, not like a mistake. */
  transform: rotate(-2deg);
  box-shadow: 0 1.6rem 4rem rgba(0, 52, 105, .22);
}

.four-marker__number {
  font-size: clamp(5.6rem, 9vw, 9.6rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.02em;
}

.four-marker__sign {
  font-size: var(--font-size--xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .85;
}

.four-lead {
  max-width: 58rem;
  margin: clamp(2.4rem, 3vw, 3.6rem) 0 clamp(2.4rem, 3vw, 3.2rem);
  font-size: var(--font-size--s);
  line-height: 1.5;
  color: #3d4854;
}

/* Azure serves this one 404 file at every missing address, including /nl/,
   /de/ and /sv/ ones, so all four language bodies live in it. English is the
   only block visible in the markup, which is what a visitor without JavaScript
   reads. The inline script in the head writes data-page-lang on the root
   element before the blocks are parsed; these two rules then swap the pair, so
   the wrong language is never painted.
   The three hidden blocks are complete copies of the page, so the document
   carries four main elements. That is deliberate: it is the price of one file
   serving four languages with the navigation and footer translated too. The
   duplicated fixed-header-trigger id is stripped from the hidden blocks in
   build-site.mjs, and the hidden ones are out of the accessibility tree. */
[data-page-lang] .four-lang { display: none; }
[data-page-lang="en"] .four-lang[data-lang="en"],
[data-page-lang="nl"] .four-lang[data-lang="nl"],
[data-page-lang="de"] .four-lang[data-lang="de"],
[data-page-lang="sv"] .four-lang[data-lang="sv"],
[data-page-lang="pt"] .four-lang[data-lang="pt"] { display: block; }

/* Portuguese hero headlines run longer than the English ones and their spans
   wrapped into an orphaned last word. Balanced wrapping evens the lines out
   where the browser supports it and changes nothing where it does not. */
html[lang="pt"] .page-header__hero-content__header { text-wrap: balance; }

/* The nearest marked path, printed only when the requested address is clearly
   closest to one real route. It sits between the lead and the route cards, in
   navy on the default surface, because it is a neutral wayfinding line rather
   than a domain signal. */
.four-nearest {
  max-width: 58rem;
  margin: 0 0 clamp(2.4rem, 3vw, 3.2rem);
  font-size: var(--font-size--s);
  line-height: 1.5;
  color: #003469;
}

.four-nearest__link { font-weight: 700; word-break: break-word; }

.four-routes {
  width: 100%;
  max-width: 76rem;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .four-marker { transform: none; }
}

/* The 404 heading is short enough to break badly: "THIS PATH IS NOT ON THE" then
   "MAP". Balancing splits it into two even lines. */
.error404 .page-header__hero-content__header { text-wrap: balance; }

/* Careers: one or two openings.
   The scraped archive puts job cards in a three-column grid. At one opening
   that leaves a narrow portrait card marooned beside two empty columns, and
   the card's own padding stretches it into the tallest card on the site. The
   wide card lays the photograph beside the text instead, so a single role
   fills the row and reads as a job rather than a blue slab. Three or more
   openings keep the original grid, which build-site.mjs decides. */
.job-wide__list {
  display: grid;
  gap: clamp(2rem, 2.5vw, 3rem);
}

.job-wide {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  overflow: hidden;
}

@media (min-width: 769px) {
  .job-wide { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
}

.job-wide__media {
  position: relative;
  min-height: 24rem;
}

.job-wide__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* The shared .post__content centres its text and reserves room for a card that
   is taller than it is wide. Neither suits a landscape card. */
.job-wide__content {
  align-items: flex-start;
  text-align: left;
  justify-content: center;
  padding: clamp(2.8rem, 3vw, 4.4rem);
}

.job-wide__content .post__content-meta { justify-content: flex-start; }
.job-wide__content .post__content-intro { margin-bottom: clamp(1.6rem, 1.6vw, 2.4rem); }
.job-wide__content .post__content-link { margin-top: clamp(1.6rem, 1.6vw, 2.4rem); }

/* The scraped tags linked to /blogs/, which is not where a job tag leads.
   They are labels here, so they are rendered as text. */
/* The portrait card pulls its tag row out to the card edges with negative
   margins and centres it. Both have to be undone for a left-aligned column. */
.job-wide__content .job-wide__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: flex-start;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}

.job-wide__tag {
  display: inline-block;
  padding: .4rem 1.2rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, .12);
  font-size: var(--font-size--xs);
  line-height: 1.6;
}


/* Three details inherited from the portrait card that do not survive the
   landscape one. The meta items sit in an inline-flex row with no gap, so
   "remote" and "Full-time" run together as "REMOTEFULL-TIME". The intro
   carries a centred rule above it, which floats loose once the text is
   left-aligned. And the photograph needs the card's rounded corners on the
   side it actually occupies. */
.job-wide__content .post__content-meta { gap: 1.6rem; flex-wrap: wrap; }
.job-wide__content .post__content-meta-item { gap: .6rem; }
.job-wide__content .post__content-intro:before { display: none; }

.job-wide__media { border-radius: 3rem 0 0 3rem; overflow: hidden; }

@media (max-width: 768px) {
  .job-wide__media { border-radius: 3rem 3rem 0 0; }
}

/* Consent line above the submit button on every form. */
label.form-consent, .form-card label.form-consent, .fabric-form-card label.form-consent, .health-form-card label.form-consent { display: flex; flex-direction: row; gap: 1rem; align-items: flex-start; margin: 0 0 1.6rem; font-size: 1.4rem; line-height: 1.45; letter-spacing: 0; text-transform: none; font-weight: 400; color: #4d5d73; cursor: pointer; }
.form-consent input { margin: .3rem 0 0; width: 1.8rem; height: 1.8rem; flex: 0 0 auto; }
.apply-form-card { margin-top: 2.4rem; }
.apply-form-card input[type="file"] { padding: .8rem 0; }

/* Phones: nothing to read under 14px, nothing to tap under 40px. */
@media (max-width: 768px) {
  .cb__kicker, .form-note, .page-header__hero-content__meta-item, .post__content-meta-item, .cb-breadcrumbs__crumbs, .hc-start-choice small, .page-footer-bottom__copyright, .page-footer-bottom__copyright a, .lang-switch a { font-size: 1.4rem; }
  .blog-filter-btn, .filter-btn, .product-filter { min-height: 4rem; display: inline-flex; align-items: center; padding-top: .6rem; padding-bottom: .6rem; }
  .go-to { font-size: 1.4rem !important; }
  .go-to ~ a { min-height: 4rem; display: inline-flex; align-items: center; }
}

/* "Choose a strong place to begin" on /services/. The three cards reuse
   .mm-card, so only the intent list below them needs rules of its own; each row
   is a goal, our answer, and the page that answers it. Navy and grey only,
   because these six rows cross all three domains. */
.services-begin__starts { margin-bottom: clamp(3.2rem, 3vw, 4.8rem); }

.services-begin__intents {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid #e4eaf0;
}

.services-begin__intents li {
  display: grid;
  gap: .8rem;
  padding: 2.4rem 0;
  border-bottom: 1px solid #e4eaf0;
}

.services-begin__intent {
  margin: 0;
  color: #003469;
  font-weight: 700;
  font-size: var(--font-size--m);
  line-height: 1.35;
}

.services-begin__response { margin: 0; color: #4d5d73; }

.services-begin__link {
  justify-self: start;
  font-weight: 700;
  color: #003469;
  text-transform: uppercase;
  font-size: var(--font-size--s);
  text-decoration: none;
}

.services-begin__link:hover { color: #00abb6; }

@media (min-width: 769px) {
  .services-begin__intents li {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
    align-items: baseline;
    gap: var(--gutter);
  }
}

/* The commercial pages now show the trail their structured data already
   declares. The nav element is what tells this trail apart from the article
   and WordPress ones, which keep their own look. On an article the band's
   bottom padding carries the body; here the next section brings its own, so
   the band would leave about 150px of empty white under the hero. Tighten it,
   and drop the article's half opacity: on a landing page this line is the
   only thing telling a visitor from search where they are. */
.cb-breadcrumbs:has(> .o-container > nav.cb-breadcrumbs__crumbs) { padding-bottom: 1.6rem; }
.cb-breadcrumbs nav.cb-breadcrumbs__crumbs { text-transform: none; }
.cb-breadcrumbs nav.cb-breadcrumbs__crumbs a { opacity: 1; color: #003469; }
.cb-breadcrumbs nav.cb-breadcrumbs__crumbs .breadcrumb_last { opacity: .65; }

/* ---------- Code blocks ----------
   Twenty-one <pre> blocks of PowerShell, dbatools, T-SQL and error output sit
   across six articles, and the only rule that reached them was theme.css's
   pre{margin-bottom;max-width;overflow;padding}: no panel, no border, and no
   monospace face. A navy tint reads as a quiet surface rather than a domain
   colour, per docs/brand-colours.md.

   The scraped articles also bring a hidden <pre> holding a copy textarea, left
   behind by a WordPress plugin and kept out of the layout by display:none on
   its parent. It must stay invisible, so it is excluded here and skipped in
   site.js. */

/* The wrapper site.js puts around each block. It carries the copy control, so
   the control is never a child of the text a reader selects or copies. With
   JavaScript off no wrapper exists and the bare <pre> below still styles. */
.code-block { position: relative; }

main pre:not(.code-block-pro-copy-button-pre) {
  /* The shiki blocks from one WordPress plugin carry an inline
     background-color, which only !important can beat. */
  background-color: #f4f7fa !important;
  /* A quiet shading on the right edge, decoration rather than a scroll
     signal: it is painted whether or not the block overflows. */
  background-image: linear-gradient(to left, rgba(0, 52, 105, .12), rgba(0, 52, 105, 0));
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 2.4rem 100%;
  border: 1px solid #dce5ed;
  border-radius: .8rem;
  font-family: Consolas, "Courier New", monospace;
  font-size: 1.5rem;
  line-height: 1.5;
  color: #000434;
  overflow-x: auto;
  /* Room in the top right for the copy control site.js appends beside it. */
  padding: 3.6rem 1.6rem 1.6rem;
  -webkit-overflow-scrolling: touch;
}

main pre:not(.code-block-pro-copy-button-pre) code {
  font-family: inherit;
  font-size: inherit;
  background: none;
  padding: 0;
}

/* Appended by site.js, so it never exists without JavaScript. Kept out of the
   selection: a wrapper stops the label joining the block's own text, but a
   selection dragged across the whole article still crosses the button, and the
   word would arrive in the paste between one command and the next. */
.code-copy {
  position: absolute;
  top: .6rem;
  right: .6rem;
  -webkit-user-select: none;
  user-select: none;
  padding: .4rem 1rem;
  border: 1px solid #003469;
  border-radius: .4rem;
  background: #fff;
  color: #003469;
  font-family: "PT Sans Narrow", Verdana, sans-serif;
  font-size: 1.4rem;
  line-height: 1.6;
  cursor: pointer;
}

.code-copy:hover { background: #003469; color: #fff; }

.code-copy:focus-visible {
  outline: 2px solid var(--color-secondary, #00ABB6);
  outline-offset: 3px;
}

/* The confirmation is spoken, not only shown, and never selected: the failure
   line tells a reader to select the text, so it must not be inside what they
   then select. */
.code-copy-status {
  position: absolute;
  -webkit-user-select: none;
  user-select: none;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The six verification commands on the website security page are the other
   place a reader is meant to copy and run a line. They are <code> in a list,
   not <pre>, so the list item is the wrapper. The command panel is the element
   that scrolls, so padding inside it would scroll away and let a long line run
   under the button: the panel is shortened instead, and the button sits in the
   gutter beside it. */
.ws-checks li { position: relative; padding-right: 9rem; }
.ws-checks .code-copy { top: .9rem; right: 0; }

/* Keyboard access. Three things that were missing rather than styled wrongly:
   a way past the eight-item nav and the flag switch on every page, a menu
   button a keyboard can reach, and a focus ring that is visible on the navy
   hero as well as on white. */

/* The skip link is off-screen until it takes focus, so it costs a mouse
   visitor nothing and is the first stop for everyone else. Deep navy rather
   than navy, because it appears over the navy header. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 1.2rem 2rem;
  background: #000434;
  color: #fff;
  font-size: 1.6rem;
  text-decoration: none;
}

/* Full width across the top rather than a box at the left, so the focused link
   does not sit over the wordmark. */
.skip-link:focus {
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
  padding: 2rem;
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* main takes tabindex="-1" so the skip link moves focus there and not just the
   scroll position; the ring on a whole page of content would be noise. */
.page-main:focus { outline: none; }

/* The menu control is a <button> now. The theme styled a div, so the user agent
   button box has to be reset back to what it looked like. */
button.mmenu__button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* One ring for the whole site. Teal reads clearly on white and on the tints;
   inside the navy header, the menu panel and the hero it would not, so those
   three switch to white. Component rules that already draw their own focus
   state keep it: they come later in the cascade or carry more specificity. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid #00abb6;
  outline-offset: 3px;
}

.page-header a:focus-visible,
.page-header button:focus-visible,
.mmenu a:focus-visible,
.fabric-hero a:focus-visible,
.fabric-hero button:focus-visible {
  outline-color: #fff;
}

/* blocks.css names the typed inputs one by one, and its outline shorthand
   carries a colour only, which resets outline-style to none. That rule is more
   specific than the generic input:focus-visible above, so without naming the
   same types here the email and telephone fields on every enquiry form would
   show no ring at all. */
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="url"]:focus-visible,
input[type="search"]:focus-visible,
input[type="number"]:focus-visible,
input[type="password"]:focus-visible,
input[type="date"]:focus-visible,
input[type="time"]:focus-visible {
  outline: 2px solid #00abb6;
  outline-offset: 3px;
}

/* From 1200px the panel is the ordinary nav bar (the max-width: 1199px block
   above keeps the burger until there is room for the inline nav) and the
   button is a zero-sized leftover, so it stays a tab stop that announces a
   collapsed menu doing nothing. Hiding it any earlier leaves 941 to 1199px
   with no navigation at all. */
@media (min-width: 1200px) {
  .mmenu__button { display: none; }
}

.mmenu__branch { position: relative; padding-right: 2rem; }
.mmenu__disclosure { position: static; }
.mmenu__disclosure > summary { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2.8rem; color: #fff; cursor: pointer; list-style: none; }
.mmenu__disclosure > summary::-webkit-details-marker { display: none; }
.mmenu__disclosure > summary, .mmenu__disclosure > summary:hover { padding: 0; border: 0; background: none; }
.mmenu__disclosure > summary::marker { content: ""; }
.mmenu__disclosure > summary:focus-visible { outline-color: #fff; }
.mmenu__disclosure > summary span { width: .6rem; height: .6rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-.2rem) rotate(45deg); }
.mmenu__disclosure[open] > summary span { transform: translateY(.2rem) rotate(225deg); }
.mmenu__disclosure .mmenu__children { position: absolute; top: calc(100% + .8rem); left: -1.6rem; z-index: 5; width: max-content; max-width: calc(100vw - 3.2rem); margin: 0; padding: .4rem 0; background: #003469; border: 0; border-radius: 0 0 .8rem .8rem; text-align: left; }
.mmenu__children::before { content: ""; position: absolute; inset: -.8rem 0 100%; }
.mmenu .mmenu__children a { display: block; padding: .9rem 1.6rem; color: #fff; font-size: 1.7rem; line-height: 1.4; white-space: nowrap; text-align: left; }
.mmenu .mmenu__children a:hover, .mmenu .mmenu__children a:focus-visible { background: none; color: #fff; text-decoration: underline; text-decoration-color: #f99f3f; text-underline-offset: .5rem; }
@media (min-width: 1200px) and (max-width: 1350px) {
  .mmenu__item-lvl1 { margin-inline: .4rem; }
  html[lang="pt"] .mmenu__item-lvl1 { margin-inline: .1rem; }
}
/* Leave room when the full language labels return beside the longer menu. */
@media (min-width: 1601px) and (max-width: 1750px) {
  html[lang="pt"] .mmenu__item-lvl1 { margin-inline: .6rem; }
}
@media (max-width: 1199px) {
  .mmenu__branch { padding-right: 0; }
  .mmenu__branch > a { padding-right: 4.4rem; }
  .mmenu__disclosure > summary { position: absolute; top: 0; right: 0; width: 4.4rem; height: 4.8rem; }
  .mmenu__disclosure .mmenu__children { position: static; width: auto; margin: 0 0 1.2rem; padding: 0 0 0 1.4rem; background: transparent; border-left: 1px solid #f99f3f; border-radius: 0; }
  .mmenu__children::before { display: none; }
  .mmenu .mmenu__children a { min-height: 4.4rem; padding: 1rem 0; white-space: normal; }
}

/* ---------- Cross-document view transition ----------
   Navigating between two pages of this site repaints the whole document, and
   because every page opens on a full-bleed hero photograph the browser shows a
   white frame between the two. A cross-document transition cross-fades instead.
   The at-rule sits inside the reduced-motion query so a visitor who asked for
   less movement gets today's plain navigation, and browsers without support
   ignore the at-rule and navigate as they always have. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  /* The logo is the one element in the same place on both pages, so it is
     carried across rather than faded with the rest. The hero and the h1 are
     deliberately left unnamed: they differ in size from page to page and would
     stretch on the way over. Only one element per page may carry a name. */
  .page-header__top-inner__logo { view-transition-name: site-logo; }
}

/* ---------- Stop the header settling when the heading font arrives ----------
   Headings are set in PT Sans Narrow with Verdana behind it. Verdana is a wide
   face and PT Sans Narrow is a condensed one, so a heading laid out in the
   fallback takes noticeably more width, wraps onto an extra line, and the whole
   hero is about 50px taller until the real font swaps in. Everything below the
   header then jumps up, which reads as the page being unstable.

   This declares a fallback that is Verdana squeezed to roughly the width of PT
   Sans Narrow, so the line count does not change when the swap happens. The
   percentages come from comparing the two faces at the same size; they do not
   have to be exact, they only have to keep the wrap identical. */
@font-face {
  font-family: "PT Sans Narrow fallback";
  src: local("Verdana"), local("DejaVu Sans"), local("Arial");
  size-adjust: 82%;
  ascent-override: 105%;
  descent-override: 25%;
  line-gap-override: 0%;
}

body,
h1, h2, h3, h4, h5, h6 {
  font-family: "PT Sans Narrow", "PT Sans Narrow fallback", Verdana, sans-serif;
}

/* ---------- Syntax colours for the imported code blocks ----------
   The colours follow the VS Code Light+ theme, which is what these commands
   look like in the editor the readers actually use. They are deliberately not
   the brand domain colours: orange means Analytics, teal means Data and purple
   means DevOps on this site, and a keyword inside a SQL snippet means none of
   those things. Applied at build time, so there is no highlighting library to
   load and nothing to run on the page. */

main pre[data-language] .tok-comment  { color: #008000; font-style: italic; }
main pre[data-language] .tok-string   { color: #a31515; }
main pre[data-language] .tok-keyword  { color: #0000ff; }
main pre[data-language] .tok-type     { color: #267f99; }
main pre[data-language] .tok-number   { color: #098658; }
main pre[data-language] .tok-variable { color: #001080; }
main pre[data-language] .tok-function { color: #795e26; }
main pre[data-language] .tok-property { color: #0451a5; }

/* The language, quietly, in the corner the copy button does not use. It tells a
   reader whether they are looking at PowerShell or SQL before they read it. */
/* The .wysiwyg-styling .wp-block-code rule in blocks.css zeroes padding-top on
   the imported blocks and outranks a plain "main pre[...]" selector, so the
   label landed on the first line of code. Match its specificity rather than
   reach for !important. */
main pre[data-language],
.wysiwyg-styling pre[data-language].wp-block-code,
.wysiwyg-styling pre[data-language].wp-block-preformatted {
  position: relative;
  /* Room above the first line for the language label in the top left. */
  padding-top: 3.2rem;
}

main pre[data-language]::before {
  content: attr(data-language);
  position: absolute;
  top: .9rem;
  left: 1.6rem;
  font-size: 1.1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b7c93;
}

main .code-block { position: relative; }

/* The two cards that serve every domain, Cortex and the Health Check, carry
   no domain colour. Their frame and the rule under the title take the three
   domain colours together, the gradient the Health Check frame already used.
   The button stays white: a three-colour button read as a rainbow, so it
   keeps the theme's white fill and navy text. */
.offers-row .post--border.group-all,
.offers-row .post--border.health-feature-card {
  background: linear-gradient(100deg, #00abb6 0%, #f99f3f 50%, #a967aa 100%) !important;
}

.offers-row .post--border.group-all .post__content-intro:before,
.offers-row .post--border.health-feature-card .post__content-intro:before {
  background: linear-gradient(100deg, #00abb6 0%, #f99f3f 50%, #a967aa 100%) !important;
}

/* The three at-a-glance blocks on the Cortex page take one domain colour each
   on the line above them, in the same order the Health Check uses: Data,
   Analytics, DevOps. A single navy line said nothing about a product that
   serves all three. */
.service-summary-section.group-cortex .service-summary__item:nth-child(1) { border-top-color: #00abb6; }
.service-summary-section.group-cortex .service-summary__item:nth-child(2) { border-top-color: #f99f3f; }
.service-summary-section.group-cortex .service-summary__item:nth-child(3) { border-top-color: #a967aa; }

/* ---------- Article heroes: keep the header readable on a light picture ----------
   The header sits over the article's hero picture, and the logo and the
   navigation are white. On a photograph that works; on a light picture, such
   as the Cortex launch article's dashboard, the logo vanished: the picture
   measured a mean luminance of 140 behind it. A navy scrim over the top band
   of the hero, fading out below the header, gives the header a dark ground on
   every article whatever the picture is, and leaves the picture itself
   untouched below the fade. */
/* The theme already positions the container absolutely, which is what the
   scrim below hangs on. Setting it relative here collapsed the picture to
   nothing, so nothing is set. */
.single-post .page-header .u-image-background-container::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 4, 52, .78) 0, rgba(0, 4, 52, .45) 9rem, rgba(0, 4, 52, 0) 20rem);
}

/* Tile buttons. A three-column tile is only 300 to 390px wide at every
   viewport, and a long label ("Explore a automatização de bases de dados")
   needs about 400px, so the button wraps instead of running past the tile
   edge. theme.css sets white-space: nowrap with !important, hence the
   !important here. Single-line buttons keep their 4rem height. */
.post .post__content-link {
  white-space: normal !important;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.15 !important;
  padding-top: .8rem !important;
  padding-bottom: .8rem !important;
}

/* Automatic hyphenation split "einen" in the German Cortex heading; the long word
   carries a soft hyphen in the copy instead. */
.cb-bg-color--cortex .cb__content__title {
  hyphens: manual;
}

/* Cookie notice and settings panel: a version of the notice on masterminds.io,
   measured there on 7 October 2026. A 650px white card with a 30px radius,
   20px PT Sans Narrow text, and 40px uppercase buttons with a 12px radius.
   The notice sits bottom right; the settings panel is centred. */
.cookie-notice,
.cookie-settings__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 650px;
  padding: 30px;
  background: #fff;
  color: #1e1e1e;
  border-radius: 30px;
  box-shadow: 2px 1px 14px -5px rgba(0, 0, 0, .4);
  font-family: "PT Sans Narrow", Verdana, sans-serif;
  font-size: 20px;
  line-height: 1.3;
}

.cookie-notice {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  width: calc(100% - 32px);
}

.cookie-notice[hidden],
.cookie-settings[hidden] {
  display: none;
}

.cookie-notice__text {
  margin: 0;
}

.cookie-notice__text a {
  color: #003469;
  text-decoration: underline;
}

.cookie-notice__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 32px;
}

.cookie-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 145px;
  min-height: 40px;
  margin: 0;
  padding: 6px 26px;
  border: 1px solid #003469;
  border-radius: 12px;
  background: #003469;
  color: #fff;
  font-family: inherit;
  font-size: 20px;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

.cookie-button--outline {
  background: transparent;
  color: #003469;
}

.cookie-button:hover {
  border-color: #000434;
  background: #000434;
  color: #fff;
}

.cookie-button:focus-visible,
.cookie-notice__text a:focus-visible,
.cookie-option__input:focus-visible {
  outline: 2px solid #003469;
  outline-offset: 3px;
}

.cookie-settings {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 16px;
}

.cookie-settings__inner {
  max-height: 100%;
  overflow-y: auto;
}

.cookie-settings__title {
  margin: 0 0 20px;
  color: #003469;
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.cookie-settings__title:focus {
  outline: none;
}

.cookie-option {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 15px;
  margin: 0 0 16px;
  cursor: pointer;
}

.cookie-option__input {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  border: 1.5px solid #003469;
  border-radius: 0;
  background: #fff;
  cursor: pointer;
}

.cookie-option__input:checked {
  background: #003469;
  box-shadow: inset 0 0 0 3px #fff;
}

.cookie-option__input:disabled {
  cursor: default;
}

.cookie-option__title {
  display: block;
  color: #003469;
  font-weight: 700;
  text-transform: uppercase;
}

.cookie-option__text {
  display: block;
}

@media (max-width: 600px) {
  .cookie-notice,
  .cookie-settings__inner {
    padding: 24px;
    font-size: 18px;
  }

  .cookie-notice {
    right: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
  }

  .cookie-button {
    font-size: 18px;
  }

  .cookie-settings {
    padding: 12px;
  }
}

/* Very wide screens. From 1600px the content column stops at 1270px, but the
   theme's hero paddings and gutters keep growing with the viewport. The hero
   text column was widest at 2048px and then narrowed until headings broke
   into one word per line; above about 3100px the gutters pushed two-column
   layouts such as the Cortex panel out of their box. Wider screens now keep
   the hero text where and as wide as it is at 2048px, with the photo and
   angled panel unchanged, and the gutters as they are at 2560px. The
   domain pages' hero container has no 1270px limit, so it keeps its own rules. */
@media (min-width: 2049px) {
  body:not(.page-template-template-data):not(.page-template-template-analytics):not(.page-template-template-devops) .page-header__hero-content .o-container {
    margin-right: 0 !important;
    margin-left: calc(20vw - 32.768rem) !important;
    padding-right: 42.667rem;
    padding-left: 24.178rem;
  }

  body:not(.page-template-template-data):not(.page-template-template-analytics):not(.page-template-template-devops) .m-image-position--right .page-header__hero-content .o-container {
    margin-left: calc(50vw - 94.208rem) !important;
    padding-left: 28.444rem;
  }
}

@media (min-width: 2561px) {
  :root {
    --gutter: 3.8788rem;
    --gutter-double: 9.216rem;
  }
}

/* Related blogs under an article. The article column above already ends with
   its own bottom padding, so the row starts without more, as on the live site. */
.cb-related { padding-top: 0; }