/* Swiper slider pagination: progress circle (SWIPER CAROUSELS). */
@keyframes progress {
  0% {
    stroke-dashoffset: 125.664px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

/* Self-hosted variable fonts */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-VariableFont.ttf') format('truetype-variations');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-Italic-VariableFont.ttf') format('truetype-variations');
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/Sora-VariableFont.ttf') format('truetype-variations');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/SpaceGrotesk-VariableFont.ttf') format('truetype-variations');
}

:root {
  --header-height: 0px;
  --breadcrumbs-height: 0px;
  --listing-filters-width: 0px;

  /* Bootstrap theming: re-point the variables its components read. Its CSS is
     precompiled, so .btn-* variants hardcode their colors and are overridden
     separately (see .btn below). */
  --bs-primary: #c2286b;
  --bs-primary-rgb: 194, 40, 107;
  --bs-primary-text-emphasis: #a81f5b;
  --bs-primary-bg-subtle: #ffeef6;
  --bs-body-color: #14102b;
  --bs-body-color-rgb: 20, 16, 43;
  --bs-secondary-color: #3a3357;
  --bs-tertiary-color: #565073;
  --bs-secondary-bg: #f4f4f6;
  --bs-tertiary-bg: #f6f3ff;
  --bs-border-color: #ebe7f8;
  --bs-border-radius: 0.1875rem;
  --bs-body-font-family: var(--tz-font-body);
  --bs-body-line-height: var(--lh-body);
  /* Theme red for .is-invalid / .invalid-feedback, instead of Bootstrap's. */
  --bs-form-invalid-color: #b42318;
  --bs-form-invalid-border-color: #b42318;

  /* Only what Bootstrap has no variable for. */
  --tz-primary-soft: #f2a3c4;
  --tz-border-2: #ded9f0;
  --tz-header-bg: rgba(255, 255, 255, .92);
  --tz-mint: #e6fdfa;
  --tz-cream: #fcf6e7;
  --tz-lime: #f0ffdf;

  --tz-font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tz-font-heading: 'Sora', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tz-font-overline: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Type scale (see TOKENS.md). Fluid sizes go from a 375px to a 1360px
     viewport. --fs-home-* only apply on the homepage. */
  --fs-home-leaderboard: clamp(2.375rem, 1.7088rem + 2.8426vw, 4.125rem); /* 38→66px */
  --fs-home-section: clamp(2rem, 1.5241rem + 2.0305vw, 3.25rem); /* 32→52px */
  /* Title of a component section: the content h2, or --fs-home-section on
     the homepage (see .path-frontpage below). */
  --fs-section: var(--fs-h2);
  --fs-h1: clamp(2.25rem, 1.5838rem + 2.8426vw, 4rem); /* 36→64px */
  --fs-h2: clamp(1.625rem, 1.3395rem + 1.2183vw, 2.375rem); /* 26→38px */
  --fs-h3: clamp(1.375rem, 1.1846rem + 0.8122vw, 1.875rem); /* 22→30px */
  --fs-h4: 1.25rem; /* 20px */
  --fs-h5: 1.125rem; /* 18px */
  --fs-figure: clamp(2.375rem, 1.8991rem + 2.0305vw, 3.625rem); /* 38→58px */
  --fs-lead: clamp(1.125rem, 1.0298rem + 0.4061vw, 1.375rem); /* 18→22px */
  --fs-lg: 1.125rem; /* 18px */
  --fs-base: 1rem; /* 16px */
  --fs-sm: 0.875rem; /* 14px */
  --fs-xs: 0.75rem; /* 12px */
  --fs-2xs: 0.625rem; /* 10px */

  --ls-tight: -.035em;
  --ls-snug: -.02em;
  --ls-figure: -.05em;
  --ls-caps: .2em;
  --ls-caps-sm: .16em;
  --ls-caps-xs: .1em;

  --lh-heading: 1.1;
  --lh-heading-sm: 1.2;
  --lh-body: 1.65;
  --lh-snug: 1.45;

  --space-section-y: clamp(4rem, 2.5723rem + 6.0914vw, 7.75rem); /* 64→124px */
  --space-card: clamp(1.875rem, 1.5419rem + 1.4213vw, 2.75rem); /* 30→44px */
  --space-gutter: clamp(1.125rem, 0.6015rem + 2.2335vw, 2.5rem); /* 18→40px */
}

.path-frontpage {
  --fs-section: var(--fs-home-section);
}

/* .btn-* variants hardcode their --bs-btn-* colors in Bootstrap's compiled
   CSS, so they are overridden here. Sitewide button style. */
.btn {
  --bs-btn-padding-x: 1.5em;
  --bs-btn-padding-y: 1em;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-font-family: var(--tz-font-heading);

  &.btn-lg {
    --bs-btn-font-size: 1.125rem;
  }

  /* Full-width button (Bootstrap 5 has no .btn-block). Combine with any .btn-*
   color, e.g. .btn.btn-primary.btn-full. */
  &.btn-full {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  &.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-text-emphasis);
    --bs-btn-hover-border-color: var(--bs-primary-text-emphasis);
    --bs-btn-active-bg: var(--bs-primary-text-emphasis);
    --bs-btn-active-border-color: var(--bs-primary-text-emphasis);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    /* Restated from Bootstrap's .btn-primary, otherwise its stock blue shows up
      on :disabled (e.g. the contact form submit button). */
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
  }

  &.btn-outline-primary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--tz-border-2);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--bs-primary);
  }

  &.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-body-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-secondary-color);
    --bs-btn-hover-border-color: var(--bs-secondary-color);
    --bs-btn-active-bg: var(--bs-secondary-color);
    --bs-btn-active-border-color: var(--bs-secondary-color);
  }

  /* Leaderboard CTA on a dark background: lighter accent fill + light outline. */
  &.btn-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--tz-primary-soft);
    --bs-btn-border-color: var(--tz-primary-soft);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
  }

  &.btn-outline-light {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .34);
    --bs-btn-hover-color: var(--tz-primary-soft);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--tz-primary-soft);
    --bs-btn-active-color: var(--tz-primary-soft);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--tz-primary-soft);
  }

  /* Filled white CTA for a colored card background: no border, hover
    recolors the label instead of the fill. */
  &.btn-light {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
  }
}

/* Container: 1360px outer box, 18→40px inset each side, set once through
   --bs-gutter-x (.container's padding is half of it on each side). */
.container {
  max-width: 1360px;
  --bs-gutter-x: calc(var(--space-gutter) * 2);
}

b, strong {
  font-family: var(--tz-font-body);
  font-weight: 600;
  color: var(--bs-body-color);
}

.h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5 {
  font-family: var(--tz-font-heading);
  font-weight: 600;
  text-transform: initial;
  line-height: var(--lh-heading-sm);
  letter-spacing: var(--ls-snug);
}

.h1, h1 {
  font-size: var(--fs-h1);
}

.h2, h2 {
  font-size: var(--fs-h2);
}

.h1, h1, .h2, h2 {
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
}

.h3, h3 {
  font-size: var(--fs-h3);
}

.h4, h4 {
  font-size: var(--fs-h4);
}

.h5, h5 {
  font-size: var(--fs-h5);
}

/* WYSIWYG style (CKEditor5 "Style" dropdown): small, spaced-out uppercase
   label, on <p> or <span>. */
.small-caps {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps-sm);
  text-transform: uppercase;
  color: var(--bs-tertiary-color);
}

/* Component overline: small uppercase label with a short rule before it
   (<p class="overline"><span></span>Text</p>). The rule follows the text
   color, so dark sections only change the color. */
.overline {
  font-family: var(--tz-font-overline);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--bs-primary);
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;

  span {
    width: 22px;
    height: 2px;
    background: currentColor;
    flex: none;
    display: block;
  }
}

/* WYSIWYG tables. CKEditor marks them layout-table (columns of prose) or
   content-table (data); filter_html keeps those classes thanks to
   tenderz_config_ckeditor5_plugin_info_alter(), CKEditor's inline column
   widths are still stripped. */

/* Layout table: borderless, equal columns. Each row is a grid whose columns
   wrap below 17.5rem (280px), whatever their number, so it needs no media
   query. */
table.layout-table {
  display: block;
  width: 100%;

  colgroup {
    display: none;
  }

  thead,
  tbody,
  tfoot,
  td,
  th {
    display: block;
  }

  tr {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
    gap: 2rem clamp(1.5rem, 0.9289rem + 2.4365vw, 3rem); /* 32px, 24→48px */
  }

  tr + tr {
    margin-top: 2rem;
  }

  td,
  th {
    padding: 0;
  }

  /* The grid gap spaces the cells, also once they wrap. The tr step
     outweighs components' own paragraph margins (e.g. .concept-body p). */
  tr > :is(td, th) > :last-child {
    margin-bottom: 0;
  }
}

/* Data table: sober rows with an emphasized header. Scrolls sideways on a
   phone rather than squeezing its columns (see RESPONSIVE). */
table.content-table {
  width: 100%;
  border-collapse: collapse;

  th,
  td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    text-align: start;
    vertical-align: top;
  }

  th {
    font-weight: 600;
    color: var(--bs-body-color);
  }

  thead th {
    border-bottom-color: var(--bs-body-color);
  }
}

