/* Company fonts, shipped with the static files: they come from the same bucket as this stylesheet. */
@font-face {
  font-family: "DexaProNarrowRegular";
  src: url("../fonts/DexaProNarrowRegular.32b998deffe2.woff2") format('woff2'), url("../fonts/DexaProNarrowRegular.15bf5d62cbe9.woff") format('woff');
  ascent-override: 88%;
  descent-override: 12%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "DexaProNarrowSemiBold";
  src: url("../fonts/DexaProNarrowSemiBold.26186abaa7e7.woff2") format('woff2'), url("../fonts/DexaProNarrowSemiBold.de72631d192f.woff") format('woff');
  ascent-override: 88%;
  descent-override: 12%;
  line-gap-override: 0%;
}

:root {
  --bs-body-font-size: 1.25rem;
  --bs-primary: #e04e39;
  --bs-primary-rgb: 224,78,57;
  --bs-secondary: #a8ad00;
  --bs-secondary-color-rgb: 168,173,0;
  --bs-tertiary-color: #00a3ad;
  --bs-tertiary-color-rgb: 0,163,173;
  --bs-body-font-family: DexaProNarrowRegular, sans-serif;
  --bs-h1-font-size: 3rem;
  --bs-headings-font-family: DexaProNarrowSemiBold, sans-serif;
  --bs-nav-link-font-size: 1.25rem;
  --bs-light-rgb: 255,255,255;
  --bs-headline-font-weight: 600;
  --navbar-h: 207px;
  /* The gradients of the site, each defined once: warm and cool for areas (style guide
     R014, R015), the warm one at 90 degrees for the footer line. */
  --ti-gradient-warm: linear-gradient(45deg, rgb(var(--bs-primary-rgb)) 25%, rgb(var(--bs-secondary-color-rgb)) 60%, rgb(var(--bs-tertiary-color-rgb)) 100%);
  --ti-gradient-cool: linear-gradient(90deg, rgb(var(--bs-secondary-color-rgb)) 30%, rgb(var(--bs-tertiary-color-rgb)) 100%);
  --ti-gradient-warm-line: linear-gradient(90deg, rgb(var(--bs-primary-rgb)) 25%, rgb(var(--bs-secondary-color-rgb)) 60%, rgb(var(--bs-tertiary-color-rgb)) 100%);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navbar-h) + 3rem);
}

/* Mobile navbar is permanently compact (same size as the shrunk desktop navbar),
   so the anchor scroll offset must match that smaller height instead of the full
   :root --navbar-h used on desktop before shrinking. */
@media (max-width: 991.98px) {
  :root {
    --navbar-h: 110px;
  }
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--bs-headings-font-family);
}

a {
    color: inherit;
    text-decoration: None;

    p {
        margin: 0;
    }
}
a:hover {
  color: rgb(var(--bs-tertiary-color-rgb))
}
.background-light {
    background-color: #F2F2F2;
}
.btn {
  border-radius: 0;
  border-width: 3px;
  font-family: var(--bs-headings-font-family);
  font-weight: var(--bs-headline-font-weight) !important;
  padding-top: 12px;
}
.btn-primary {
    --bs-btn-bg: rgb(var(--bs-primary-rgb));
    --bs-btn-border-color: rgb(var(--bs-primary-rgb));
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: rgb(var(--bs-tertiary-color-rgb));
    --bs-btn-hover-color: rgb(var(--bs-tertiary-color-rgb));
    --bs-btn-active-bg: rgb(var(--bs-tertiary-color-rgb));
    --bs-btn-active-border-color: rgb(var(--bs-tertiary-color-rgb));
    --bs-btn-disabled-bg: rgb(var(--bs-primary-rgb));
    --bs-btn-disabled-border-color: rgb(var(--bs-primary-rgb));
}
.btn-outline-light:hover {
  color: rgb(var(--bs-tertiary-color-rgb));
}

/* CTA wrapper for gradient/dark backgrounds: plain <a> styled as white
   outline buttons. Reusable; add .cta-outline-white-fill to stretch buttons to
   equal width within their container. */