body {
  font-family: var(--tz-font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

body.megamenu {
  overflow: hidden;
}

main {
  overflow-x: clip;
  position: relative;
  z-index: 1;
  background-color: white;
}

main > * {
  scroll-margin-top: var(--header-height);
}

/* 404: big code, title (h1) and text from the "404_page" block_content,
   centered in the viewport left under the sticky header. */
.page-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - var(--header-height));
  padding-block: clamp(48px, 7vw, 110px);
  text-align: center;

  .page-404-code {
    margin: 0;
    font-family: var(--tz-font-heading);
    font-size: clamp(6rem, 4.0013rem + 8.5279vw, 11.25rem); /* 96→180px */
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--ls-figure);
    color: var(--bs-primary);
  }

  h1 {
    margin: 0.5rem 0 0;
    font-size: var(--fs-h2);
    font-weight: 600;
    text-wrap: balance;
  }

  .page-404-text {
    max-width: 46ch;
    margin: 1rem 0 2.5rem;
    font-size: var(--fs-lead);
    font-weight: 300;
    color: var(--bs-secondary-color);
  }
}

/* LEADERBOARD HEADINGS AND BREADCRUMB: base, and the layout of the pages
   without a leaderboard banner (category pages). */
.leaderboard-headings {
  font-family: var(--tz-font-body);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFFFFF;
  text-shadow: black 3px 3px 25px;
  min-width: 300px;
}

#region-leaderboard.no-leaderboard .leaderboard-headings {
  order: 2;
  position: unset;
  padding: 0;
  transform: unset;
  color: black;
  text-shadow: unset;
  margin-bottom: 2rem;
}

#region-leaderboard.no-leaderboard .leaderboard-breadcrumb {
  margin-bottom: 1.5em;
  padding: 0;
}

.leaderboard-headings h1,
.leaderboard-cta h1 {
  font-size: 3.125em;
  margin-bottom: 1rem;
}

.leaderboard-headings h2,
.leaderboard-headings p:not(.overline),
.leaderboard-cta h2 {
  font-size: 1.125em;
  font-family: var(--tz-font-body);
}

.leaderboard-breadcrumb {
  font-size: 1.25em;
  padding: 3rem 5rem 1.5rem;
  bottom: 0;
  left: 0;
  z-index: 1;
  position: absolute;

  & > div {
    display: flex;
  }

  & > div > ul {
    display: flex;
    align-items: center;
  }

  & > div > ul > li {
    display: flex;
    align-items: center;
  }

  & > div > ul > li > a.home {
    display: flex;
    align-items: center;

    &:after {
      content: '';
      background: white;
      mask: url(../images/svg/home.svg) no-repeat center;
      mask-size: contain;
      display: inline-block;
      width: 24px;
      height: 24px;
    }
  }
}

main.no-leaderboard .leaderboard-breadcrumb {
  a.home {
    &:after {
      background: black;
    }
  }
}

#region-leaderboard.no-leaderboard .leaderboard-breadcrumb {
  position: unset;
}

.leaderboard-breadcrumb ul {
  padding: 0;
  margin: 0;
}

.leaderboard-breadcrumb ul li {
  list-style-type: none;
  display: inline;
  color: white;
}

#region-leaderboard.no-leaderboard .leaderboard-breadcrumb ul li {
  color: black;
}

.leaderboard-breadcrumb ul li a {
  color: inherit;
}

.leaderboard-breadcrumb ul li img {
  vertical-align: sub;
  width: 1.2em;
}

#region-leaderboard.no-leaderboard .leaderboard-breadcrumb ul li img {
  filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(64deg) brightness(105%) contrast(101%);
}

.leaderboard-breadcrumb ul li:after {
  content: "|";
  padding: 0 1em;
}

.leaderboard-breadcrumb ul li:last-child:after {
  content: "";
}

.leaderboard-breadcrumb ul li a {
  text-decoration: none;
}

.leaderboard-breadcrumb ul li a i::before {
  font-size: 20px;
}

.leaderboard-breadcrumb ul li a:hover {
  text-decoration: underline;
}

/* CURRENTLY NOT IN USE: leaderboard_video media type, not offered by
   field_leaderboard (see field--media--leaderboard-video.html.twig).
.leaderboard-video {
  height: 600px;
}

.leaderboard-video video {
  min-width: 100%;
  object-fit: cover;
  width: 100vw;
  height: 600px;
  filter: brightness(80%);
}

.card-top .leaderboard-video {
  height: 100%;
}

.card-top .leaderboard-video video {
  width: 100%;
  height: 100%;
  filter: brightness(80%);
}
*/

#region-leaderboard {
  position: relative;
}

#region-leaderboard.no-leaderboard {
  margin-top: unset;
}

.leaderboard-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--tz-font-body);
}

.leaderboard-cta div[class^="section"]{
  z-index: 1;
}

.carousel-inner.homepage-leaderboard .carousel-item:after {
  bottom: 0;
  left: 0;
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  /* Decorative layer: without this it sits on top of the CTA carousel and
     swallows hover/click on its buttons. */
  pointer-events: none;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CAROUSEL ARROWS: square prev/next buttons, Bootstrap's icon classes
   restyled (<button><span class="carousel-control-prev-icon"></span>…).
   Leaderboard images and accordion (below lg). */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 2.625rem;
  height: 2.625rem;
  background-image: none;
  border: 1px solid rgba(255, 255, 255, .28);
  background-color: rgba(var(--bs-body-color-rgb), .5);
  border-radius: var(--bs-border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, color .2s;

  &::after {
    font-size: var(--fs-base);
    line-height: 1;
    color: #fff;
  }
}

.carousel-control-prev-icon::after {
  content: "←";
}

.carousel-control-next-icon::after {
  content: "→";
}

button:hover .carousel-control-prev-icon,
button:hover .carousel-control-next-icon {
  border-color: var(--tz-primary-soft);

  &::after {
    color: var(--tz-primary-soft);
  }
}

/* LEADERBOARD CAROUSEL CONTROLS: bottom bar of the leaderboard images
   (field--field-leaderboard.html.twig), on the homepage and in the leaderboard
   banner: bar indicators, slide counter (homepage only), prev/next buttons
   (CAROUSEL ARROWS above). */
#leaderboard-carousel {
  .carousel-controls {
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 2.125rem;

    button {
      background: none;
      border: none;
    }
  }

  .carousel-indicators {
    position: static;
    margin: 0;
    gap: 0.625rem;

    /* 3px bar, but a 23px tall hit area: the padding is transparent
       (background-clip). */
    [data-bs-target] {
      flex: none;
      width: 2.125rem;
      height: 3px;
      padding: 0.625rem 0;
      margin: 0;
      border: 0;
      border-radius: 0;
      opacity: 1;
      background: rgba(255, 255, 255, .34) content-box;
    }

    [data-bs-target].active {
      background-color: var(--tz-primary-soft);
    }
  }

  .carousel-counter {
    font-family: var(--tz-font-heading);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-caps-xs);
    color: #fff;
    margin: 0 1.125rem;
  }
}

/* HOMEPAGE LEADERBOARD: scoped under .homepage-leaderboard, so the
   leaderboard banner, which shares the base classes, is left untouched. */
.homepage-leaderboard #leaderboard-carousel {
  .carousel-item {
    /* 100vh: fallback for browsers without svh (small viewport unit). */
    height: calc(100vh - var(--header-height) - var(--gin-toolbar-height, 0px));
    height: calc(100svh - var(--header-height) - var(--gin-toolbar-height, 0px));
    min-height: 40rem;
    background: var(--bs-body-color);

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg, var(--bs-body-color) 0%, var(--bs-body-color) 34%, rgba(var(--bs-body-color-rgb), .86) 50%, rgba(var(--bs-body-color-rgb), .35) 72%, rgba(var(--bs-body-color-rgb), .1) 100%);
    }
  }
}

.homepage-leaderboard {
  /* #carousel-cta fades out then in, instead of Bootstrap's crossfade which
     overlaps both text blocks. The id outweighs Bootstrap's transition rules. */
  #carousel-cta.carousel-fade {
    .active.carousel-item-start,
    .active.carousel-item-end {
      transition: opacity .2s ease-in-out;
    }

    .carousel-item-next.carousel-item-start,
    .carousel-item-prev.carousel-item-end {
      transition: opacity .2s ease-in-out .2s;
    }
  }

  .leaderboard-cta {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    z-index: 2;
    font-family: var(--tz-font-body);
  }

  .leaderboard-text {
    max-width: 41.25rem;

    .overline {
      color: var(--tz-primary-soft);
    }
  }

  .leaderboard-text-fade {
    h1 {
      font-weight: 600;
      margin: 0 0 1.25rem;
      font-size: var(--fs-home-leaderboard);
      color: #fff;
    }

    h1 .highlight {
      color: var(--tz-primary-soft);
    }

    .subtitle {
      margin: 0;
      font-size: var(--fs-lead);
      color: #fff;
      max-width: 52ch;
      font-weight: 300;
    }
  }

  /* CTA links use .btn-secondary / .btn-outline-light: only the row layout
     is added here. */
  .leaderboard-text-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem;
    margin-top: 2.5rem;
  }

  /* Highlight bullets: native list markers, square + pink. */
  .leaderboard-highlights {
    list-style-type: square;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.625rem;
    margin: 1.625rem 0 0;
    padding-left: 1.2em;
    font-size: var(--fs-sm);
    color: #fff;

    li::marker {
      color: var(--tz-primary-soft);
    }
  }
}

/* WYSIWYG CONTENT: what the text editor produces in the paragraphs (lines,
   images, lists, videos). */
section.paragraph {
  /* Horizontal line: short accent rule (also tops the layout-table
     columns). */
  hr {
    height: 2px;
    margin: 0.875rem 0 0.875rem;
    border: 0;
    background: var(--bs-primary);
    opacity: 1;
  }

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

/* Images and videos (generic content, free text). An image aligned left or
   right keeps a gap on the text side, as a margin on its floated wrapper
   (media <div>, or <figure> when it has a caption): on the <img> itself, at
   width 100%, it would overflow the float and the text would touch it.
   .w-25/50/75 media are sized by their wrapper (full width below 768px, see
   Medium devices). */
:is(.paragraph--type--generic-content, .paragraph--type--free-text) {
  img:not(.align-left, .align-right) {
    padding: 0.625em 0;
  }

  img:not([width]) {
    width: 100%;
  }

  img[width].align-left,
  div.align-left,
  figure.align-left {
    margin-right: 2.8125em;
  }

  img[width].align-right,
  div.align-right,
  figure.align-right {
    margin-left: 2.8125em;
  }

  figure {
    display: table;
    width: auto;
    max-width: 100%;
  }

  .div-image.align-center img {
    display: block;
    margin-right: auto;
    margin-left: auto;
  }

  video {
    width: 100%;
    height: auto;
  }
}

/* The <figure> of a captioned media carries the width class (see
   filter-caption.html.twig): the media wrapper inside fills it. */
.w-25 img,
.w-50 img,
.w-75 img,
figure .w-25,
figure .w-50,
figure .w-75 {
  width: 100% !important;
}

/* Image caption (filter_caption), in any WYSIWYG: a table caption, so it
   wraps at the image's width; same style as the text and image caption. */
figure[role="group"] {
  display: table;
  width: auto;
  max-width: 100%;
}

figure[role="group"] figcaption {
  display: table-caption;
  caption-side: bottom;
  padding-top: 0.875rem;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps-sm);
  text-transform: uppercase;
  color: var(--bs-tertiary-color);
}

/* Lists of every component's WYSIWYG (generic content, FAQ answers, CTA,
   cards...): square bullets and numbers in the primary color. CKEditor lists
   have no class; classed lists are component markup with their own style
   (e.g. .leaderboard-highlights). */
section.paragraph {
  :is(ul, ol):not([class]) {
    display: table;
    padding-left: 1.5rem;
    line-height: 2em;
  }

  ul:not([class]) {
    list-style: square;

    > li::marker {
      font-size: 1.5em;
      line-height: 1em;
    }
  }

  :is(ul, ol):not([class]) > li::marker {
    color: var(--bs-primary);
  }
}

:is(.paragraph--type--generic-content, .paragraph--type--free-text) li {
  padding-left: 0.5em;
}

/* Full-width band for these paragraphs (waiting for their designs). */
.row .paragraph--type--related-content,
.row .paragraph--type--quote,
.row .paragraph--type--slider,
.row .paragraph--type--highlight {
  max-width: unset;
}

.paragraph--type--related-content,
.paragraph--type--quote,
.paragraph--type--slider,
.paragraph--type--highlight {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

/* Drupal's .placeholder (<em> in messages) is also a Bootstrap class: reset. */
.placeholder {
  display: unset;
  min-height: unset;
  vertical-align: unset;
  cursor: unset;
  background-color: unset;
  opacity: unset;
}

.paragraph a:not(.btn) {
  color: var(--bs-body-color);

  &:hover {
    color: var(--bs-primary);
  }
}

/* FAQ: overline, title and intro on the left (sticky), questions on the
   right. Bootstrap accordion themed through its variables; open question =
   lavender card with an accent top rule, like the homepage USP cards. */
section.paragraph--type--faq-list {
  padding: var(--space-section-y) 0;

  .faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 1.0482rem + 4.0609vw, 5rem); /* 32→80px */
    align-items: start;
  }

  &.no-intro .faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-intro {
    position: sticky;
    top: calc(var(--header-height) + 1.5rem);

    h2 {
      font-size: var(--fs-section);
      margin: 0;
      text-wrap: balance;
    }

    h2 + * {
      margin-top: 1.375rem;
    }

    p:not(.overline) {
      max-width: 40ch;
      color: var(--bs-secondary-color);
    }

    p:last-child {
      margin-bottom: 0;
    }
  }

  .accordion {
    --bs-accordion-color: var(--bs-secondary-color);
    --bs-accordion-bg: #fff;
    --bs-accordion-border-color: var(--bs-border-color);
    --bs-accordion-border-radius: var(--bs-border-radius);
    --bs-accordion-inner-border-radius: var(--bs-border-radius);
    --bs-accordion-btn-padding-x: 1.5rem;
    --bs-accordion-btn-padding-y: 1.375rem;
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2314102b' stroke-width='1.5'%3E%3Cpath d='M6 0v12M0 6h12'/%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 12 12' fill='none' stroke='%23fff' stroke-width='1.5'%3E%3Cpath d='M6 0v12M0 6h12'/%3E%3C/svg%3E");
    --bs-accordion-btn-icon-width: 2.125rem;
    --bs-accordion-btn-icon-transform: rotate(45deg);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-body-padding-x: 1.5rem;
    --bs-accordion-body-padding-y: 0;
    --bs-accordion-active-color: var(--bs-body-color);
    --bs-accordion-active-bg: transparent;

    display: grid;
    gap: 0.625rem;
  }

  /* Separate cards: undo Bootstrap's shared borders and end-only radii. */
  .accordion-item {
    border: 1px solid var(--bs-accordion-border-color);
    border-top: 3px solid var(--bs-accordion-border-color);
    border-radius: var(--bs-border-radius);
    transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;

    &:hover {
      border-top-color: var(--bs-body-color);
    }

    &:has(.accordion-button:not(.collapsed)) {
      background: var(--bs-tertiary-bg);
      border-color: var(--bs-tertiary-bg);
      border-top-color: var(--bs-primary);
      box-shadow: 0 18px 48px -28px rgba(20, 16, 43, .28);
    }
  }

  .accordion-header {
    margin: 0;
  }

  .accordion-button {
    gap: 1.125rem;
    font-family: var(--tz-font-heading);
    font-size: clamp(1.0625rem, 1.0149rem + 0.2030vw, 1.1875rem); /* 17→19px */
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: var(--ls-snug);
    border-radius: var(--bs-border-radius);

    /* Round "+" that turns into an accent "×" when open. */
    &::after {
      border: 1.5px solid var(--tz-border-2);
      border-radius: 50%;
      background-position: center;
      background-size: 0.75rem;
      transition: transform .35s ease, background-color .35s ease, border-color .35s ease;
    }

    &:hover::after {
      border-color: var(--bs-primary);
    }

    &:not(.collapsed) {
      box-shadow: none;

      &::after {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
      }
    }

    &:focus-visible {
      outline: 2px solid var(--bs-primary);
      outline-offset: 3px;
    }
  }

  .accordion-body {
    padding-bottom: 1.625rem;

    p {
      max-width: 60ch;
    }

    /* Last block of the WYSIWYG (inside the field wrapper). */
    > :last-child > :last-child {
      margin-bottom: 0;
    }
  }
}

/* CATEGORIES: overline + prev/next around a Swiper track of tiles
   (JS init: .js-categories-slider in js/scripts.js). */
section.categories-carousel {
  background: var(--tz-cream);
  padding: clamp(0.75rem, 0.512rem + 1.0152vw, 1.25rem) 0; /* 12→20px */

  .categories-carousel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.75rem;
  }

  .overline {
    margin: 0;
  }

  .categories-carousel-nav {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex: none;
  }

  .categories-carousel-prev,
  .categories-carousel-next {
    width: 2.125rem;
    height: 2.125rem;
    flex: none;
    border: 1px solid var(--tz-border-2);
    background: #fff;
    color: var(--bs-body-color);
    border-radius: 50%;
    cursor: pointer;
    font-size: var(--fs-base);
    line-height: 1;
    transition: border-color .2s, color .2s, background .2s;
  }

  .categories-carousel-prev:hover,
  .categories-carousel-next:hover {
    border-color: var(--bs-body-color);
    background: var(--bs-body-color);
    color: #fff;
  }

  .categories-carousel-slider {
    margin-top: clamp(0.5rem, 0.4048rem + 0.4061vw, 0.75rem); /* 8→12px */
    overflow: hidden;
    padding: 0.375rem 0 0.75rem;
    margin-bottom: -0.75rem;
  }

  /* Swiper sets .swiper-slide { height: 100% }, which disables flex stretch;
     the auto keyword lets .swiper-wrapper equalise the tile heights. */
  .swiper-slide {
    height: auto;
  }
}