.cta-outline-white {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.cta-outline-white a {
  background-color: transparent;
  border: 3px solid #fff;
  border-radius: 0;
  color: #fff;
  display: inline-block;
  font-family: var(--bs-headings-font-family);
  font-weight: var(--bs-headline-font-weight);
  padding: 0.5rem 1rem;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.cta-outline-white a:hover,
.cta-outline-white a:active,
.cta-outline-white a:focus {
  background-color: #fff;
  border-color: rgb(var(--bs-tertiary-color-rgb));
  color: rgb(var(--bs-tertiary-color-rgb));
}

.cta-outline-white-fill a {
  flex: 1 1 auto;
  text-align: center;
}

.cta-outline a:hover,
.cta-outline a:active,
.cta-outline a:focus {
  border-color: rgb(var(--bs-tertiary-color-rgb));
  color: rgb(var(--bs-tertiary-color-rgb));
}

.form-control:focus {
    border-color: rgb(var(--bs-secondary-color-rgb));
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-secondary-color-rgb), .25);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    transform: scale(0.7) translateY(-0.6rem) translateX(0.3rem);
}
.form-floating>.form-control:not(:placeholder-shown)~label::after {
  background-color: transparent;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill,
input:autofill,
textarea:autofill,
select:autofill {
    -webkit-box-shadow: 0 0 0 1000px rgba(var(--bs-secondary-color-rgb), .1) inset;
    box-shadow: 0 0 0 1000px rgba(var(--bs-secondary-color-rgb), .1) inset;
    -webkit-text-fill-color: #000;
    transition: background-color 5000s ease-in-out 0s;
}

.footer-contact-links i {
    color: rgb(var(--bs-primary-rgb));
    font-size: 1.5em;
    margin-right: 0.75rem !important;
}

.footer-contact-links a {
    align-items: center;
    display: flex;
}

.footer-contact-btn a {
    /* The look is btn-primary (style guide R019); only the width is the footer's. */
    min-width: 180px;
}

.footer-legal-bar a,
.footer-legal-bar [data-cookie-consent] {
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal-bar [data-cookie-consent] p {
    margin: 0;
}

.footer-legal-bar a:hover,
.footer-legal-bar [data-cookie-consent]:hover {
    color: #fff;
    text-decoration: none;
}

.footer-divider {
    background: var(--ti-gradient-warm-line);
    height: 10px;
}

/* <strong> included so inline bold from the rich-text editor uses the real
   SemiBold font instead of faux-bolding the regular body font (renders blurry). */
.fw-bold,
strong {
    font-family: var(--bs-headings-font-family);
    font-weight: var(--bs-headline-font-weight) !important;
}

.gradient-container {
    background: var(--ti-gradient-warm);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

.gradient2-container {
    background: var(--ti-gradient-cool);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

/* Expertise Detail Template */

.detail-hero-image img {
    height: auto;
    width: 100%;
}

.hero-scroll {
    align-items: center;
    border: 2px solid rgb(var(--bs-primary-rgb));
    border-radius: 50%;
    color: rgb(var(--bs-primary-rgb));
    display: inline-flex;
    font-size: 1.25rem;
    height: 2.5rem;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    width: 2.5rem;
}

.hero-scroll:hover {
    border-color: rgb(var(--bs-tertiary-color-rgb));
    color: rgb(var(--bs-tertiary-color-rgb));
}

/* Mobile: the hero image stacks directly under the scroll arrow — add a gap
   above the image (only when an image is actually set). */
@media (max-width: 991.98px) {
  .detail-hero-image:has(img) {
    margin-top: 1.5rem;
  }
}

.detail-content p {
  margin-bottom: 0;
}

.overview-hero-content {
    position: relative;
}

.overview-hero-image {
    overflow: hidden;
    z-index: 1;
}

@media (min-width: 992px) {
    .overview-hero-image {
        height: 500px;
        position: absolute;
        right: 0;
        top: 0;
        transform: translateY(12px);
        width: 38%;
    }
    .overview-hero-image img {
        height: 100%;
        object-fit: cover;
        object-position: center top;
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .overview-hero-image {
        height: 520px;
    }
}

@media (min-width: 1400px) {
    .overview-hero-image {
        height: 440px;
    }
}

/* Auto-hyphenate all page content (covers heros, sections and free content
   areas; nav/footer/toolbar live outside <main> and stay untouched). German
   hyphenation needs lang="de", which is set on /de/ pages. */
main {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Utility to opt a specific element/subtree into hyphenation (e.g. free content
   rendered outside <main>). */
.hyphens-auto {
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Opt-out: disable syllable hyphenation for a subtree but still hard-break long
   words so they never overflow the viewport. */
.hyphens-none {
  -webkit-hyphens: none;
  hyphens: none;
  overflow-wrap: break-word;
}

/* Hero headlines never use syllable hyphenation (overrides the inherited
   main { hyphens: auto }); long words still hard-break to avoid overflow.
   Applied globally so it doesn't need to be set per headline in the CMS. */
.hero h1 {
  -webkit-hyphens: none;
  hyphens: none;
  overflow-wrap: break-word;
}

/* Per-headline opt-in: re-enable hyphenation on a hero h1 that carries the
   .hyphens-auto class (specificity beats the .hero h1 default above). */
.hero h1.hyphens-auto {
  -webkit-hyphens: auto;
  hyphens: auto;
}

.mission-text p {
  margin-top: 1.5rem;
}

nav {
    background-color: #fff !important;

    .container {
      padding: 2.5rem 0 2.5rem 0 !important;
      transition: all 0.3s ease;
    }
    .container.navbar-container-shrink {
      padding: 0.5rem 0 0.5rem 0 !important;
    }
    .dropdown-menu {
      /* Match the body font size so the link teaser <p> isn't shrunk to
         Bootstrap's default --bs-dropdown-font-size (1rem). */
      --bs-dropdown-font-size: var(--bs-body-font-size);
      border: 0;
      border-radius: 0;
      box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.15);
      margin-top: 0 !important;
      padding: 1rem 0 2rem 0;
      right: 0;

      @media (max-width: 991.98px) {
        .container {
          padding-left: 0.5rem !important;
          padding-right: 0.5rem !important;
        }
      }

      .dropdown-menu-headline {
        color: rgb(var(--bs-primary-rgb));
        font-weight: var(--bs-headline-font-weight);
        margin-bottom: 0.5rem;
        text-transform: uppercase;
      }

    }
    .dropdown-item {
      border-left: 3px solid #e04e39;
      font-size: 1.25rem;
      -webkit-hyphens: auto;
      hyphens: auto;
      overflow: hidden;
      overflow-wrap: break-word;
      padding-bottom: 10px;
      padding-top: 10px;
      position: relative;
      white-space: normal;
      width: fit-content !important;
      word-wrap: break-word;
      z-index: 1;
    }
    .dropdown-item::before {
      content: "";
      position: absolute;
      inset: 0;
      background-color: #e04e39;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.35s ease;
      z-index: -1;
    }
    .dropdown-item:hover, .dropdown-item:focus {
      background-color: transparent;
      color: #fff;
    }
    .dropdown-item:hover::before,
    .dropdown-item:focus::before {
      transform: scaleX(1);
    }
    .dropdown-item.active, .dropdown-item:active {
        background-color: #e04e39;
    }
    .dropdown-toggle::after {
      display: none;
    }
    .nav-item {
      align-items: center;
      display: flex;
      font-family: var(--bs-headings-font-family);
      font-weight: var(--bs-headline-font-weight) !important;
    }
    .nav-item-active {
      border-bottom: 3px solid rgb(var(--bs-tertiary-color-rgb));
    }
    .nav-link {
        color: #000
    }
    .nav-link.show {
        color: rgb(var(--bs-tertiary-color-rgb)) !important;
    }
    .nav-link:focus-visible {
        box-shadow: none;
    }
    .navbar-brand {
        width: 100%;
        max-width: 350px;
    }
    .navbar-collapse {
        height: 100%;
    }
    .navbar-nav {
      --bs-nav-link-hover-color: rgb(var(--bs-tertiary-color-rgb));
      gap: 10px;
      height: 100%;
    }

    .navbar-brand-shrink {
      max-width: 250px !important;
    }
}

.no-margin-p-wrapper p {
  margin: 0 !important;
}

section {
    a:hover {
      .cms-background__content {
        color: white !important;
      }
    }

    h1, h2 {
      text-transform: uppercase;
    }
    h1{
        font-size: calc(2rem + 1.5vw);
        font-weight: var(--bs-headline-font-weight);
    }
    h2 {
        font-size: clamp(1.5rem, calc(1.5rem + 1.5vw), 3rem);
        font-weight: var(--bs-headline-font-weight);
    }

    .hero-title {
      h1 {
        /* Bootstrap 5.3 .display-2 fluid sizing (RFS): ~2.5rem mobile -> 4.5rem desktop */
        font-size: clamp(1.575rem, calc(1.575rem + 3.9vw), 4.5rem);
        line-height: 1.5;
      }
    }
    .hero-title-boxed {
      h1 {
        -webkit-box-decoration-break: clone;
        /* Fixed-height white box via a centered gradient instead of
           background: white, so the white height is engine-independent
           (WebKit/iOS sizes the inline content area taller than Blink/Gecko).
           The vertical padding only enlarges the inline box so the gradient
           stays the binding constraint; the padding itself is transparent.
           Tune white height via background-size (keep it below line-height
           1.5em, else wrapped lines touch). */
        background-image: linear-gradient(#fff, #fff);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 1.2em;
        box-decoration-break: clone;
        display: inline;
        padding: 0.5em 1rem;
      }
    }
}

/* Image-background heros: when a cover image is actually present, the H1 and
   eyebrow boxes drop to 80% white so the photo shows through. Without an image
   the default solid-white (#fff) boxes apply (e.g. a news article without a
   hero image). :has() gates this per instance — no manual class needed. */
.cover-hero:has(.cover-hero-image img) .hero-title-boxed h1 {
  background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
}

.cover-hero:has(.cover-hero-image img) .hero-eyebrow p,
.cover-hero:has(.cover-hero-image img) .hero-eyebrow span {
  background: rgba(255, 255, 255, 0.8);
}

.scroll-top {
  border: 2px solid transparent !important;
  position: fixed;
  right: 0;
  bottom: 5rem;
  z-index: 1050;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;

  pointer-events: none;
  svg {
      height: 28px;
      width: 28px;
  }
}

/* -- CMS toolbar logo ------------------------------------------------------ */

div.cms .cms-toolbar-item-logo a {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83.6062 83.6362"><polygon points="57.1774 .01 57.1774 83.6362 39.2872 70.4306 39.2883 15.6293 0 15.6193 12.6794 .01 57.1774 .01" fill="%23e04e39"/><path d="M83.6062,11.6795l-17.8792,12.0494V0h6.1997c6.4504,0,11.6795,5.2291,11.6795,11.6795h0Z"/><polygon points="83.6049 70.4306 65.727 83.6362 65.727 34.0484 83.6062 21.999 83.6049 70.4306" fill="%23e04e39"/></svg>') !important;
  background-size: 25px !important;
}

div.cms .cms-toolbar-item-logo a::before {
  content: none !important;
}
.scroll-top:hover {
  background-color: #fff;
  border-color: rgb(var(--bs-tertiary-color-rgb)) !important;
  color: rgb(var(--bs-tertiary-color-rgb));
}
.scroll-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);

  pointer-events: auto;
}

.text-tertiary {
    color: rgb(var(--bs-tertiary-color-rgb));
}

/*breaking point max small*/
@media (max-width: 1199.98px) {
  nav {
    .navbar-brand {
      max-width: 250px;
    }
    .navbar-brand-shrink {
      max-width: 180px !important;
    }
  }
}

@media (max-width: 991.98px) {
  nav {
    /* Mobile navbar: constant compact height (the shrunk padding), no shrink. */
    .container {
      padding: 0.5rem 0 0.5rem 0 !important;
    }
    .navbar-brand {
      padding-left: 0.5rem;
    }
    .navbar-toggler {
      margin-right: 0.5rem;
    }
    .navbar-toggler:focus {
      box-shadow: 0 0 0 0.25rem rgba(var(--bs-tertiary-color-rgb), 0.5);
    }
  }
}

@media (max-width: 767px) {
  nav {
    .navbar-brand {
      max-width: 250px;
    }
    .navbar-brand-shrink {
      max-width: 200px !important;
    }
  }
}

/*breaking point large*/
@media (min-width: 992px) {
  .navbar .nav-item {
    align-items: center;
    height: 100px;

    .dropdown-icon {
      display: none;
    }
  }
}

/*breaking point max medium*/
@media (max-width: 991px) {
    .navbar .nav-item {
        box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.15);
    }

    .navbar .nav-item.dropdown {
        display: flex;
        flex-direction: column;
    }
    .navbar .nav-link.dropdown-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        white-space: normal;
    }
    .navbar .nav-link.dropdown-toggle::after {
        margin-left: 0;
        flex-shrink: 0;
    }
    .navbar .nav-link.dropdown-toggle span {
        flex-grow: 1;
        text-align: left;
    }
    .navbar .navbar-nav {
        --bs-nav-link-padding-x: 0.5rem;
    }
}

/*breaking point extra large*/
@media (min-width: 1200px) {
    .navbar .navbar-nav {
      gap: 20px;
    }
}

/*breaking point extra extra large*/
@media (min-width: 1400px) {
}


/* -- About Us: Intro section ------------------------------------------- */

.intro-ti-logo {
  padding-top: 0.5rem;
}

/* The text below a heading (style guide R021): one wrapper on every page. */
.heading-text {
  margin-top: 1rem;
}

/* Hero titles that wrap at 1000 px (home, State of the Art). Was an inline style
   in the plugin settings until 2026-11-10 (style guide R029). */
.hero-title-narrow {
  max-width: 1000px;
}

/* -- Hero spacing ---------------------------------------------------------- */

.hero-eyebrow {
  margin-top: 3rem;
}

.hero-eyebrow p,
.hero-eyebrow span {
  background: #fff;
  color: rgb(var(--bs-primary-rgb));
  display: inline-block;
  font-family: var(--bs-headings-font-family);
  font-size: calc(0.85rem + 0.5vw);
  font-weight: var(--bs-headline-font-weight);
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  padding: 0.15rem 0.75rem 0 0.75rem;
  text-transform: uppercase;
}

.hero-eyebrow a {
  color: rgb(var(--bs-primary-rgb));
  text-decoration: none;
}

.hero-eyebrow a:hover,
.hero-eyebrow a:focus {
  color: rgb(var(--bs-tertiary-color-rgb));
}

/* -- Teaser tiles ---------------------------------------------------------- */

.teaser-tile {
  background-color: #1a1a1a;
  height: 400px;
  overflow: hidden;
  position: relative;
}


.teaser-tile img {
  display: block;
  height: 100% !important;
  inset: 0;
  max-width: unset !important;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100% !important;
  z-index: 0;
}

.teaser-tile > .cms-plugin {
  inset: 0;
  position: absolute;
}

.teaser-tile-link {
  margin-top: 0.5rem;
}

.teaser-tile-link a {
  color: #fff;
}

.teaser-tile-link a:hover {
  color: rgb(var(--bs-tertiary-color-rgb));
}

.teaser-tile-overlay {
  background: rgba(0, 0, 0, 0.65);
  bottom: 0;
  left: 0;
  padding: 1rem 1.25rem;
  position: absolute;
  right: 0;
  z-index: 1;
}

.teaser-tile-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

#teaser {
  margin-bottom: 3rem;
  margin-top: 3rem;
  padding-bottom: 3rem;
  padding-top: 3rem;
}

#teaser h2 {
  color: rgb(var(--bs-primary-rgb));
}

.teaser-tile-title,
.teaser-tile-title h3 {
  color: #fff;
  font-family: var(--bs-headings-font-family);
  font-size: 1.4rem;
  font-weight: var(--bs-headline-font-weight);
  margin: 0;
  text-transform: uppercase;
}

.teaser-tile-title p,
.teaser-tile-title h3 {
  margin-bottom: 0;
}

.teaser-toggle {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1.1rem;
  height: 28px;
  line-height: 1;
  margin-left: 0.75rem;
  padding: 0;
  transition: background-color 0.2s;
  width: 28px;
}

.teaser-toggle:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.teaser-tile-expand {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}

.teaser-tile-expand p,
.teaser-tile-expand span {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.teaser-tile-large {
  height: 400px;
}

/* Small image tiles (style guide C07, size small): 240 px on every page. */
.teaser-tile-sm {
  height: 240px;
}

.detail-tiles-headline h2 {
  font-size: 1.75rem;
}

/* -- State of the Art: content blocks -------------------------------------- */


.cta-outline {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.cta-outline a {
  border: 3px solid rgb(var(--bs-primary-rgb));
  border-radius: 0;
  color: rgb(var(--bs-primary-rgb));
  display: inline-block;
  font-family: var(--bs-headings-font-family);
  font-weight: var(--bs-headline-font-weight);
  padding: 0.5rem 1rem;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}


.content-block-left h2 {
  color: rgb(var(--bs-primary-rgb));
}

.content-blocks-grid h3 {
  margin-bottom: 0.5rem;
}


.content-blocks-grid p {
  margin-bottom: 0 !important;
}

.content-blocks-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767px) {
  .content-blocks-grid {
    grid-template-columns: 1fr;
  }
}


.closing-elements-grid {
  margin-bottom: 3rem;
  margin-top: 3rem;
}


/* -- Vision and Values ----------------------------------------------------- */

.vision-hero {
  overflow: hidden;
  position: relative;
}

.vision-hero .hero-eyebrow p,
.vision-hero .hero-eyebrow span {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.vision-watermark {
  align-items: flex-start;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  padding: 1rem;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

.vision-watermark img {
  max-height: 100%;
  width: auto;
}

.vision-tile {
  background-color: rgba(255, 255, 255, 0.15);
  height: 100%;
  padding: 1.25rem;
}

.vision-tile h3 {
  color: #fff;
  font-size: 1.4rem;
  font-weight: var(--bs-headline-font-weight);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.vision-tile p {
  color: #fff;
  margin-bottom: 0;
}

/* -- Reusable tiles -------------------------------------------------------- */

/* White tile, dark text. Counterpart to .vision-tile for use on gradient or
   dark backgrounds where solid white tiles are needed. */
.tile-white {
  background-color: #fff;
  height: 100%;
  padding: 1.25rem;
}

.tile-white h3 {
  color: rgb(var(--bs-primary-rgb));
  font-size: 1.4rem;
  font-weight: var(--bs-headline-font-weight);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.tile-white p {
  margin-bottom: 0;
}

/* -- General page (plain hero) --------------------------------------------- */

.general-hero .hero-eyebrow p,
.general-hero .hero-eyebrow span {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

/* -- Quality Standards ----------------------------------------------------- */

.quality-comparison-col {
  height: 100%;
  padding: 1.5rem;
}

.quality-comparison-col-left {
  background-color: #f2f2f2;
}

/* The row of the two comparison columns (C10): 24 px below the text above it, plus
   the column gutter. */
.row:has(> * > .quality-comparison-col) {
  margin-top: 1.5rem;
}

.quality-comparison-col-left h3 {
  color: #666;
}

/* The bar list on the grey comparison column takes the column's grey: white would
   hardly show on #F2F2F2. */
.quality-comparison-col-left .bar-list > * {
  border-left-color: #666;
}

.quality-comparison-col-right {
  background-color: rgb(var(--bs-primary-rgb));
}

.quality-comparison-col-right h3,
.quality-comparison-col-right p {
  color: #fff;
}

/* -- Slogan (style guide R009) ---------------------------------------------
   THE FUTURE IN YOUR HANDS. NOW. highlighted in the look of an H5, without being a
   heading. The class sits on a block plugin around a text plugin, because the
   text editor keeps no class on a paragraph. */
.slogan p {
  font-family: var(--bs-headings-font-family);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

/* A sentence that stands out in the look of an H3 without heading anything, such as
   a closing question (Block class highlight). */
.highlight p {
  font-family: var(--bs-headings-font-family);
  font-size: calc(1.3rem + .6vw);
  font-weight: 500;
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .highlight p {
    font-size: 1.75rem;
  }
}

/* -- Bar list (style guide C09) and keyword row (C12) ---------------------
   Reusable, named by appearance (ADR-0002). Each look is defined once. */

/* Elements with a white bar on their left, on a coloured background. One column
   by default; bar-list-2 sets two columns (one below 768 px). */
.bar-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bar-list-2 {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}

.bar-list-2 p {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .bar-list-2 {
    grid-template-columns: 1fr;
  }
}

.bar-list > * {
  border-left: 6px solid #fff;
  padding-left: 1rem;
}

/* Short keywords in outlined boxes, in a row that wraps: red on a light
   background, white with keyword-row-white on a gradient. */
.keyword-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.keyword-row > * {
  border: 2px solid rgb(var(--bs-primary-rgb));
  color: rgb(var(--bs-primary-rgb));
  font-family: var(--bs-headings-font-family);
  font-weight: var(--bs-headline-font-weight);
  padding: 0.5rem 1.25rem;
  text-transform: uppercase;
}

.keyword-row-white > * {
  border-color: #fff;
  color: #fff;
}

.keyword-row p {
  margin-bottom: 0;
}

.quality-block-2-subheading {
  margin-top: 2rem;
}

/* -- Distinguished tiles (Section 5 About Us) ------------------------------ */

/* The coloured box (style guide E16): the cool gradient and 1.5rem inside. The
   intro box of an article and the distinguished tiles are this box; the tiles
   spread one gradient over the three of them and colour their text themselves. */
.intro-box,
.distinguished-tile {
  background: var(--ti-gradient-cool);
  padding: 1.5rem;
}

.intro-box {
  color: #fff;
}

.distinguished-tile {
  background-size: 300% 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 300px;
}

.distinguished-tile-1 { background-position: 0% 50%; }
.distinguished-tile-2 { background-position: 50% 50%; }
.distinguished-tile-3 { background-position: 100% 50%; }

/* Positioning only; button styling comes from .cta-outline-white. */
.distinguished-tile-link {
  margin-top: auto;
}

.distinguished-tile-text {
  color: #fff;
  margin-top: 0.5rem;
}

.distinguished-tile-text p {
  margin-bottom: 0;
}

.distinguished-tile-title,
.distinguished-tile-title h3 {
  color: #fff;
  font-family: var(--bs-headings-font-family);
  font-size: 1.4rem;
  font-weight: var(--bs-headline-font-weight);
  margin: 0;
  text-transform: uppercase;
}


/* -- Bootstrap accordion overrides ----------------------------------------- */

.accordion {
  --bs-accordion-btn-bg: rgb(var(--bs-secondary-color-rgb));
  --bs-accordion-btn-color: #fff;
  --bs-accordion-active-bg: rgb(var(--bs-secondary-color-rgb));
  --bs-accordion-active-color: #fff;
  --bs-accordion-border-color: transparent;
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-border-color: rgb(var(--bs-secondary-color-rgb));
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-secondary-color-rgb), 0.25);
}

/* Optional modifier: small vertical gap between accordion items.
   Add the class `accordion-gap` to the .accordion element. */
.accordion-gap .accordion-item {
  margin-bottom: 0.5rem;
}

.accordion-gap .accordion-item:last-child {
  margin-bottom: 0;
}

/* -- Full-bleed cover hero (image background + overlaid content) ----------- */
/* Reusable, named by appearance (ADR-0002). Used by partner_program,
   career_overview and news_detail. */

.cover-hero {
  min-height: 60vh;
  overflow: hidden;
  position: relative;
}

.cover-hero-image {
  inset: 0;
  overflow: hidden;
  position: absolute;
}

.cover-hero-image img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.cover-hero-content {
  align-items: center;
  display: flex;
  min-height: 60vh;
  padding-bottom: 4rem;
  padding-top: 4rem;
  position: relative;
  z-index: 1;
}

/* Hero text right-aligned on mobile, left from lg up. Applied via the .hero
   class set on every hero <section>. */
@media (max-width: 991.98px) {
  .hero {
    text-align: right;
  }
}

/* -- Utility --------------------------------------------------------------- */

.card-accent-primary {
  border: none !important;
  border-left: 5px solid rgb(var(--bs-primary-rgb)) !important;
  border-radius: 0 !important;
}

.card-accent-secondary {
  border: none !important;
  border-left: 5px solid rgb(var(--bs-secondary-color-rgb)) !important;
  border-radius: 0 !important;
}

.usecase-card {
  border: none !important;
}

/* Uniform 180px image height, centred and cropped (not distorted). */
.usecase-card .card-img-top {
  height: 180px;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.usecase-card .card-header {
  min-height: 160px;
}

/* The card footer holds the button (cta-outline); the card's own padding is the
   space above it, not the 2rem cta-outline keeps below running text. */
.usecase-card .card-footer.cta-outline {
  margin-top: 0;
  padding-bottom: 1rem;
  padding-top: 1rem;
}

.usecase-card .card-body a,
.usecase-card .card-header a {
  color: rgb(var(--bs-primary-rgb));
}

.usecase-card .card-body a:hover,
.usecase-card .card-header a:hover {
  color: rgb(var(--bs-tertiary-color-rgb));
}

.usecase-card .card-footer {
  background-color: #fff;
}

.cta-outline a.disabled,
.cta-outline-white a.disabled,
.footer-contact-btn a.disabled {
  opacity: 0.4;
}

.usecase-topics {
  font-size: 1rem;
}

/* -- Use Case Detail ------------------------------------------------------- */

/* Scroll arrow uses the tertiary (teal) colour; the title colour comes from the
   text-tertiary utility on the hero section. */
.usecase-detail-hero .hero-scroll {
  border-color: rgb(var(--bs-tertiary-color-rgb));
  color: rgb(var(--bs-tertiary-color-rgb));
}

/* The note below the contact form, on its gradient (Block class form-note). */
.form-note {
  color: #fff;
  font-size: 1rem;
}

.form-note a:hover {
  color: var(--bs-primary) !important;
}

/* -- News ------------------------------------------------------------------ */

.news-hero {
  min-height: 50vh;
}

.news-hero .container {
  padding-bottom: 3rem;
  padding-top: 6rem;
}

/* News detail hero (cover-hero variant): centre the overlay content so the space
   above and below is equal, with symmetric padding. */
.news-hero.cover-hero .cover-hero-content {
  align-items: center;
  padding-bottom: 4rem;
  padding-top: 4rem;
}

.news-hero.cover-hero .cover-hero-content .container {
  padding-bottom: 0;
  padding-top: 0;
}

/* Scroll arrow for the news hero: white icon on a translucent dark disc so it
   stays visible over any background — light or dark image, or the plain page
   background when no hero image is set (counterpart to .hero-scroll). */
.news-scroll {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 1.25rem;
  height: 2.5rem;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  width: 2.5rem;
}

.news-scroll:hover,
.news-scroll:focus {
  background-color: #fff;
  color: rgb(var(--bs-tertiary-color-rgb));
}

/* News overview tiles: text on top, image with arrow button at the bottom. */
.news-tile {
  background-color: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

.news-tile-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.25rem;
}

.news-tile-meta {
  align-items: baseline;
  color: rgb(var(--bs-secondary-color-rgb));
  display: flex;
  font-size: 0.85rem;
  gap: 0.5rem;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.news-tile-date {
  text-align: right;
  white-space: nowrap;
}

/* News detail: category left, date right (same layout as the tile meta). */
.news-detail-meta {
  align-items: baseline;
  color: rgb(var(--bs-secondary-color-rgb));
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.news-detail-date {
  text-align: right;
  white-space: nowrap;
}

.news-tile-title {
  color: rgb(var(--bs-primary-rgb));
}

.news-tile-teaser {
  color: #333;
  margin-bottom: 0.75rem;
}

.news-tile-image img {
  display: block;
  height: 180px;
  object-fit: cover;
  width: 100%;
}

.news-tile-arrow {
  align-items: center;
  align-self: flex-end; /* bottom-right of the tile */
  background-color: rgb(var(--bs-primary-rgb));
  border-radius: 50%;
  color: #fff;
  display: flex;
  height: 2.5rem;
  justify-content: center;
  margin-top: auto; /* push the button to the bottom of the tile */
  width: 2.5rem;
}

.news-tile-arrow:hover,
.news-tile-arrow:focus {
  background-color: rgb(var(--bs-tertiary-color-rgb));
  color: #fff;
}

/* "Show more" on the news overview: a plain link (no button look) with three
   dots above the label. */
.news-load-more {
  align-items: center;
  color: rgb(var(--bs-primary-rgb));
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}

.news-load-more .bi {
  font-size: 2rem;
}

.news-load-more:hover,
.news-load-more:focus {
  color: rgb(var(--bs-tertiary-color-rgb));
}

/* News article intro section (toggle via the .news-intro class on the section's
   container plugin). The text/gradient column is only as tall as its content
   (it does not stretch to the image height). */

/* The closing paragraph of the intro text sits flush at the bottom; paragraphs
   in the middle keep their margin. Descendant (not child) selector so it also
   matches in edit mode, where the TipTap editor nests the <p> under extra
   wrappers (.cms-editor-inline-wrapper > .tiptap) inside the gradient box. */
.intro-box p:last-child {
  margin-bottom: 0;
}

/* Side-by-side only (lg+, matching row-cols-lg-2): the image column is offset
   downwards relative to the text column. When the columns stack (below lg)
   there is no offset. */
@media (min-width: 992px) {
  .news-intro .row > div:last-child {
    margin-top: 10rem;
  }
}

/* Links in the running text of a news article. The site-wide `a` reset (colour
   inherit, no underline) would make them indistinguishable from the text. The
   hero eyebrow back-link keeps its own look. */
.news-detail :is(p, li) a:not(.hero-eyebrow a) {
  color: rgb(var(--bs-primary-rgb));
  text-decoration: underline;
}

.news-detail :is(p, li) a:not(.hero-eyebrow a):hover,
.news-detail :is(p, li) a:not(.hero-eyebrow a):focus {
  color: rgb(var(--bs-tertiary-color-rgb));
}

/* Links inside the intro's gradient box: white like the text (primary would be
   unreadable on the gradient), underlined so they stay recognisable. */
.news-detail .intro-box a,
.news-detail .intro-box a:hover,
.news-detail .intro-box a:focus {
  color: #fff;
}

/* Bullet lists in the news body: instead of a bullet, each item carries a
   primary bar along its full height. Only class-less lists (written in a text
   plugin), so plugin/navigation lists keep their own styling. */
.news-detail ul:not([class]) {
  list-style: none;
  padding-left: 0;
}

.news-detail ul:not([class]) > li {
  border-left: 4px solid rgb(var(--bs-primary-rgb));
  padding-left: 1rem;
}

/* Space between entries, for bullet and numbered lists alike. Numbered lists keep their
   numbers (primary, see li::marker below) and get no bar: either number or bar, never both. */
.news-detail ul:not([class]) > li + li,
.news-detail ol:not([class]) > li + li {
  margin-top: 0.75rem;
}

/* Bullets of lists in running text site-wide: primary instead of black. */
li::marker {
  color: rgb(var(--bs-primary-rgb));
}

/* Social share row (reusable include) */
.social-share-label {
  color: rgb(var(--bs-primary-rgb));
  font-weight: var(--bs-headline-font-weight);
  margin-bottom: 0.5rem;
}

.social-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.social-btn {
  border-radius: 0;
  color: #fff;
  display: inline-block;
  font-family: var(--bs-headings-font-family);
  padding: 0.4rem 1rem;
  text-decoration: none;
}

.social-btn:hover {
  color: #fff;
  opacity: 0.9;
}

.social-btn-linkedin {
  background-color: #0a66c2;
}

.social-btn-whatsapp {
  background-color: #25d366;
}
/* -- Style guide spacing (docs/styleguide/styleguide.toml) -------------------
   These rules carry the spacing the owner set for every page. Plugin settings
   carry no spacing (ADR-0021), and the templates only inside fixed components the
   rules do not cover (heros, menu, footer, forms, share row; style guide R031), so
   nothing here has to beat a utility class. */

/* R020: the content of a section starts and ends at the same distance from its
   edges, 96 px on a coloured background and 48 px on white. Heros, and the
   category and date line that joins a news intro, are outside the rule. */
main > :is(section, div):not(.hero, .cover-hero, [id="news-detail"], .news-intro) {
  padding-bottom: 3rem;
  padding-top: 3rem;
}
main > :is(.background-light, .gradient-container, .gradient2-container):not(.hero, .cover-hero) {
  padding-bottom: 6rem;
  padding-top: 6rem;
}
main > :is(section, div):not(.hero, .cover-hero) > .container:first-child {
  margin-top: 0;
  padding-top: 0;
}
main > :is(section, div):not(.hero, .cover-hero) > .container:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
/* The first and the last element of a section bring no outer margin of their own:
   the section's padding alone is the space. The chains follow first and last
   children down to the text and stop at boxes with a background or border of
   their own. An empty placeholder in front does not count as the first element,
   and the markers the CMS adds in edit mode (script, template, .cms-placeholder)
   do not count as elements at all, so the edit view keeps the live spacing.
   From 992 px, where the columns of a row stand side by side, the chains also run
   through every column (the tallest one ends the row); below that the columns
   stack and keep the space between them. */
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.row, .row > *),
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.row, .row > *),
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.row, .row > *),
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.row, .row > *),
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.row, .row > *),
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.row, .row > *),
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.row, .row > *) {
  margin-top: 0;
}
main > :is(section, div):not(.hero, .cover-hero) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder),
main > :is(section, div):not(.hero, .cover-hero) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder),
main > :is(section, div):not(.hero, .cover-hero) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder),
main > :is(section, div):not(.hero, .cover-hero) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder),
main > :is(section, div):not(.hero, .cover-hero) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder),
main > :is(section, div):not(.hero, .cover-hero) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder),
main > :is(section, div):not(.hero, .cover-hero) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder) {
  margin-bottom: 0;
}
@media (min-width: 992px) {
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.row, .row > *),
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.row, .row > *),
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.row, .row > *),
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.row, .row > *),
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.row, .row > *),
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.row, .row > *),
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *, .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:not(script, template, .cms-placeholder) ~ *):not(script, template, .cms-placeholder), :empty:first-child + *):not(.row, .row > *) {
  margin-top: 0;
}
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *),
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *),
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *),
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *),
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *),
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *),
main > :is(section, div):not(.hero, .cover-hero) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *):not(.card, .accordion, .background-light, [class*=gradient], [class*=tile], [class*=quality-comparison-col], .intro-box) > :is(:not(:has(~ :not(script, template, .cms-placeholder))):not(script, template, .cms-placeholder), .row > *) {
  margin-bottom: 0;
}
}