.category-tile {
  height: 100%;
  min-height: 3.5rem;
  padding: 0.625rem 0.875rem;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s;
  box-sizing: border-box;

  &:hover {
    box-shadow: 0 20px 40px -26px rgba(var(--bs-body-color-rgb), .5);
    transform: translateY(-4px);
    border-color: var(--bs-primary);
  }

  .category-tile-icon {
    width: 1.875rem;
    height: 1.875rem;
    flex: none;
    border-radius: 50%;
    background: var(--tz-mint);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    img {
      max-width: 1rem;
      max-height: 1rem;
      width: auto;
      height: auto;
    }
  }

  .category-tile-label {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    font-family: var(--tz-font-heading);
    font-weight: 600;
    font-size: var(--fs-sm);
    line-height: var(--lh-heading-sm);
    letter-spacing: var(--ls-snug);
    color: var(--bs-body-color);
  }

  .category-tile-arrow {
    font-size: var(--fs-base);
    line-height: 1;
    color: var(--bs-primary);
    flex: none;
  }
}

/* DOUBLE CONTACT: responsive grid of contact cards, alternating
   backgrounds, no image. */
section.paragraph--type--personaes-list {
  padding: clamp(3rem, 2.0006rem + 4.2640vw, 5.625rem) 0; /* 48→90px */

  /* min(): one card never gets wider than a narrow phone's container. */
  .personae-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: 1.25rem;
  }
}

.paragraph--type--personae {
  padding: clamp(2.375rem, 1.7563rem + 2.6396vw, 4rem); /* 38→64px */
  border-radius: var(--bs-border-radius);
  background: var(--bs-tertiary-bg);
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;

  &:hover {
    box-shadow: 0 14px 30px -22px rgba(var(--bs-body-color-rgb), .45);
    transform: translateY(-2px);
  }

  &:nth-child(even) {
    background: var(--bs-primary-bg-subtle);
  }

  h2 {
    margin: 0 0 0.875rem;
    font-size: var(--fs-h2);
  }

  .personae-description {
    margin: 0 0 1.75rem;
    color: var(--bs-secondary-color);
    max-width: 40ch;
  }

  .btn {
    margin-top: auto;
    align-self: flex-start;
  }
}

.paragraph--type--highlight {
  color: white;
  padding: 2.5rem 5rem !important;
}

.paragraph--type--highlight.highlight-blue {
  background-color: var(--bs-primary);
}

.paragraph--type--highlight.highlight-dark-grey {
  background-color: #2a2a2a;
}

.paragraph--type--highlight p {
  margin-bottom: 0;
  line-height: 1.8;
  font-size: 1.3125em;
}

/* TEXT AND IMAGE: image beside the text, the text alone at full width
   without an image. */
section.paragraph--type--text-and-image {
  padding: clamp(2.25rem, 1.5838rem + 2.8426vw, 4rem) 0 var(--space-section-y); /* 36→64px, 64→124px */

  .grid {
    display: grid;
    /* min(): never wider than a narrow phone's container. */
    grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr));
    gap: clamp(2rem, 0.6675rem + 5.6853vw, 5.5rem); /* 32→88px */
    align-items: center;
  }

  &.no-image .grid {
    grid-template-columns: 1fr;
  }

  .media img {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
  }

  .media-col .caption {
    margin: 0.875rem 0 0;
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-caps-sm);
    text-transform: uppercase;
    color: var(--bs-tertiary-color);
  }

  .text h2 {
    font-weight: 600;
    margin: 0;
    font-size: var(--fs-section);
  }

  .text .small-caps {
    margin-bottom: 2em;
  }
}

/* OUR CONCEPT: overline, one WYSIWYG block (full-width lead sentence +
   3-column prose), a grid of numbered cards, 1-2 CTAs. */
section.paragraph--type--content-card-list {
  background: var(--tz-mint);
  padding: var(--space-section-y) 0;

  .concept-body {
    margin-top: 1.25rem;

    h2 {
      margin: 0 0 1.5rem;
      font-weight: 600;
      font-size: var(--fs-section);
    }

    p {
      margin: 0 0 1em;
    }

    .lead {
      margin-bottom: 2rem;
    }

    table td {
      color: var(--bs-secondary-color);
    }
  }

  .content-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
    gap: 0.875rem;
    margin-top: 3.5rem;
  }

  .concept-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2.75rem;
  }
}

section.paragraph--type--content-card {
  padding: 1.375rem 1.5rem;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 1px 2px rgba(var(--bs-body-color-rgb), .05);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: box-shadow .2s ease, transform .2s ease;

  &:hover {
    box-shadow: 0 14px 30px -22px rgba(var(--bs-body-color-rgb), .45);
    transform: translateY(-2px);
  }

  .content-card-number {
    font-family: var(--tz-font-heading);
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--bs-primary);
    padding-top: 0.1875rem;
  }

  .content-card-title {
    font-weight: 600;
  }

  .content-card-desc {
    font-size: var(--fs-sm);
    color: var(--bs-tertiary-color);
    margin-top: 0.1875rem;
  }
}

/* ACCORDION: overline + Swiper coverflow carousel (js/scripts.js,
   initAccordions()). Swiper scales the neighbours down. As in the maquette,
   blocks have a fixed minimum height and the image fills what the text
   leaves: the text unfolding on the active block (grid rows 0fr → 1fr)
   shrinks the image, not the row, which only grows if a text outgrows that
   height. One easing for the slide, the scale and the text, so they move
   together. */
section.paragraph--type--accordion-list {
  --accordion-ease: cubic-bezier(.65, 0, .35, 1);
  background: #fff;
  /* 30→52px, 20→34px */
  padding: clamp(1.875rem, 1.3515rem + 2.2335vw, 3.25rem) 0 clamp(1.25rem, 0.9169rem + 1.4213vw, 2.125rem);

  .accordion-box {
    background: var(--bs-tertiary-bg);
    /* border-top: 3px solid var(--bs-primary); */
    border-radius: var(--bs-border-radius);
    /* 36→60px, 26→48px, 40→64px */
    padding: clamp(2.25rem, 1.6789rem + 2.4365vw, 3.75rem) clamp(1.625rem, 1.1015rem + 2.2335vw, 3rem) clamp(2.5rem, 1.9289rem + 2.4365vw, 4rem);
  }

  /* Swiper clips its slides: room for the active block's shadow, given
     back underneath so the spacing stays the maquette's. */
  .accordion-track {
    margin-top: 2.25rem;
    padding-bottom: 2.5rem;
    margin-bottom: -2.5rem;
  }

  /* Coverflow puts the slides in a 3D context (.swiper-3d: perspective,
     preserve-3d), where browsers raster their text as a texture: blurred.
     Without rotation or depth it has no use here. */
  .accordion-track.swiper-3d {
    perspective: none;

    .swiper-wrapper,
    .swiper-slide {
      transform-style: flat;
    }
  }

  .swiper-wrapper {
    --swiper-wrapper-transition-timing-function: var(--accordion-ease);
  }

  .swiper-slide {
    height: auto;
    transition-timing-function: var(--accordion-ease);
  }

  /* Prev/next (CAROUSEL ARROWS), below lg only. */
  .accordion-nav {
    display: none;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;

    button {
      padding: 0;
      background: none;
      border: none;
    }
  }
}

section.paragraph--type--accordion-item {
  height: 100%;
  min-height: 28.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: 1.875rem;
  background: #fff;
  border-top: 3px solid transparent;
  border-radius: var(--bs-border-radius);
  transition: border-color .6s var(--accordion-ease), box-shadow .6s var(--accordion-ease);

  .swiper-slide-active > & {
    border-top-color: var(--bs-primary);
    box-shadow: 0 18px 48px -28px rgba(var(--bs-body-color-rgb), .28);
  }

  /* Number set on the slide (--accordion-number). */
  &::before {
    content: var(--accordion-number);
    font-family: var(--tz-font-heading);
    font-weight: 700;
    font-size: 0.8125rem;
    line-height: 1.2;
    color: var(--bs-primary);
    transition: font-size .6s var(--accordion-ease);
  }

  /* Swiper scales the other blocks down to 0.53 (js/scripts.js,
     coverflowEffect.scale): their number is set 1 / 0.53 bigger, so it reads
     the same size everywhere. A font size, not a transform: the block makes
     room for it (the image gives way), nothing overflows. */
  .swiper-slide:not(.swiper-slide-active) > &::before {
    font-size: calc(0.8125rem / 0.53);
  }

  .accordion-title {
    margin: 0;
    max-width: 24ch;
    font-size: clamp(1.4375rem, 1.2709rem + 0.7107vw, 1.875rem); /* 23→30px */
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: var(--ls-tight);
  }

  .accordion-media {
    position: relative;
    flex: 1 1 0;
    min-height: 6.875rem;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    background: var(--bs-tertiary-bg);

    img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .accordion-reveal {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: -1.125rem;
    opacity: 0;
    transition: grid-template-rows .6s var(--accordion-ease), margin-top .6s var(--accordion-ease), opacity .3s ease;

    > div {
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.125rem;
    }
  }

  .swiper-slide-active > & .accordion-reveal {
    grid-template-rows: 1fr;
    margin-top: 0;
    opacity: 1;
    transition-delay: 0s, 0s, .25s;
  }

  .accordion-text {
    margin: 0;
    max-width: 48ch;
    color: var(--bs-secondary-color);
  }
}

/* CTA BANNER: text and 1-2 links, centered card or wide band, light or
   dark. */
section.paragraph--type--cta {
  /* 18→28px, 34→60px */
  padding: clamp(1.125rem, 0.8871rem + 1.0152vw, 1.75rem) 0 clamp(2.125rem, 1.5063rem + 2.6396vw, 3.75rem);

  .cta-banner {
    padding: clamp(1.875rem, 1.3515rem + 2.2335vw, 3.25rem); /* 30→52px */
    border-radius: var(--bs-border-radius);
    background: var(--bs-tertiary-bg);
    border-left: 4px solid var(--bs-primary);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 0.8338rem + 2.8426vw, 3.25rem); /* 24→52px */
    align-items: center;
    transition: box-shadow .2s ease;
  }

  .cta-banner:hover {
    box-shadow: 0 14px 30px -22px rgba(var(--bs-body-color-rgb), .4);
  }

  .cta-banner h2 {
    margin: 0 0 0.875rem;
    font-size: var(--fs-h2);
  }

  .cta-banner p:not(.overline) {
    margin: 0;
    color: var(--bs-secondary-color);
    max-width: 46ch;
  }

  .cta-banner-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }

  /* Dark background (links use .btn-secondary / .btn-outline-light, see
     field--paragraph--field-links--cta.html.twig). */
  &.cta-dark {
    .cta-banner {
      background: var(--bs-body-color);
    }

    h2,
    p:not(.overline) {
      color: #fff;
    }

    .overline {
      color: var(--tz-primary-soft);
    }
  }

  /* Wide: full-width band, the background moves from the card to the
     section. */
  &.cta-wide {
    padding: 0;

    .cta-banner {
      background: none;
      border-left: 0;
      border-radius: 0;
      padding: clamp(2.5rem, 1.6434rem + 3.6548vw, 4.75rem) 0; /* 40→76px */
      grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr));
      /* 26px, 24→64px */
      gap: 1.625rem clamp(1.5rem, 0.5482rem + 4.0609vw, 4rem);
    }

    .cta-banner:hover {
      box-shadow: none;
    }
  }

  &.cta-wide.cta-light {
    background: var(--bs-tertiary-bg);
  }

  &.cta-wide.cta-dark {
    background: var(--bs-body-color);
  }
}

/* STATEMENTS: overline + grid of short claims. */
section.paragraph--type--statement-list {
  padding: 0 0 var(--space-section-y);
  background: #fff;

  .statement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
    gap: 1.125rem;
    margin-top: 0.625rem;
  }
}

section.paragraph--type--statement {
  padding: var(--space-card);
  border-radius: var(--bs-border-radius);
  background: var(--bs-primary-bg-subtle);
  transition: transform .2s ease;

  &:hover {
    transform: translateY(-3px);
  }

  .statement-grid > &:nth-child(3n+2) {
    background: var(--bs-tertiary-bg);
  }

  .statement-grid > &:nth-child(3n) {
    background: var(--tz-lime);
  }

  .statement-mark {
    width: 1.625rem;
    height: 1.625rem;
    background: var(--bs-primary);
    margin-bottom: 1.625rem;
  }

  .statement-grid > &:nth-child(3n+2) .statement-mark {
    background: var(--bs-body-color);
  }

  p {
    margin: 0;
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    color: var(--bs-secondary-color);
  }
}

/* HIGHLIGHTED CONTENT: paragraph and block (waiting for their designs). */
section.highlighted-content {
  position: relative;
  padding: 0;
  height: calc(100vh - var(--header-height) - var(--gin-toolbar-height, 0px));

  .div-image {
    width: auto;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(80%);
    }
  }

  .headings {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(0, -50%);
    margin: 0 5em;

    .highlighted-content-title {
      font-size: 4.125em;
      font-family: var(--tz-font-body);
      text-shadow: black 3px 3px 25px;
    }

    .highlighted-content-subtitle {
      font-size: 1.75em;
      text-shadow: black 3px 3px 25px;
      margin: 1.5em 0;
    }

  }
}

/* FREE TEXT: WYSIWYG block (waiting for its design). */
section.paragraph--type--free-text img:not([width]) {
  width: 100%;
}

.col-2-4-custom {
  width: 20%;
  flex: 0 0 auto;
}

table p {
  margin-bottom: 0;
}

/* COUNTERS: dark band of figures (CountUp, js/countup.js) and a tagline. */
section.paragraph--type--counters-list {
  background: var(--bs-body-color);
  color: #efebfe;
  padding: var(--space-section-y) 0;

  .overline {
    color: var(--tz-primary-soft);
  }

  .counters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14.375rem, 1fr));
    gap: 0;
    margin-top: 0.375rem;
  }

  .paragraph--type--counter {
    padding: 2.125rem 1.75rem 2.125rem 0;
  }

  .number-wrapper {
    display: flex;
    align-items: baseline;
    font-weight: 600;
  }

  .number {
    font-family: var(--tz-font-heading);
    font-size: var(--fs-figure);
    letter-spacing: var(--ls-figure);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
  }

  .suffix {
    font-style: normal;
    /* .suffix is a sibling of .number, not a child: sized from the token. */
    font-size: calc(var(--fs-figure) * .4);
    color: var(--tz-primary-soft);
    margin-left: 0.25rem;
  }

  .description {
    margin-top: 0.875rem;
    font-size: var(--fs-sm);
    color: #fff;
    max-width: 25ch;
  }

  .tagline {
    margin: clamp(2.375rem, 1.9467rem + 1.8274vw, 3.5rem) 0 0; /* 38→56px */
    font-family: var(--tz-font-heading);
    font-weight: 500;
    font-size: var(--fs-h3);
    letter-spacing: var(--ls-snug);
    max-width: 24ch;
    line-height: var(--lh-heading-sm);
    color: #ffffff;
  }
}

/* RELATED CONTENT: card hover. */
.related-content .card:hover {
  box-shadow: 0 0 20px 0 #a0a5a5;
}

/* VIEWS: an embedded view clips its overflow (carousel tracks). */
.views-element-container {
  overflow: hidden;
}

/* SWIPER CAROUSELS: slider paragraph (waiting for its design). */
section.paragraph.swiper-carousels {
  background-color: black;
  padding: 5em 0;
}

section.paragraph.swiper-carousels .container-fluid {
  overflow: hidden;
}

/* IMG Swiper carousel */
.swiper-carousels .left-split .swiper {
  max-width: 575px;
  overflow: clip;
  overflow-clip-margin: 500px;
  clip-path: inset(-50px 0 0 -375px);
  margin-right: 0;
}

/* Text Swiper carousel */
.swiper-carousels .right-split .swiper {
  max-width: none;
  margin-left: 10%;
}

/* Slides */
.swiper-carousels .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: unset;
}

/* Text Swiper carousel slides */
.swiper-carousels .swiper-text .swiper-slide {
  background-color: transparent;
  justify-content: start;
}

/* Slides img */
.swiper-carousels .swiper-slide img {
  width: 100%;
  height: 100%;
}

/* Next, previous and pagination controls */
.swiper-carousels .swiper-controls {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-top: 15px;
}

.swiper-carousels .swiper-button-prev,
.swiper-carousels .swiper-button-next,
.swiper-carousels .swiper-pagination {
  position: relative;
  color: transparent;
}

.swiper-carousels .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0 22L22 0l2.1 2.1L4.2 22l19.9 19.9L22 44 0 22z' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1em;
  background-position: center;
  left: 0 !important;
  margin-top: 0 !important;
}

.swiper-carousels .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22L5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0l22 22z' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1em;
  background-position: center;
  left: 0 !important;
  margin-top: 0 !important;
}

.swiper-carousels .swiper-pagination.swiper-pagination-horizontal {
  display: flex;
  justify-content: space-around;
  width: auto;
  top: 0;
  bottom: 0;
}

.swiper-carousels .swiper-pagination-bullet {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  margin: 0 10px;
  background-color: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}

.swiper-carousels .swiper-pagination-bullet-active span {
  background-color: white;
}

.swiper-carousels .swiper-pagination-bullet span {
  height: 11px;
  position: absolute;
  width: 11px;
  background-color: white;
  margin: 0 1.2em !important;
  border-radius: 50%;
}

/* Slide progression SVG */
.swiper-carousels .swiper-pagination-bullet .progress {
  transform: rotate(-90deg);
  background-color: unset;
  height: 41px;
  width: 41px;
}

/* Slide progression circle */
.swiper-carousels .swiper-pagination-bullet .circle-origin {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 125.664px;
  stroke-dashoffset: 125.664px;
}

/* Slide progression circle - animated */
.swiper-carousels .swiper-pagination-bullet-active .circle-origin {
  animation: progress 10s;
  animation-direction: reverse;
  animation-timing-function: linear;
}

.swiper-carousels .swiper-headings {
  max-width: 90%;
}

.swiper-carousels .swiper-headings h2 {
  font-size: 2.3125em;
  font-family: var(--tz-font-body) !important;
  margin-bottom: 1rem !important;
}

.swiper-carousels .swiper-headings p {
  font-family: var(--tz-font-body) !important;
}

/* QUOTE: waiting for its design. */
section.paragraph.paragraph--type--quote {
  background-color: #f8f6f2;
  font-size: 2.3125em;
  padding: 3rem;
}

blockquote > p {
  margin-bottom: 0;
}

.paragraph--type--quote div {
  width: 70%;
}

/* RELATED CONTENT: cards of linked nodes (waiting for their design). */
section.paragraph.paragraph--type--related-content {
  background-color: #e5e8ef;
  padding: 5rem;
}