/* R021: 16 px from an H2 to the text below it. The text wrappers below a heading
   (.heading-text) carry 1rem as well, so the
   two margins collapse into one 16 px gap. */
main h2 {
  margin-bottom: 1rem;
}

/* R022: 48 px from the heading to an indented intro text. The intro sits in its
   own row, so the gap is the heading's 16 px plus this row's 32 px. When the
   heading stands on its own above the row, without a column, the two margins
   collapse, so the row carries the full 48 px. Only from 992 px, where the
   offset columns indent; below that the intro is not indented and stands 24 px
   below the heading's row. */
main .row:has(> [class*=offset-] > .heading-text:first-child) {
  margin-top: 1.5rem;
}
@media (min-width: 992px) {
  main .row:has(> [class*=offset-] > .heading-text:first-child) {
    margin-top: 2rem;
  }
  main [class*=offset-] > .heading-text:first-child {
    margin-top: 0;
  }
  main h2 + .row:has(> [class*=offset-]) {
    margin-top: 3rem;
  }
  /* In a hero the heading is an H1 with 8 px below it (Vision and values). */
  main .hero .row:has(> [class*=offset-] > .heading-text:first-child) {
    margin-top: 2.5rem;
  }
}

/* A text block that follows an H2 directly, or follows the H2's own wrapper, starts
   1rem below it, whatever spacing utility its plugin settings carry. Columns of a
   row and blocks that open with a sub-heading keep their own spacing. */
main :is(h2, div:has(> h2:only-child)):not(.row > *, .accordion *, [class*=teaser-tile] *) + :is(div, p, ul, ol):not(.row, .row > *, .card, .accordion, [class*=cta], [class*=tile], :has(> :is(h3, h4, h5):first-child)) {
  margin-top: 1rem;
}

/* When the heading and its text stand in two rows side by side with others, the
   text's own margin would add to the heading's instead of collapsing with it.
   Below 992 px the columns stack and keep their spacing. */
@media (min-width: 992px) {
  main .row:has(h2) + .row > * > .heading-text:first-child {
    margin-top: 0;
  }
}

/* R023: 8 px from an H3 to the text below it; inside C13 (.mission-text) every
   paragraph keeps its 24 px. Accordion heads and titles on image tiles are
   outside the rule. */
main :is(h3, div:has(> h3:only-child)):not(.row > *, .accordion *, [class*=teaser-tile] *, .mission-text *, .card-header *) + :is(div, p, ul, ol):not(.row, .row > *, .card, .accordion, [class*=cta], [class*=tile], :has(> :is(h2, h3, h4, h5):first-child)) {
  margin-top: 0.5rem;
}

/* -- Blocks, button groups and the space between sections ------------------
   (style guide R033, R034, ADR-0021). The Block plugin brings no spacing; these
   rules set it by situation. */