.paragraph--type--related-content hr {
  border: 1px solid black;
  opacity: 0.5;
  margin: 1rem 0 2.5rem 0;
}

.paragraph--type--related-content .content-related-title {
  font-family: var(--tz-font-body);
  font-size: 2.3125em;
}

.related-content .card {
  border-radius: 0.25em;
  border: none;
}

/* Card image */
.related-content .card-top {
  position: relative;
  height: 300px;
}

.related-content .card-top > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(80%);
  padding: 0 !important;
}

.related-content .card-title {
  font-size: 1.4375em;
}

.related-content .card-body {
  padding: 1.5rem;
}

div[class$="-view"] .related-content .card-body p.attributes {
  min-width: 125px;
}

div[class$="-view"].related-content .card-body .icons img {
  margin-right: 1.5em;
  width: 45px !important;
  height: 46px;
}

.related-content .card-text {
  margin-bottom: 0.5rem;
}

/* TESTIMONIALS: quote carousel. */
section.paragraph--type--testimonial-list {
  background: var(--tz-lime);
  text-align: center;
  padding: var(--space-section-y) 0;

  /* All quotes stay laid out (stacked by Bootstrap's negative margin), so
     the carousel takes the longest one's height and the page below does
     not jump between slides; the inactive ones are only hidden, and a
     shorter quote is centered in that height. */
  .carousel-inner {
    display: flex;
    align-items: center;
  }

  .carousel-item {
    display: block;
  }

  .carousel-item:not(.active, .carousel-item-next, .carousel-item-prev) {
    visibility: hidden;
  }

  /* The quote fades out then the next one fades in, as the homepage leaderboard
     text, instead of Bootstrap's crossfade which overlaps both. The id
     outweighs Bootstrap's transition rules. */
  #testimonialsCarousel.carousel-fade {
    .active.carousel-item-start,
    .active.carousel-item-end {
      transition: opacity .3s ease-in-out;
    }

    .carousel-item-next.carousel-item-start,
    .carousel-item-prev.carousel-item-end {
      transition: opacity .3s ease-in-out .3s;
    }
  }

  .carousel-indicators {
    position: static;
    gap: 0.5rem;
    margin: 1rem 0 0;
  }

  /* 3px bar, but a 23px tall hit area: the padding is transparent
     (background-clip). */
  .carousel-indicators [data-bs-target] {
    flex: none;
    border: 0;
    opacity: 1;
    width: 1.625rem;
    height: 3px;
    padding: 0.625rem 0;
    border-radius: 0;
    background-color: var(--bs-border-color);
    background-clip: content-box;
    margin: 0;
  }

  .carousel-indicators [data-bs-target].active {
    background-color: var(--bs-primary);
  }
}

.paragraph--type--testimonial {
  padding: 0 !important;

  .accent-bar {
    display: block;
    width: 2.125rem;
    height: 3px;
    background: var(--bs-primary);
    margin: 0 auto 2.125rem;
  }

  blockquote {
    margin: 0 auto;
    max-width: 58ch;
    font-family: var(--tz-font-heading);
    font-weight: 400;
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-snug);
    color: var(--bs-body-color);

    > div:before {
      content: '\201c';
    }

    > div:after {
      content: '\201d';
    }
  }

  .attribution {
    margin: 1.75rem 0 0;
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-caps-sm);
    text-transform: uppercase;
    color: var(--bs-tertiary-color);
  }
}

/* FORMS: every form of the page content (webforms, account forms…), wherever
   it is placed. Fields keep Bootstrap's classes (.form-control, .form-select,
   .form-check-input); errors are Bootstrap's is-invalid / .invalid-feedback,
   from the server (form-element.html.twig) or js/formValidation.js. */
main form {
  .form-group {
    margin-bottom: 20px;
  }

  label {
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--bs-body-color);
    margin-bottom: 8px;
    display: inline-block;
  }

  .form-required::after {
    content: " *";
    color: var(--bs-primary);
  }

  /* Same border as the header search field: only the border color changes
     on focus (no shadow ring, no background swap). */
  /* margin: Drupal's .form-text on text inputs is also Bootstrap's help text
     class, which adds a top margin. */
  .form-control,
  .form-select {
    height: 54px;
    margin: 0;
    padding: 0 16px;
    border-radius: var(--bs-border-radius);
    border: 1px solid var(--tz-border-2);
    background: var(--bs-tertiary-bg);
    font-family: var(--tz-font-body);
    font-size: var(--fs-base);
    color: var(--bs-body-color);
    box-shadow: none;
    transition: border-color .18s;

    &:focus {
      border-color: var(--bs-primary);
      box-shadow: none;
    }

    /* Restated so it isn't lost to source order. Bootstrap's red icon is
       removed: only the border color changes. */
    &.is-invalid,
    &.is-invalid:focus {
      border-color: var(--bs-form-invalid-border-color);
      background-image: none;
      padding-right: 16px;
    }
  }

  textarea.form-control {
    height: auto;
    min-height: 156px;
    padding: 14px 16px;
    line-height: 1.6;
    resize: vertical;
  }

  .invalid-feedback {
    font-family: var(--tz-font-body);
    font-size: var(--fs-sm);
    font-weight: 500;

    /* E.g. "Forgot your password?" after a failed log in. */
    a {
      color: inherit;
    }
  }

  /* hCaptcha renders in a cross-origin iframe: its checkbox can't be styled,
     so an error only shows the message below it (js/formValidation.js). */
  .captcha {
    margin-block: 8px;
  }

  /* Status messages rendered inside the form (webform AJAX errors). */
  #drupal-messages {
    width: auto;
    margin: 0 0 2.5rem;
  }

  /* Disabled while a field is invalid (updateSubmitState() in
     js/formValidation.js). */
  .btn.form-submit {
    margin-top: 20px;

    &:disabled {
      opacity: .5;
      cursor: not-allowed;
      /* Bootstrap's .btn:disabled sets pointer-events: none, which hides the
         not-allowed cursor. Clicks stay blocked by the disabled attribute. */
      pointer-events: auto;
    }
  }

  /* Radio: round 22px box, filled dot when checked. */
  .js-form-type-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;

    label {
      margin: 0;
      font-weight: 400;
    }
  }

  .form-check-input[type="radio"] {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1px solid var(--tz-border-2);
    background: #fff;
    cursor: pointer;

    &:checked {
      border-color: var(--bs-primary);
      background: radial-gradient(var(--bs-primary) 0 5px, #fff 6px);
    }

    &:focus {
      box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .14);
    }
  }
}

/* Checkbox (.form-checkbox-group, see form-element.html.twig): 22px box, the
   description beside it acts as the label. */
main form .form-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;

  /* .invalid-feedback is width:100% (Bootstrap): it wraps onto its own line
     below the checkbox + description row. */
  .invalid-feedback {
    margin-top: 0;
  }

  .form-check-input {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    border-radius: var(--bs-border-radius);
    border: 1px solid var(--tz-border-2);
    background: #fff;
    cursor: pointer;
    transition: background .18s, border-color .18s, box-shadow .18s;

    &:checked {
      background-color: var(--bs-primary);
      border-color: var(--bs-primary);
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='M3 7.4l2.6 2.6L11 4.4'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 13px;
    }

    &:focus {
      box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .14);
    }

    &.is-invalid {
      border-color: var(--bs-form-invalid-border-color);
    }
  }

  .description {
    /* Own flex-basis: long text wraps next to the checkbox instead of
       dropping below it. */
    flex: 1 1 0%;
    min-width: 200px;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--bs-secondary-color);

    a {
      color: var(--bs-primary);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 3px;

      &:hover {
        color: var(--bs-primary-text-emphasis);
      }
    }
  }

  /* The real <label> is visually hidden and the description acts as the
     label: the required marker goes after its text (an inline element, so
     the marker doesn't wrap on its own line). */
  .form-check-input[required] ~ .description .webform-element-description::after {
    content: ' *';
    color: var(--bs-primary);
  }
}

/* Status messages (status-messages.html.twig): on the container's width. */
#drupal-messages {
  width: calc(min(100%, 1360px) - var(--space-gutter) * 2);
  margin: 1rem auto 0;

  .alert {
    margin-top: 1rem;
  }
}

.webform-confirmation .alert {
  margin-top: 1rem;
}

/* SEARCH: light layout under the leaderboard banner, likely to evolve
   (views-view--search-content.html.twig): form, result count, results. */
.search-container {
  padding-block: clamp(40px, 5vw, 80px) clamp(48px, 6vw, 88px);

  /* The infinite scroll wrapper is a Bootstrap .row: no gutter. */
  .views-infinite-scroll-content-wrapper {
    --bs-gutter-x: 0;
  }
}

/* Field and button on one row; the field label is visually hidden. */
.search-form {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 720px;

  .form-item {
    flex: 1;
    min-width: 0;
    margin: 0;
  }

  .btn.form-submit {
    height: 54px;
    margin-top: 0;
  }
}

.search-results-count {
  margin: 32px 0 0;
  font-size: var(--fs-lead);
  font-weight: 300;
  color: var(--bs-secondary-color);
}

.search-results {
  max-width: 900px;
  margin-top: 24px;
  border-top: 1px solid var(--bs-border-color);
}