/* Sections stand 48 px apart (the margins collapse); the last one 96 px above the
   footer. The news intro has its 48 px below as padding, it joins the category
   and date line above it. */
main > :is(section, div):not(.hero, .cover-hero) {
  margin-bottom: 3rem;
  margin-top: 3rem;
}
main > :not(:has(~ :not(script, template, .cms-placeholder))):not(.hero, .cover-hero, script, template, .cms-placeholder) {
  margin-bottom: 6rem;
}
.news-intro {
  padding-bottom: 3rem;
}


/* R033: a text block stands 24 px from what comes before and after it in its
   column; 48 px when it opens with text, because no heading separates it. Headings
   directly above (R021, R023) and button groups (R034) keep their own spacing. */
/* Not inside a grid or a bar list (C09, State of the Art tiles): there the gap of the
   grid separates them. :where() keeps the specificity, so R021 and R023 still win. */
:where(:not(.content-blocks-grid, .bar-list)) > .text-block + :not(script, template, .cms-placeholder),
:where(:not(.content-blocks-grid, .bar-list)) > * + .text-block {
  margin-top: 1.5rem;
}
:where(:not(.content-blocks-grid, .bar-list)) > * + .text-block:not(:has(> :is(h2, h3, h4, .card, .accordion):first-child)) {
  margin-top: 3rem;
}
/* A sub-heading inside an accordion item: an H4 in the look of a bold line of text. */
.accordion-body h4 {
  color: inherit;
  font-family: var(--bs-headings-font-family);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 1rem;
  margin-top: 0;
  text-transform: none;
}