.search-result {
  padding: 24px 0;
  border-bottom: 1px solid var(--bs-border-color);

  .small-caps {
    margin: 0 0 8px;
  }

  h2 {
    margin: 0;
    font-size: var(--fs-h4);

    a {
      color: var(--bs-body-color);
      text-decoration: none;

      &:hover {
        color: var(--bs-primary);
      }
    }
  }

  p:not(.small-caps) {
    margin: 8px 0 0;
    color: var(--bs-secondary-color);
  }
}

/* SCROLL TO TOP: shown by js/scripts.js once the page is scrolled. Round
   and filled with the primary color (the .btn-primary colors), so it can't
   be mistaken for the square carousel arrows (CAROUSEL ARROWS) it may pass
   over. */
.scroll-top {
  position: fixed;
  right: var(--space-gutter);
  bottom: var(--space-gutter);
  z-index: 99;
  width: 2.625rem;
  height: 2.625rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--bs-primary);
  box-shadow: 0 8px 20px -8px rgba(var(--bs-body-color-rgb), .45);
  color: #fff;
  font-size: var(--fs-base);
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s;

  &::after {
    content: "↑";
  }

  &:hover {
    background-color: var(--bs-primary-text-emphasis);
  }
}

p iframe {
  max-width: 100%;
}

/* LEADERBOARD BANNER: banner of content pages (dark, with or without a leaderboard
   image), then the breadcrumb as a bar. The region is a grid: image and
   headings share the first cell, the breadcrumb takes the second row. */
#region-leaderboard.leaderboard-banner {
  --leaderboard-banner-inline: max(clamp(18px, 3vw, 40px), calc((100% - 1360px) / 2 + clamp(18px, 3vw, 40px)));
  display: grid;
  grid-template-columns: 100%;
  margin: 0;
  padding: 0;

  > #block-leaderboard,
  > .leaderboard-headings {
    grid-area: 1 / 1;
  }

  > #block-leaderboard {
    position: relative;
    min-height: clamp(340px, 42vw, 520px);
    overflow: hidden;
    background: var(--bs-body-color);

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(100deg, var(--bs-body-color) 0%, var(--bs-body-color) 30%, rgba(var(--bs-body-color-rgb), .88) 52%, rgba(var(--bs-body-color-rgb), .42) 78%, rgba(var(--bs-body-color-rgb), .18) 100%);
    }
  }

  #leaderboard-carousel {
    position: absolute;
    inset: 0;

    .carousel-inner,
    .carousel-item {
      height: 100%;
    }

    .carousel-item img {
      position: absolute;
      inset: 0;
    }
  }

  .leaderboard-headings {
    position: relative;
    z-index: 2;
    top: auto;
    left: auto;
    transform: none;
    align-self: end;
    min-width: 0;
    margin: 0;
    padding: clamp(48px, 6vw, 88px) var(--leaderboard-banner-inline) clamp(34px, 4vw, 56px);
    color: #fff;
    text-shadow: none;

    > * {
      max-width: 720px;
    }

    h1 {
      margin: 0 0 18px;
      font-size: var(--fs-h1);
      color: #fff;
      text-wrap: balance;
    }

    .subtitle {
      max-width: 46ch;
      margin: 0;
      font-family: var(--tz-font-heading);
      font-size: var(--fs-lead);
      font-weight: 300;
      line-height: 1.35;
      letter-spacing: var(--ls-snug);
      color: #fff;
    }
  }

  /* Several images: the controls bar (LEADERBOARD CAROUSEL CONTROLS) sits
     under the headings, on the same bottom inset; the headings make room for
     it (2.625rem buttons + 1.5rem gap). The headings span the whole banner
     (z-index 2) and come later in the DOM: the bar goes above them to stay
     clickable. */
  #leaderboard-carousel .carousel-controls {
    z-index: 3;
    bottom: clamp(34px, 4vw, 56px);
  }

  &:has(.carousel-indicators) .leaderboard-headings {
    padding-bottom: calc(clamp(34px, 4vw, 56px) + 2.625rem + 1.5rem);
  }

  /* Without an image, the headings carry the dark background themselves. */
  &.no-leaderboard .leaderboard-headings {
    background: var(--bs-body-color);
  }

  .leaderboard-breadcrumb {
    grid-area: 2 / 1;
    position: static;
    margin: 0;
    padding: 13px var(--leaderboard-banner-inline);
    border-bottom: 1px solid var(--bs-border-color);
    font-size: var(--fs-xs);
    color: var(--bs-tertiary-color);

    ul {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
    }

    ul li {
      color: inherit;
    }

    ul li::after {
      content: none;
    }

    ul li + li::before {
      content: "·";
      margin-right: 10px;
    }

    ul li:last-child {
      font-weight: 600;
      color: var(--bs-body-color);
    }

    a:hover {
      color: var(--bs-primary);
      text-decoration: none;
    }

    a.home::after {
      display: none;
    }

    /* The home link shows its label here (icon only elsewhere, below). */
    .home-label {
      position: static;
      width: auto;
      height: auto;
      overflow: visible;
      clip-path: none;
    }
  }
}

/* Home link label: visually hidden, the home icon stands for it (shown as
   text in the leaderboard banner, above). */
.leaderboard-breadcrumb .home-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* PARAGRAPHS FLOW: paragraphs of a content's body (any content type, see
   field--field-body.html.twig) share one vertical rhythm and WYSIWYG
   typography. */
.paragraphs > section.paragraph {
  margin: 0;
  padding: 0;

  & + section.paragraph {
    margin-top: clamp(48px, 6vw, 88px);
  }

  &:first-child {
    margin-top: clamp(40px, 5vw, 80px);
  }

  &:last-child {
    margin-bottom: clamp(48px, 6vw, 88px);
  }

  /* A wide CTA closing the page sits directly on the footer. */
  &.cta-wide:last-child {
    margin-bottom: 0;
  }
}

.paragraphs > section.paragraph .text,
.paragraphs > section.paragraph--type--generic-content .container {
  h2 {
    margin: 0 0 22px;
    font-size: var(--fs-h2);
    text-wrap: balance;
  }

  h3 {
    margin: 0 0 12px;
    font-size: var(--fs-h4);
  }

  p {
    margin: 0 0 20px;
    color: var(--bs-secondary-color);
  }

  p:last-child {
    margin-bottom: 0;
  }

  ul,
  ol {
    color: var(--bs-secondary-color);
  }
}

/* USER PROFILE: fields under the leaderboard banner (user--full.html.twig), same
   vertical rhythm as the PARAGRAPHS FLOW; labels as .small-caps. */
.user-profile {
  padding: clamp(40px, 5vw, 80px) 0 clamp(48px, 6vw, 88px);

  .form-item {
    margin: 0 0 24px;
  }

  .label {
    margin: 0 0 6px;
    font-family: var(--tz-font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-caps-sm);
    text-transform: uppercase;
    color: var(--bs-tertiary-color);
  }
}

/* FORM PAGE: webform and account form pages, overline + h1 + chapo above
   the form card. */
.form-page {
  background: var(--bs-tertiary-bg);
  padding: clamp(48px, 7vw, 110px) 0;

  /* Overline, h1 and chapo: the "contact" block_content headings
     (setHeadingsFromBlockContent() in tenderz.theme), without a leaderboard
     image: only the typography changes. */
  #region-leaderboard.no-leaderboard .leaderboard-headings {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 clamp(18px, 3vw, 40px);
  }

  .leaderboard-headings {
    h1 {
      font-weight: 600;
      margin: 0;
      font-size: var(--fs-h1);
      color: var(--bs-body-color);
    }

    /* Chapo (field_subtitle), right under the title. */
    .subtitle {
      margin: 24px 0 0;
      font-size: var(--fs-lead);
      color: var(--bs-secondary-color);
      font-weight: 300;
    }
  }

  /* Vertical rhythm between the intro heading and what follows: paragraphs
     of field_extended_body (webform, free_text…) or the account form card
     (block--form-card.html.twig). */
  .paragraph,
  .form-card-section {
    padding: clamp(32px, 4vw, 56px) 0 0;
  }

  /* Status messages above the card (account forms), on the card's width;
     their links (error summary) take the alert's color. */
  > #drupal-messages {
    width: min(820px, 100% - var(--space-gutter) * 2);
    margin: clamp(32px, 4vw, 56px) auto 0;

    a {
      color: inherit;
    }

    + .form-card-section {
      padding-top: 24px;
    }
  }
}

.form-card {
  background: #fff;
  border-radius: var(--bs-border-radius);
  border-top: 3px solid var(--bs-primary);
  padding: clamp(26px, 3.6vw, 52px);
  box-shadow: rgba(var(--bs-body-color-rgb), 0.35) 0px 24px 60px -40px;
  max-width: 820px;

  h2 {
    font-weight: 600;
    margin: 0 0 22px;
    font-size: var(--fs-h2);
    color: var(--bs-body-color);
  }

  /* The confirmation swap only replaces the webform markup: this h2 lives in
     the paragraph template around it, so it is hidden explicitly. */
  &:has(.webform-confirmation) h2 {
    display: none;
  }
}

/* WEBFORMS: what only webforms have (character counter, captcha,
   confirmation). Fields: see FORMS. */