/* Cards stacked in a column (C06, right = cards) stand 24 px apart, like blocks. */
.card + .card {
  margin-top: 1.5rem;
}

/* R034: a button group stands 32 px below the content above it (its own
   margin-top) and 24 px above the content below it. */
:is(.cta-outline, .cta-outline-white) + :not(script, template, .cms-placeholder),
:is(.cta-outline, .cta-outline-white) + .text-block:not(:has(> :is(h2, h3, h4, .card, .accordion):first-child)) {
  margin-top: 1.5rem;
}
.text-block + :is(.cta-outline, .cta-outline-white) {
  margin-top: 2rem;
}

/* R024: 40 px from the heading or text above to the first row of tiles: the row's
   16 px (the margin above it collapses into it) plus the 24 px gutter above the
   tiles. Later rows of the same grid keep the gutter alone (R025); a row that opens
   its section keeps the section's padding alone (R020). */
main :is(* + .row, * + div > .row:first-child):has(> * > :is(.teaser-tile, .tile-white, .vision-tile, .distinguished-tile, .card, .news-tile)):not(.row:has(> * > :is(.teaser-tile, .tile-white, .vision-tile, .distinguished-tile, .card, .news-tile)) + *) {
  margin-top: 1rem;
}
/* Text in the columns of the row above keeps its margin inside the column; it
   would add to the 40 px. */
main .row:has(+ .row > * > :is(.teaser-tile, .tile-white, .vision-tile, .distinguished-tile, .card, .news-tile), + div > .row:first-child > * > :is(.teaser-tile, .tile-white, .vision-tile, .distinguished-tile, .card, .news-tile)) > * :is(p, ul, ol):last-child {
  margin-bottom: 0;
}
main .row:has(> * > :is(.teaser-tile, .tile-white, .vision-tile, .distinguished-tile, .card, .news-tile)) + .row:has(> * > :is(.teaser-tile, .tile-white, .vision-tile, .distinguished-tile, .card, .news-tile)) {
  margin-top: 0;
}

/* A sub-heading that opens a part of a section below its text (component C05,
   sub-heading) stands 48 px below the text (R035). */
main .heading-text + div > h3:first-child {
  margin-top: 3rem;
}

/* A coloured full-width box inside a section (the form on the contact page) is
   spaced like a section of its own: 48 px above, 96 px inside (R020). */
main > section :is(.gradient-container, .gradient2-container, .background-light).container-full {
  margin-top: 3rem;
  padding-bottom: 6rem;
  padding-top: 6rem;
}