.webform-submission-form {
  /* Webform character counter (.text-count-wrapper, appended after the
     textarea): moved to the top-right of the field, next to its label. */
  .webform-type-textarea {
    position: relative;
  }

  .webform-type-textarea .text-count-wrapper {
    position: absolute;
    top: 0;
    right: calc(var(--bs-gutter-x) * .5);
    font-size: var(--fs-xs);
    color: var(--bs-tertiary-color);
  }

  /* Success state: the confirmation replaces the form content. It renders
     inside the form's .row: offset the row's negative margins, which have no
     .col-* padding to cancel them here. */
  .webform-confirmation {
    padding: clamp(12px, 3vw, 40px) calc(var(--bs-gutter-x, 1.5rem) * .5);

    .buttons {
      margin-top: 18px;
    }
  }

  i.confirm-check {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--tz-mint);
    margin: 0 0 18px;

    /* Checkmark as a data-URI SVG background (same technique as the consent
       checkbox). */
    &::before {
      content: '';
      display: block;
      width: 24px;
      height: 24px;
      margin: 16px;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%230f7d6c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3.5 9.5l3.6 3.6L14.5 5'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }

  /* confirmation_message is written as two paragraphs ("Thank you, {name}."
     then the description) so the first one can be styled as a heading. */
  .webform-confirmation__message {
    p:first-child {
      margin: 0 0 12px;
      font-size: var(--fs-h3);
      font-weight: 600;
      line-height: var(--lh-heading-sm);
      color: var(--bs-body-color);
      font-family: var(--tz-font-heading);
      letter-spacing: var(--ls-snug);
    }

    p:not(:first-child) {
      margin: 0;
      color: var(--bs-secondary-color);
      max-width: 44ch;
    }
  }
}

/* RESPONSIVE: desktop-first, one block per breakpoint, widest first. */
/* Very large devices (below 1600px) */
@media (max-width: 1599.98px) {
  .highlighted .card-top {
    height: 250px;
  }

  .highlighted .card-title {
    font-size: 1.4375em !important;
  }
}

/* X-Large devices (below 1200px) */
@media (max-width: 1199.98px) {
  .swiper-carousels .left-split .swiper {
    overflow-clip-margin: 800px;
    clip-path: inset(-50px 0 0 -800px);
  }

  .swiper-carousels .right-split {
    padding: 2.5em 5rem 0;
  }

  .swiper-carousels .right-split .swiper {
    margin-left: 0;
  }

  .swiper-carousels .swiper-headings {
    max-width: unset;
  }

}

/* Large devices (below 992px) */
@media (max-width: 991.98px) {
  #region-leaderboard {
    margin-top: unset;
  }

  .leaderboard-breadcrumb {
    padding: 1.5rem 5rem 1.5rem;
  }

  .highlighted .card-title {
    font-size: 1.6em !important;
  }

  .col-2-4-custom {
    width: 100%;
  }

  /* COUNTERS
     Two figures per row rather than an orphan on its own row (3 + 1 for
     four figures). */
  section.paragraph--type--counters-list .counters-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* FAQ: intro stacked above the questions. */
  section.paragraph--type--faq-list {
    .faq-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .faq-intro {
      position: static;

      p:not(.overline) {
        max-width: 52ch;
      }
    }
  }

  /* ACCORDION
     One block in view, neighbours replaced by the arrows (see
     initAccordions()); a narrower block than on desktop, so taller. */
  section.paragraph--type--accordion-list .accordion-nav {
    display: flex;
  }

  section.paragraph--type--accordion-item {
    min-height: 33.75rem;
  }
}

/* Medium devices (below 768px) */
@media (max-width: 767.98px) {
  section.paragraph img,
  section.paragraph div.div-image,
  section.paragraph div img {
    width: 100% !important;
  }

  section.highlighted-content div.div-image {
    height: 100%;
  }

  /* WYSIWYG image widths (Bootstrap .w-* utilities, !important): full width
     rather than a thumbnail with text wrapped around it. */
  .w-25,
  .w-50,
  .w-75 {
    width: 100% !important;
  }

  :is(.paragraph--type--generic-content, .paragraph--type--free-text) {
    img[width].align-left,
    div.align-left,
    figure.align-left {
      margin-right: 0;
    }

    img[width].align-right,
    div.align-right,
    figure.align-right {
      margin-left: 0;
    }
  }

  section.paragraph--type--faq-list {
    .accordion {
      --bs-accordion-btn-padding-x: 1.125rem;
      --bs-accordion-btn-padding-y: 1.125rem;
      --bs-accordion-body-padding-x: 1.125rem;
    }

    .accordion-button {
      gap: 0.875rem;
    }
  }

  section.highlighted-content .headings {
    left: unset;
  }

  /* HOMEPAGE LEADERBOARD
     The images only cover the leaderboard, whose height comes from the text
     (see .leaderboard-cta below). */
  .homepage-leaderboard #leaderboard-carousel {
    position: absolute;
    inset: 0;

    > .carousel-inner,
    .carousel-item {
      height: 100%;
      min-height: 0;
    }

    /* The text block spans the whole leaderboard, controls bar included, and
       comes later in the DOM: lift the controls above it to keep them
       clickable. */
    .carousel-controls {
      z-index: 3;
    }
  }

  .homepage-leaderboard {
    /* All slides stay laid out (stacked by Bootstrap's negative margin), so
       the leaderboard takes the tallest text's height and does not jump between
       slides; the inactive ones are only hidden. */
    #carousel-cta.carousel-fade {
      .carousel-item {
        display: block;
      }

      .carousel-item:not(.active, .carousel-item-next, .carousel-item-prev) {
        visibility: hidden;
      }
    }

    /* Centered over a fixed-height slide, a long text runs into the controls
       bar on a phone: the text sets the leaderboard height instead, at least the
       viewport, with the bottom padding clearing the controls bar
       (2.125rem from the bottom + 2.625rem buttons). */
    .leaderboard-cta {
      position: relative;
      top: auto;
      transform: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* 100vh: fallback for browsers without svh (small viewport unit). */
      min-height: calc(100vh - var(--header-height) - var(--gin-toolbar-height, 0px));
      min-height: calc(100svh - var(--header-height) - var(--gin-toolbar-height, 0px));
      padding: 3.5rem 0 6.75rem;
    }
  }

  /* CATEGORIES
     Below md, 2 or 3 tiles per view leave too little room beside the icon:
     icon and arrow share the first row, the name takes the full width
     below. */
  .category-tile {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    align-content: start;
    gap: 0.5rem 0.75rem;

    .category-tile-label {
      display: contents;
    }

    .category-tile-arrow {
      grid-area: 1 / 2;
      justify-self: end;
    }

    .category-tile-name {
      grid-column: 1 / -1;
    }
  }

  /* CTA BANNER
     Text and buttons stack, the buttons under the text and aligned with
     it. */
  section.paragraph--type--cta {
    .cta-banner,
    &.cta-wide .cta-banner {
      grid-template-columns: 100%;
    }

    .cta-banner-links {
      justify-content: flex-start;
    }
  }

  /* ACCORDION
     More room for the block: the lilac box goes edge to edge (its inset
     taking the container's place), so it is the band itself (no section
     padding around it), and the block's padding shrinks. Wider,
     so it needs less height. */
  section.paragraph--type--accordion-list {
    padding-block: 0;
  }

  section.paragraph--type--accordion-list .accordion-box {
    margin-inline: calc(-1 * var(--space-gutter));
    padding-inline: var(--space-gutter);
    border-radius: 0;
  }

  section.paragraph--type--accordion-item {
    min-height: 31.25rem;
    padding: 1.25rem;
  }

  /* WYSIWYG data tables scroll sideways rather than squeezing their
     columns. */
  table.content-table {
    display: block;
    overflow-x: auto;
  }
}

/* Small devices (below 576px) */
@media (max-width: 575.98px) {
  /* Not the content pages' banner nor the webform pages' intro, which have
     their own insets (LEADERBOARD BANNER, FORM PAGE). */
  main:not(.form-page) #region-leaderboard.no-leaderboard:not(.leaderboard-banner) {
    padding: 2.5rem 2.5rem 0;
  }

  .leaderboard-breadcrumb {
    padding: 1.5rem 2.5rem 1.5rem;
  }

  .related-content .card-top {
    height: 200px;
  }

  .highlighted .card-title {
    font-size: 1.4375em !important;
  }

  .paragraph.paragraph--type--related-content,
  .paragraph--type--highlight {
    padding: 2.5rem !important;
  }

  .swiper-carousels .right-split {
    padding: 2.5em 2.5rem 0;
  }

  /* Not in a content's paragraphs flow, which sets its own spacing
     (PARAGRAPHS FLOW). */
  section.paragraph.paragraph--type--quote:not(.paragraphs > *) {
    padding: 3rem 1.5rem;
  }

  .paragraph--type--quote div {
    width: 90%;
  }

  /* HOMEPAGE LEADERBOARD
     Stacked full-width buttons on a phone rather than two ragged widths. */
  .homepage-leaderboard {
    .leaderboard-text-actions {
      flex-direction: column;
      align-items: stretch;
    }
  }

  /* CTA BANNER
     Stacked full-width buttons rather than ragged widths. */
  section.paragraph--type--cta .cta-banner-links {
    flex-direction: column;
    align-items: stretch;
  }

  /* OUR CONCEPT
     Justified prose leaves wide gaps between words on a phone's short
     lines. */
  section.paragraph--type--content-card-list .concept-body .text-align-justify {
    text-align: start;
  }
}