/* Write CSS for the public-facing side of the site */

/* Global */

header:has(.hlnts-header) {
  position: relative;
  z-index: 10;

  width: 100%;
  position: fixed;
  top: 0;
  z-index: 10;

  @media screen and (min-width: 768px) {
    position: sticky;
    top: 0;
  }
}

.hlnts-header {
  background: none;
  transition: background-color 0.3s ease;

  & .hlnts-header__top {
    width: 100%;
    height: 40px;
    background-color: var(--wp--preset--color--clay-neutral-400);

    transition: all 0.3s ease;
  }

  & .hlnts-header__main {
    padding: 16px 0;
    width: 100%;

    background-color: var(--wp--preset--color--color-tertiary);

    transition: all 0.3s ease;

    & .custom-logo {
      transition: width 0.3s ease;
    }

    &.-transparent {
      background-color: transparent;
    }

    &.-minimized {
      & .custom-logo {
        width: 180px;
        height: auto;
      }
    }
  }

  & .hlnts-header__top.-is-hidden,
  & .hlnts-header__top.-is-hidden + .hlnts-header__main {
    transform: translateY(-40px);
  }

  & .hlnts-header__navigation-left {
    margin-left: -6px;
  }

  & .-is-desktop {
    display: none;

    @media screen and (min-width: 1100px) {
      display: flex;
    }
  }

  /** Mobile **/

  & .-is-mobile {
    display: flex;

    @media screen and (min-width: 1100px) {
      display: none;
    }
  }

  & .hlnts-header__mobile {
    background-color: var(--wp--preset--color--color-tertiary);
    transition: background-color 0.3s ease;

    &.-transparent {
      background-color: transparent;
    }
  }

  & .hlnts-header__mobile__overlay {
    background-color: var(--wp--preset--color--color-tertiary);
    border-radius: 0 0 32px 32px;

    max-height: calc(100vh - 75px);
    overflow-y: scroll;

    &.is-layout-flex {
      display: none;

      &.-is-open {
        display: block;
      }
    }
  }

  .hlnts-header__mobile__overlay__bottom {
    background-color: var(--wp--preset--color--clay-neutral-400);
    border-radius: 8px;

    margin-top: 24px;

    & .wp-block-button__link.wp-element-button {
      padding: 0;
    }
  }

  .wp-block-navigation-submenu {
    flex-wrap: wrap;
    background: none;
  }

  .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
    @media screen and (max-width: 767px) {
      position: relative;
      inset: 0;
      height: auto;
      min-width: 200px;
      opacity: 1;
      overflow: visible;
      visibility: visible;
      width: auto;
    }
  }

  .hlnts-header__lang {
    & .hlnts-header__lang__title {
      font-family: var(--wp--preset--font-family--instrument-sans);
      font-size: var(--wp--preset--font-size--medium);
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      overflow: hidden;
      color: var(--wp--preset--color--contrast);
      text-overflow: ellipsis;
      padding: 8px 12px;
    }

    & nav {
      margin: 0;
      padding: 0 12px;
    }

    & .lang-item {
      color: var(--wp--preset--color--contrast);
      font-family: var(--wp--preset--font-family--instrument-sans);
      font-size: var(--wp--preset--font-size--medium);
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      padding: 4px 12px;

      & a {
        text-decoration: none;
      }
    }

    & .hlnts-header__lang__items {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
  }

  .wp-block-polylang-language-switcher {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & .hlnts-mobile-navigation {
    border: none;
    background: none;

    padding: 14px 8px;
    width: 40px;
    height: 52px;
    overflow: hidden;

    pointer-events: auto;
    color: black;

    & svg {
      width: 24px;
      height: 24px;
      overflow: visible;
      pointer-events: none;
    }

    & .hlnts-mobile-navigation__content {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      width: 56px;
      height: 24px;
    }

    & .hlnts-mobile-navigation__icon__hamburger__line-1 {
      transition: transform 0.3s ease;
    }

    & .hlnts-mobile-navigation__icon__hamburger__line-2 {
      transition: transform 0.3s 0.1s ease;
    }

    & .hlnts-mobile-navigation__icon__hamburger__line-3 {
      transition: transform 0.3s 0.2s ease;
    }

    &:hover {
      cursor: pointer;

      & .hlnts-mobile-navigation__icon__hamburger__line-1,
      & .hlnts-mobile-navigation__icon__hamburger__line-2,
      & .hlnts-mobile-navigation__icon__hamburger__line-3 {
        transform: translateX(-32px);
      }
    }

    &[aria-expanded='false'] {
      & .-is-open {
        display: none;
      }
    }

    &[aria-expanded='true'] {
      & .-is-close {
        display: none;
      }
    }
  }
}

.hlnts-footer {
  & .hlnts-footer__helper {
    width: 100%;
    height: 0;

    @media screen and (min-width: 1100px) {
      height: 75vh;
      margin-top: 0;
    }
  }

  & .hlnts-footer__sticky {
    background-color: var(--wp--preset--color--color-secondary);
    color: var(--wp--preset--color--clay-neutral-100);

    position: sticky;
    position: -webkit-sticky;
    bottom: 0;

    @media screen and (max-width: 1099px) {
      padding-right: 40px !important;
      padding-left: 40px !important;
    }
  }

  & .hlnts-footer__legal {
    color: var(--wp--preset--color--color-tertiary);
    row-gap: 8px;

    @media (min-width: 768px) {
      row-gap: 24px;
    }

    & .wp-block-navigation-item__label,
    & .wp-block-button__link {
      color: var(--wp--preset--color--color-tertiary);
      text-align: center;
      font-family: var(--wp--preset--font-family--instrument-sans);
      font-size: var(--wp--preset--font-size--medium);
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }

    & .wp-block-button__link {
      padding: 0;
    }

    & .wp-block-button__icon {
      display: none;
    }

    & img {
      margin-left: 8px;
    }
  }

  & .hlnts-footer__illustration {
    position: relative;
    width: 100%;
    aspect-ratio: 1354 / 302;
    box-sizing: content-box;

    @media screen and (max-width: 1099px) {
      padding-top: 90px !important;
    }

    & .hlnts-footer__illustration__logo {
      width: 100%;
      height: auto;
      aspect-ratio: 1354 / 302;

      position: absolute;
      top: 90px;
      @media screen and (min-width: 1100px) {
        top: 180px;
      }
    }

    & .hlnts-footer__illustration__logo.-overlay {
      opacity: 0;

      animation: fadeIn ease forwards;
      animation-timeline: scroll(y root);
      animation-range: calc(100% - 50px) 100%;

      @media screen and (min-width: 1100px) {
        animation-range: calc(100% - 100vh) 100%;
      }
    }

    & .hlnts-footer__illustration__logo:not(.-overlay) {
      opacity: 1;

      animation: fadeOut ease forwards;
      animation-timeline: scroll(y root);
      animation-range: calc(100% - 50px) 100%;

      @media screen and (min-width: 1100px) {
        animation-range: calc(100% - 100vh) 100%;
      }
    }
  }

  & .-hide-mobile {
    @media screen and (max-width: 1099px) {
      display: none;
    }
  }

  & .hlnts-footer__row {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: var(--wp--preset--spacing--55);

    @media screen and (min-width: 1100px) {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  }

  & a {
    color: var(--wp--preset--color--clay-neutral-100);
    text-decoration: none;
    background-color: transparent;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    text-wrap: nowrap;

    &:hover {
      animation: link-undraw-redraw 0.6s ease;
    }

    &.wp-block-navigation-item__content {
      background-size: 0% 1px;

      transition: background-size 0.3s ease;

      &:hover {
        background-size: 100% 1px;
        animation: none;
      }
    }

    &.wp-block-button__link {
      padding: 0 !important;
      background-size: 0% 1px;

      transition: background-size 0.3s ease;

      &:hover {
        background-size: 100% 1px;
        animation: none;
      }
    }

    &:has(img) {
      background-image: none;
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/** FORM LAYOUT **/

.forminator-custom-form {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--27);
}

.forminator-row {
  margin: 0 !important;

  & > div {
    padding: 0;
  }
}

.forminator-ui.forminator-custom-form:not(
    .forminator-size--small
  )[data-grid='open']
  .forminator-col {
  padding: 0;
  margin: 0 !important;
}

/** FORM SECTION **/

.forminator-required-field-message {
  & .forminator-field {
    padding-bottom: 0;
  }

  & .forminator-title {
    margin: 0;

    color: var(--wp--preset--color--color-primary);

    font-family: var(--wp--preset--font-family--instrument-sans);
    font-size: var(--wp--preset--font-size--small);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
}

/** FORM FIELD **/

.forminator-field {
  position: relative;
  padding-bottom: 20px;

  & label {
    position: absolute;
    top: 16px;
    left: 16px;

    font-family: var(--wp--preset--font-family--instrument-sans);
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--color-primary);
    font-weight: 600;
    line-height: normal;
  }

  & .forminator-input,
  & .forminator-select--field,
  & .forminator-textarea {
    width: 100%;
    padding-top: 42px;
    padding-bottom: 16px;
    padding-right: 16px;
    padding-left: 16px;

    border: 1px solid white;
    border-radius: 8px;

    font-family: var(--wp--preset--font-family--instrument-sans);
    font-size: var(--wp--preset--font-size--medium);
    line-height: normal;

    transition: border-color 0.3s ease;

    &:hover {
      border-color: var(--wp--preset--color--neutral-900);
    }

    &:focus-visible {
      border-color: var(--wp--preset--color--color-primary);
    }

    &[aria-invalid='true'] {
      border-color: var(--wp--preset--color--feedback-error);
    }
  }

  /** FEEDBACK - ERROR **/
  &.forminator-has_error {
    padding-bottom: 0;
  }

  & .forminator-error-message {
    font-family: var(--wp--preset--font-family--instrument-sans);
    font-size: var(--wp--preset--font-size--small);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--wp--preset--color--feedback-error);

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;

    padding-top: 2px;
    height: 16px;
    margin-top: 4px;

    &::before {
      content: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%226%22%20fill%3D%22%23D32F2F%22%2F%3E%3Cpath%20d%3D%22M3.60001%203.59998L8.40001%208.39998%22%20stroke%3D%22white%22%20stroke-width%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M3.60001%208.40002L8.40001%203.60002%22%20stroke%3D%22white%22%20stroke-width%3D%221.2%22%2F%3E%3C%2Fsvg%3E");
    }
  }
}

/** FEEDBACK - ERROR **/

& .forminator-response-message.forminator-error {
  display: none;
}

/** CHECKBOX **/

.forminator-field-checkbox {
  & .forminator-label {
    display: none;
  }

  & label {
    position: relative;
    inset: 0;

    &::before {
      content: '';
      display: block;
      width: 14px;
      min-width: 14px;
      height: 14px;
      min-height: 14px;
      padding: 2px;
      border-radius: 2px;
      border: 1px solid var(--wp--preset--color--clay-neutral-600);
      margin: 2px 0;
    }

    &.forminator-is_checked {
      &:before {
        background-color: var(--wp--preset--color--clay-neutral-600);
      }
      &::after {
        content: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C%21--%20License%3A%20CC%20Attribution.%20Made%20by%20salesforce%3A%20https%3A%2F%2Flightningdesignsystem.com%2F%20--%3E%3Csvg%20fill%3D%22%23fff%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2212px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2052%2052%22%20enable-background%3D%22new%200%200%2052%2052%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%3Cpath%20d%3D%22M19.1%2C42.5L2.6%2C25.9c-0.6-0.6-0.6-1.6%2C0-2.2l2.2-2.2c0.6-0.6%2C1.6-0.6%2C2.2%2C0L19.4%2C34c0.4%2C0.4%2C1.1%2C0.4%2C1.5%2C0L45.2%2C9.5c0.6-0.6%2C1.6-0.6%2C2.2%2C0l2.2%2C2.2c0.6%2C0.6%2C0.6%2C1.6%2C0%2C2.2L21.3%2C42.5C20.7%2C43.2%2C19.7%2C43.2%2C19.1%2C42.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
        display: block;
        position: absolute;
        top: 4px;
        left: 4px;
      }
    }
  }

  & input {
    margin: 0;
    opacity: 0;
    position: absolute;
    inset: 0;

    &:hover {
      cursor: pointer;
    }
  }

  & .forminator-checkbox {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
  }

  & .forminator-checkbox-label {
    font-family: var(--wp--preset--font-family--instrument-sans);
    font-size: var(--wp--preset--font-size--medium);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: #000;
  }

  & .forminator-field {
    padding-bottom: 8px;
  }
}

/** CONSENT **/

.forminator-field-consent {
  padding-bottom: 8px;

  & .forminator-label {
    display: none;
  }

  & .forminator-field {
    padding-bottom: 0;
  }

  & .forminator-checkbox__wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;

    & label {
      position: relative;
      inset: 0;

      &::before {
        content: '';
        display: block;
        width: 14px;
        min-width: 14px;
        height: 14px;
        min-height: 14px;
        padding: 2px;
        border-radius: 2px;
        border: 1px solid var(--wp--preset--color--clay-neutral-600);
        margin: 2px 0;
      }

      &.forminator-is_checked {
        &:before {
          background-color: var(--wp--preset--color--clay-neutral-600);
        }
        &::after {
          content: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C%21--%20License%3A%20CC%20Attribution.%20Made%20by%20salesforce%3A%20https%3A%2F%2Flightningdesignsystem.com%2F%20--%3E%3Csvg%20fill%3D%22%23fff%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2212px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2052%2052%22%20enable-background%3D%22new%200%200%2052%2052%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%3Cpath%20d%3D%22M19.1%2C42.5L2.6%2C25.9c-0.6-0.6-0.6-1.6%2C0-2.2l2.2-2.2c0.6-0.6%2C1.6-0.6%2C2.2%2C0L19.4%2C34c0.4%2C0.4%2C1.1%2C0.4%2C1.5%2C0L45.2%2C9.5c0.6-0.6%2C1.6-0.6%2C2.2%2C0l2.2%2C2.2c0.6%2C0.6%2C0.6%2C1.6%2C0%2C2.2L21.3%2C42.5C20.7%2C43.2%2C19.7%2C43.2%2C19.1%2C42.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
          display: block;
          position: absolute;
          top: 4px;
          left: 4px;
        }
      }
    }

    & input {
      margin: 0;
      opacity: 0;
      position: absolute;
      inset: 0;

      &:hover {
        cursor: pointer;
      }
    }

    & .forminator-checkbox__label.forminator-consent__label p {
      margin: 0;
    }
  }
}

/** SELECT **/

.forminator-select--field {
  &:not([aria-invalid='false']) {
    color: var(--wp--preset--color--secondary);
  }

  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  appearance: none;
}

.forminator-field:has(.forminator-select--field) {
  &::after {
    content: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.2%204.40001L7.29289%2010.4929C7.68342%2010.8834%208.31658%2010.8834%208.70711%2010.4929L14.8%204.40001%22%20stroke%3D%22black%22%20stroke-width%3D%221.2%22%2F%3E%3C%2Fsvg%3E");

    position: absolute;
    right: 16px;
    bottom: 50%;
    transform: transitionY(-50%);
  }
}

/** TEXTAREA **/

.forminator-field-textarea .forminator-field {
  display: flex;
  flex-direction: column;
}

/** SUBMIT BUTTON **/

.forminator-button.forminator-button-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--wp--preset--spacing--22);
  padding: 15px var(--wp--preset--spacing--30) 17px
    var(--wp--preset--spacing--55);
  border-radius: 9999px;

  background: var(--wp--preset--color--color-tertiary);
  box-shadow:
    -1px -1px 2px 0 #fadf8e,
    2px 3px 4px 0 rgba(0, 0, 0, 0.25),
    -1px -1px 2px 0 transparent inset,
    2px 3px 4px 0 transparent inset;

  border: none;

  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--instrument-sans);
  font-size: var(--wp--preset--font-size--medium);
  font-style: normal;
  font-weight: 600;
  line-height: normal;

  transition: box-shadow 0.3s ease;

  &::after {
    content: '';
    width: 16px;
    height: 16px;
    overflow: hidden;

    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2216%22%20viewBox%3D%220%200%2032%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.05591%207.05596H12.4399L11.2719%207.87196L5.91191%202.51196H8.48791L13.9439%207.99996L8.47191%2013.488H5.91191L11.2719%208.12796L12.4399%208.94396H2.05591V7.05596Z%22%20fill%3D%22%231F1F1F%22%2F%3E%3Cpath%20d%3D%22M18.0559%207.05596H28.4399L27.2719%207.87196L21.9119%202.51196H24.4879L29.9439%207.99996L24.4719%2013.488H21.9119L27.2719%208.12796L28.4399%208.94396H18.0559V7.05596Z%22%20fill%3D%22%231F1F1F%22%2F%3E%3C%2Fsvg%3E");
    background-position: 100% 0%;

    transition: all 0.3s ease;
  }

  &:hover {
    cursor: pointer;

    box-shadow:
      -1px -1px 2px 0 transparent,
      2px 3px 4px 0 transparent,
      -1px -1px 2px 0 #fadf8e inset,
      2px 3px 4px 0 rgba(0, 0, 0, 0.25) inset;

    &::after {
      background-position: 0% 0%;
    }
  }

  &.forminator-hidden {
    display: flex !important;
    pointer-event: none;
    opacity: 0.5;
    box-shadow:
      -1px -1px 2px 0 transparent,
      2px 3px 4px 0 transparent,
      -1px -1px 2px 0 #fadf8e inset,
      2px 3px 4px 0 rgba(0, 0, 0, 0.25) inset;
  }
}

.forminator-field:has(.forminator-button.forminator-button-submit) {
  padding-bottom: 0;
  padding-top: 8px;
}

/** FORM EDITION **/

.forminator-edit-module {
  display: none;
}

.cookie-though {
  --ct-primary-400: var(--wp--preset--color--color-primary);
  --ct-primary-300: var(--wp--preset--color--color-secondary);
  --ct-primary-200: var(--wp--preset--color--clay-light-200);
  --ct-primary-100: var(--wp--preset--color--clay-neutral-100);

  --ct-text: var(--wp--preset--color--secondary);
  --ct-subtitle: var(--ct-primary-300);
  --ct-title: var(--ct-primary-400);
  --ct-cookie: var(--ct-primary-400);

  --ct-policy: var(--ct-white);
  --ct-policy-enabled: var(--ct-primary-400);
  --ct-policy-text: var(--ct-primary-400);
  --ct-policy-text-enabled: var(--ct-white);
  --ct-policy-essential: var(--ct-primary-100);

  --ct-slider-primary: var(--wp--preset--color--clay-light-300);
  --ct-slider-secondary: var(--wp--preset--color--clay-light-200);
  --ct-slider-enabled-primary: var(--ct-primary-100);
  --ct-slider-enabled-secondary: var(--wp--preset--color--clay-light-300);
  --ct-enabled-option-color: var(--ct-white);

  --ct-white: var(--wp--preset--color--base);

  --ct-button: var(--wp--preset--color--color-primary);
  --ct-button-color: var(--wp--preset--color--clay-neutral-100);
  --ct-button-secondary: var(--wp--preset--color--color-tertiary);
  --ct-button-secondary-color: var(--wp--preset--color--contrast);

  --ct-text-margin: var(--wp--preset--spacing--10);
  --ct-default-padding: var(--wp--preset--spacing--30);
  --ct-seperator-padding: var(--wp--preset--spacing--20);

  --ct-heading-font-size: var(--wp--preset--font-size--x-large);
  --ct-sub-heading-font-size: var(--wp--preset--font-size--medium);
  --ct-text-font-size: var(--wp--preset--font-size--small);
  --ct-button-font-size: var(--wp--preset--font-size--small);
  --ct-primary-font: var(--wp--preset--font-family--instrument-sans);
  --ct-primary-font-weight: 400;
  --ct-secondary-font: var(--wp--preset--font-family--instrument-sans);
  --ct-secondary-font-weight: 600;

  --ct-button-radius: 9999px;
  --ct-button-border: 0;
  --ct-button-padding: var(--wp--preset--spacing--25);
  --ct-button-secondary-border: 0;
}

/* Core blocks */

.wp-block-button {
  &:not(.is-style-link, .is-style-download) {
    .wp-block-button__link {
      box-shadow:
        -1px -1px 2px 0 #fadf8e,
        2px 3px 4px 0 rgba(0, 0, 0, 0.25),
        -1px -1px 2px 0 transparent inset,
        2px 3px 4px 0 transparent inset;

      transition: box-shadow 0.3s ease;

      &:not([disabled]):hover {
        box-shadow:
          -1px -1px 2px 0 transparent,
          2px 3px 4px 0 transparent,
          -1px -1px 2px 0 #fadf8e inset,
          2px 3px 4px 0 rgba(0, 0, 0, 0.25) inset;
      }
    }
  }

  &.is-style-link {
    & .wp-block-button__link {
      border: none;
      padding: 16px 0;
    }
  }

  &.is-style-download {
    & .wp-block-button__link.wp-element-button {
      justify-content: space-between;
      border-bottom: 0px;

      background-color: transparent;
      background-image: linear-gradient(
        var(--wp--preset--color--color-tertiary),
        var(--wp--preset--color--color-tertiary)
      );
      background-size: 100% 1px;
      background-repeat: no-repeat;
      background-position: 0 100%;

      &[href]:hover {
        animation: link-undraw-redraw 1s ease;
      }
    }

    & .wp-block-button__icon-arrow.-is-download {
      &:first-child {
        transform: translateY(0);
      }

      &:last-child {
        transform: translateY(-100%);
      }
    }

    & .wp-block-button__link:hover .wp-block-button__icon-arrow.-is-download {
      &:first-child {
        transform: translateY(100%);
      }

      &:last-child {
        transform: translateY(0);
      }
    }

    & .wp-block-button__link:not([href]) {
      cursor: default;

      & .wp-block-button__icon {
        display: none;
      }
    }
  }

  .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .wp-block-button__icon {
    position: relative;
    overflow: hidden;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .wp-block-button__icon-arrow {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;

    &:first-child {
      transform: translateX(0);
    }

    &:last-child {
      transform: translateX(-100%);
    }
  }

  .wp-block-button__link:not([disabled]):hover .wp-block-button__icon-arrow {
    &:first-child {
      transform: translateX(100%);
    }

    &:last-child {
      transform: translateX(0);
    }
  }

  /* The external-link icon points diagonally (bottom-left to top-right),
     so its hover slide should travel the same diagonal instead of the
     plain horizontal slide above - otherwise the icon visibly moves
     against its own arrowhead direction. */
  .wp-block-button__icon-arrow.-is-external {
    &:first-child {
      transform: translate(0, 0);
    }

    &:last-child {
      transform: translate(-100%, 100%);
    }
  }

  .wp-block-button__link:hover .wp-block-button__icon-arrow.-is-external {
    &:first-child {
      transform: translate(100%, -100%);
    }

    &:last-child {
      transform: translate(0, 0);
    }
  }

  &.-inline-icon {
    & .wp-block-button__text {
      display: flex;
      align-items: center;
    }

    & .wp-block-button__icon-inline {
      display: inline-block;
      overflow: hidden;
      background-repeat: no-repeat;
      background-position: 100% 0%;
      vertical-align: middle;
      margin-left: 8px;
      transition: background-position 0.3s ease;
    }

    & .wp-block-button__link:hover .wp-block-button__icon-inline {
      background-position: 0% 0%;
    }
  }

  & .wp-block-button__link[href^='#'] {
    & .wp-block-button__icon {
      transform: rotate(90deg);
    }
  }
}

@keyframes link-undraw-redraw {
  0% {
    background-size: 100% 1px;
    background-position: 100% 100%;
  }
  49% {
    background-size: 0% 1px;
    background-position: 100% 100%;
  }
  50% {
    background-size: 0% 1px;
    background-position: 0% 100%;
  }
  100% {
    background-size: 100% 1px;
    background-position: 0% 100%;
  }
}

.hlnts-header .wp-block-navigation {
  & .wp-block-navigation-item {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid transparent;

    transition: background-color 0.3s ease;

    text-wrap: nowrap;
    text-overflow: ellipsis;

    &:hover {
      @media screen and (min-width: 1100px) {
        text-decoration: none;
        background-color: var(--wp--preset--color--clay-light-200);
      }
    }

    &:focus-visible {
      border: 1px solid #000;
    }

    & .wp-block-navigation-item__content {
      text-decoration: none;
    }

    & .wp-block-navigation-item__label {
      font-family: var(--wp--preset--font-family--instrument-sans);
      font-size: var(--wp--preset--font-size--medium);
      font-weight: 600;
      line-height: normal;
    }
  }

  & .wp-block-navigation-submenu.wp-block-navigation__submenu-container {
    background: none;
    border: none;

    min-width: 100%;
    width: 100% !important;

    padding-top: 4px;

    @media screen and (min-width: 1100px) {
      border-radius: 18px;
      right: 0;
      left: auto;
      top: calc(100% + 2px);
      padding: 8px;
      padding-top: 8px;
      background-color: var(--wp--preset--color--clay-light-200);
      min-width: unset;
      width: auto !important;
    }

    & .wp-block-navigation-item.wp-block-navigation-link {
      & .wp-block-navigation-item__content {
        padding: 0;
      }

      & .wp-block-navigation-item__label {
        max-width: 320px;
        overflow: hidden;
        text-overflow: ellipsis;

        font-weight: 400;
      }

      &:hover {
        background-color: var(--wp--preset--color--color-tertiary);
      }
    }
  }

  & .open-on-click {
    &:has([aria-expanded='true']) {
      @media screen and (min-width: 1100px) {
        background-color: var(--wp--preset--color--clay-light-200);
      }

      & .wp-block-navigation__submenu-icon {
        &::after {
          content: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.19166%2011.677L11.6769%203.19167L12.8083%204.32304L4.32304%2012.8083L3.19166%2011.677Z%22%20fill%3D%22%231F1F1F%22%2F%3E%3Cpath%20d%3D%22M12.8083%2011.677L4.32304%203.19167L3.19166%204.32304L11.6769%2012.8083L12.8083%2011.677Z%22%20fill%3D%22%231F1F1F%22%2F%3E%3C%2Fsvg%3E");
        }
      }
    }
  }

  & .wp-block-navigation__submenu-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;

    & svg {
      display: none;
    }

    &::after {
      @media screen and (min-width: 1100px) {
        content: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7.99403%209.47388L13.496%203.98389V6.54389L7.99203%2012.0159L2.50403%206.55989V3.98389L7.99403%209.47388Z%22%20fill%3D%22%231F1F1F%22%2F%3E%3C%2Fsvg%3E");
        display: block;
        width: 16px;
        height: 16px;
      }
    }
  }
}

.wp-block-query-pagination {
	.wp-block-query-pagination-numbers {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--20);
	}
}

ul.wp-block-list li {
  list-style: none;
  margin-top: 0;

  &::before {
    content: '';

    display: block;
    width: 3px;
    height: 3px;

    position: relative;
    top: 12px;
    left: -16px;

    background-color: currentColor;
  }
}

ol.wp-block-list {
  padding-left: 18px;

  & li:not(:first-child) {
    margin-top: 18px;
  }
}

:root {
  --header-height: 96px;
}

.hlnts-dropdown {
  position: relative;
  display: inline-block;

  & .hlnts-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--20);
    padding: 15px 20px 17px 24px;

    background-color: var(--wp--preset--color--color-tertiary);
    color: var(--wp--preset--color--contrast);
    font-weight: 700;

    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;

    transition:
      background-color 0.2s ease,
      border-radius 0.2s ease;

    &:hover {
      background-color: color-mix(
        in srgb,
        var(--wp--preset--color--color-tertiary) 55%,
        white
      );
    }

    &:focus-visible {
      outline: none;
      border-color: var(--wp--preset--color--contrast);
    }

    &[aria-expanded='true'] {
      background-color: var(--wp--preset--color--clay-light-200);
      & .hlnts-dropdown__icon-chevron {
        opacity: 0;
      }

      & .hlnts-dropdown__icon-close {
        opacity: 1;
      }
    }
  }

  & .hlnts-dropdown__icon {
    position: relative;
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  & .hlnts-dropdown__icon-chevron,
  & .hlnts-dropdown__icon-close {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    transition: opacity 0.2s ease;
  }

  & .hlnts-dropdown__icon-close {
    opacity: 0;
  }

  & .hlnts-dropdown__panel {
    position: absolute;
    top: 100%;
    left: -30%;
    right: 0;
    z-index: 5;
    margin-top: var(--wp--preset--spacing--10);
    padding: var(--wp--preset--spacing--20);

    background-color: var(--wp--preset--color--clay-light-200);
    border-radius: var(--wp--preset--spacing--25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);

    min-width: -moz-max-content;

    min-width: max-content;

    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s ease;

    @media screen and (min-width: 768px) {
      left: 0;
    }
  }

  &.-is-open .hlnts-dropdown__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  & .hlnts-dropdown__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & .hlnts-dropdown__item {
    margin: 0;
  }

  & .hlnts-dropdown__item-link {
    display: block;
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--25);

    font-family: var(--wp--preset--font-family--instrument-sans);
    color: var(--wp--preset--color--contrast);
    font-size: 16px;
    text-decoration: none;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    border-radius: 999px;
    transition: background-color 0.2s ease;

    &:hover,
    &:focus-visible {
      background-color: var(--wp--preset--color--color-tertiary);
      cursor: pointer;
    }
  }

  & .hlnts-resource-filter__item {
    border: none;
    background-color: transparent;
    font-weight: 400;
  }

  & .hlnts-dropdown__label,
  & .hlnts-resource-filter__item {
    font-family: var(--wp--preset--font-family--instrument-sans);
    font-size: 16px;
  }

  & .hlnts-dropdown__label {
    font-weight: 600;
  }
}

.hlnts-languages-dropdown {
  & .hlnts-dropdown__trigger {
    padding: 0;
    background: none;

    &:hover,
    &:focus-visible,
    &[aria-expanded='true'] {
      background: none;
    }
  }

  & .hlnts-dropdown__panel {
    width: -moz-max-content;
    width: max-content;
    padding: var(--wp--preset--spacing--20);
  }

  & .wp-block-polylang-language-switcher {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;

    & li {
      margin: 0;
    }

    & a {
      display: block;
      padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--25);

      font-family: var(--wp--preset--font-family--instrument-sans);
      color: var(--wp--preset--color--contrast);
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      text-wrap: nowrap;

      border-radius: 999px;
      transition: background-color 0.2s ease;

      &:hover {
        background-color: var(--wp--preset--color--color-tertiary);
      }
    }
  }
}

.wp-block-social-link {
  background-color: var(--wp--preset--color--background-primary);
  color: var(--wp--preset--color--color-secondary);
  border-radius: 8px;
}

/* youtube, instagram and linkedin use a custom SVG badge with its own
   background baked in (see includes/blocks/core-social-link.php) —
   drop the default box so it isn't doubled up. */

.wp-social-link.wp-social-link-youtube,
.wp-social-link.wp-social-link-instagram,
.wp-social-link.wp-social-link-linkedin {
  background-color: transparent;
  border-radius: 0;

  & svg {
    width: 40px;
    height: 40px;
  }

  & .wp-block-social-link-anchor {
    padding: 0;
  }
}

.wp-element-caption {
  width: 100%;
  text-align: center;
  font-family: var(--wp--preset--font-family--instrument-sans);
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--secondary);
}

/* Only reverse the row order once core/columns switches to its
   side-by-side (non-stacked) layout at WP's own 782px breakpoint - below
   that, core/columns already stacks children top-to-bottom in DOM order,
   and row-reverse there would fight that native mobile behaviour. */

@media (min-width: 782px) {
  .wp-block-columns.is-style-reverse {
    flex-direction: row-reverse;
  }
}

/* Blocks */

.hlnts-video-thumbnail {
  position: relative;

  & .hlnts-video-thumbnail__poster {
    position: relative;
    width: 100%;

    & .hlnts-video-thumbnail__image {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      display: block;
    }
  }

  & .hlnts-video-thumbnail__cta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }

  & .hlnts-video-thumbnail__media {
    width: 100%;

    video,
    iframe {
      width: 100%;
      display: block;
    }
  }
}

/* Cards */

.hlnts-card-link {
  outline: 1px solid var(--wp--preset--color--color-primary);
  box-shadow: 5px 6px 10px 0 rgba(0, 0, 0, 0);
  background-color: #fff;

  border-radius: 24px;
  overflow: hidden;

  position: relative;

  transition: all 0.3s ease;

  & .hlnts-card-link__content {
    height: 100%;

    @media screen and (min-width: 768px) {
      padding: 32px 32px 16px 32px;
    }
  }

  & .wp-block-image {
    aspect-ratio: 440 / 248;
    width: 100%;
    height: auto;
    overflow: hidden;

    & img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }

    & figcaption {
      display: none;
    }
  }

  & .wp-block-heading {
    color: var(--wp--preset--color--color-primary);

    @media screen and (min-width: 768px) {
      padding-bottom: 4px;
    }

    &.-h4 {
      font-size: clamp(22px, calc(22px + (2 * (100vw - 320px) / 1024)), 24px);
    }
  }

  & p {
    font-size: var(--wp--preset--font-size--large) !important;
  }

  & .wp-block-button__link {
    &::after {
      content: '';
      display: block;

      position: absolute;
      width: 100%;
      height: 100%;
      background-color: transparent;
    }
  }

  &:has(a):hover {
    outline-color: transparent;
    box-shadow: 5px 6px 10px 0 rgba(0, 0, 0, 0.1);
  }

  & p:last-child {
    padding-bottom: 20px;

    @media (min-width: 768px) {
      padding-bottom: 24px;
    }
  }
}

.hlnts-card-text-link {
  background-color: var(--wp--preset--color--background-primary);
  border-radius: 20px;
  min-height: clamp(280px, 24vw, 360px);
  height: 100%;

  .wp-block-group.is-vertical.is-layout-flex {
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
    height: 100%;

    .wp-block-group.is-vertical.is-layout-flex {
      justify-content: flex-end;
    }
  }

  /* Description */
  p {
    font-weight: 500;
  }
}

.hlnts-card-keyfact {
  background-color: #fff;
  border-radius: 32px;

  &.is-layout-grid {
    gap: 16px;
  }

  & .hlnts-card-keyfact__content {
    padding-top: var(--wp--preset--spacing--10);
    row-gap: var(--wp--preset--spacing--20);
  }
}

.hlnts-testimony-card {
  background-color: #fff;
  border-radius: 32px;
  overflow: hidden;

  position: relative;

  flex-shrink: 0;
  scroll-snap-align: start;

  width: 316px;
  min-height: 420px;
  height: 100%;

  @media screen and (min-width: 768px) {
    width: 440px;
    min-height: 500px;
  }

  & .wp-block-quote {
    padding: 0;
    border: none;

    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  & cite {
    font-family: var(--wp--preset--font-family--instrument-sans);
    font-size: var(--wp--preset--font-size--medium);

    strong {
      color: var(--wp--preset--color--color-primary);
      font-weight: 600;
    }
  }

  & .hlnts-testimony-card__illustration {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

.hlnts-card-person {
  position: relative;
  background-color: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--color-primary);
  border-radius: 32px;
  overflow: hidden;
  height: 100%;
  transition: all 0.3s ease;

  &:has(.hlnts-team-member-profile-link):hover {
    border-color: transparent;
    box-shadow: 5px 6px 10px 0 rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }

  & .hlnts-team-member-profile-link {
    position: absolute;
    inset: 0;
    margin: 0;
  }

  & .wp-block-post-featured-image {
    margin: 0;
    width: 100%;
    aspect-ratio: 1 / 1;

    img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      display: block;
    }
  }

  & .hlnts-card-person__content {
    position: static;
    padding: 24px 24px 32px;
  }

  & .hlnts-card-person__text {
    gap: 4px;
    padding-bottom: 16px;
  }

  & .wp-block-post-title {
    font-family: var(--wp--preset--font-family--large);
    font-weight: 600;
    font-size: var(--wp--preset--font-size--x-large);
    color: var(--wp--preset--color--color-primary);
    margin: 0;
  }

  & .hlnts-card-person__job {
    font-family: var(--wp--preset--font-family--instrument-sans);
    font-weight: 600;
    font-size: var(--wp--preset--font-size--large);
    color: var(--wp--preset--color--contrast);
    margin: 0;
  }

  & .hlnts-card-person__languages {
    font-family: var(--wp--preset--font-family--instrument-sans);
    font-weight: 400;
    font-size: var(--wp--preset--font-size--medium);
    color: var(--wp--preset--color--secondary);
    margin: 0;
  }
}

.hlnts-card-resource {
  display: flex;
  flex-direction: column;
  position: relative;

  @media screen and (min-width: 768px) {
    min-height: 437px;
  }

  /* The in-section filter (resource-filter.ts) toggles the native `hidden`
     attribute to show/hide cards. Author CSS setting `display` always
     beats the UA stylesheet's `[hidden] { display: none }` at equal
     specificity, so without this the card stays visible despite being
     `hidden`. */
  &[hidden] {
    display: none;
  }

  background-color: var(--wp--preset--color--base);
  border: none;
  border-radius: 24px;
  overflow: hidden;
  height: 100%;
  transition: all 0.3s ease;

  /* WP's global `.is-layout-constrained > *` rule (theme.json layout
     support) puts a margin-block-start on every non-first direct child,
     meant for the block/flow display it assumes. Since this card is
     flexed via `display: flex` above, that margin just stacks on top of
     our own spacing (e.g. the badge-to-image gap) with no way to opt
     out from the block editor. Badge/media/content should sit flush -
     content's own padding already provides the visual breathing room. */
  & > * {
    margin-block-start: 0;
  }

  &:hover {
    border-color: transparent;
    box-shadow: 5px 6px 10px 0 rgba(0, 0, 0, 0.1);

    & .hlnts-card-resource__play {
      box-shadow:
        -1px -1px 2px 0 transparent,
        2px 3px 4px 0 transparent,
        -1px -1px 2px 0 #fadf8e inset,
        2px 3px 4px 0 rgba(0, 0, 0, 0.25) inset;
    }
  }

  & .hlnts-card-resource__badge {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 24px;

    background-color: var(--wp--preset--color--color-tertiary);
    color: var(--wp--preset--color--contrast);
    font-family: var(--wp--preset--font-family--instrument-sans);
    font-weight: 600;
    font-size: var(--wp--preset--font-size--small);
  }

  & .hlnts-card-resource__media {
    position: relative;
    width: 100%;

    img {
      aspect-ratio: 325 / 183;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      display: block;
    }
  }

  & .hlnts-card-resource__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background-color: var(--wp--preset--color--color-primary);
    color: var(--wp--preset--color--base);
    pointer-events: none;

    /* Same drop-shadow-to-inset-shadow crossfade as core/button.css's
       default (non is-style-link/download) button: an "outer" shadow
       pair that's visible by default and a matching "inset" pair that
       starts transparent, then the two swap on hover. Since both states
       declare the same number of box-shadow layers, the browser can
       interpolate each layer's color/inset individually instead of
       hard-cutting, so the whole shadow crossfades smoothly. */
    box-shadow:
      -1px -1px 2px 0 #fadf8e,
      2px 3px 4px 0 rgba(0, 0, 0, 0.25),
      -1px -1px 2px 0 transparent inset,
      2px 3px 4px 0 transparent inset;
    transition: box-shadow 0.3s ease;
  }

  &.hlnts-video-lightbox__trigger,
  & .hlnts-video-lightbox__trigger {
    cursor: pointer;
  }

  & .hlnts-card-resource__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 24px 32px 24px;
    gap: 12px;

    /* WP's global CSS sets `position: relative` on every
       .wp-block-group.wp-block-group-is-layout-constrained (this block
       included) so aligned children resolve correctly. That silently
       makes this the nearest positioned ancestor for the CTA link's
       stretched ::after below, intercepting it before it reaches
       .hlnts-card-resource. Opt back out - nothing here needs to be a
       positioning context. */
    position: static;

    /* This block is itself a non-first child of .hlnts-card-resource
       (also `is-layout-constrained`), so it inherits the exact same
       `margin-left/right: auto !important` + max-width rule described
       below - just one level up. It currently resolves near 0px because
       its content happens to be wide enough to fill the card, but that's
       incidental: a card with shorter text would silently shrink+center
       this whole block the same way it did the title. Reset it here too
       instead of relying on content length. */
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;

    /* Same `.is-layout-constrained` global rule also forces
       `margin-left/right: auto !important` + a max-width on every
       direct child, to center them in normal block/flow layout. In this
       flex column, an auto cross-axis margin makes the flex item shrink
       to its content width instead of stretching (see CSS Flexbox
       spec, "auto margins" - alignment via align-items is skipped when
       an auto margin exists), so a short title shrinks and centers
       itself instead of spanning the card. Needs !important to win. */
    & > * {
      margin-left: 0 !important;
      margin-right: 0 !important;
      max-width: none !important;
    }

    @media screen and (min-width: 768px) {
      gap: 16px;
    }
  }

  &:not(:has(.hlnts-card-resource__media)) .hlnts-card-resource__content {
    padding-top: 24px;
  }

  & .wp-block-post-title {
    font-family: var(--wp--preset--font-family--large);
    font-weight: 400;
    font-size: var(--wp--preset--font-size--x-large);
    color: var(--wp--preset--color--color-primary);
    margin: 0;
  }

  & .hlnts-card-resource__description {
    font-family: var(--wp--preset--font-family--instrument-sans);
    font-weight: 400;
    font-size: var(--wp--preset--font-size--medium);
    color: var(--wp--preset--color--contrast);
    margin: 0;
    flex: 1;
  }

  & .hlnts-card-resource__cta {
    margin-top: 8px;

    /* This CTA is hand-rendered PHP (resource-cta/render.php), not a real
       core/button block, so it never goes through the Style Engine that
       normally strips is-style-link's background/radius per block
       instance (see Core_Button + theme.json styles.blocks.core/button.
       variations.link) - same trap section-people.css's toggle button
       hit. Replicate the look by hand instead of relying on the
       is-style-link class alone - note the Figma "Carte Ressource"
       component itself has no underline/border, unlike the generic
       "link" button variation in theme.json, so that border-bottom is
       deliberately NOT replicated here. */
    & .wp-block-button__link {
      background-color: transparent;
      color: var(--wp--preset--color--contrast);
      border: none;
      border-radius: 0;
      padding: 0;
      font-family: var(--wp--preset--font-family--instrument-sans);
      font-weight: 600;

      /* Make the whole card clickable without wrapping everything in a
         single <a> (which would be invalid HTML - the card contains its
         own external links via the badge/media/etc. context in other
         patterns) and without a JS click-delegation hack. The
         stretched-link pattern: an empty ::after, absolutely positioned,
         escapes this link's own box and fills the nearest positioned
         ancestor - .hlnts-card-resource (position: relative above) -
         so a click anywhere on the card activates this link/button. */
      &::after {
        content: '';
        position: absolute;
        inset: 0;

        /* Flex items paint "as if position: relative" among themselves
           in DOM order, regardless of an absolutely positioned
           descendant's actual containing block - without this, the
           badge (an earlier flex item) still wins the hit-test over
           this later, deeper ::after. Force it above every sibling. */
        z-index: 1;
      }
    }
  }
}

.hlnts-card-process {
  background-color: #fff;
  border-radius: 32px;

  &.is-layout-grid {
    gap: 16px;
    grid-template-rows: max-content;
  }

  & .hlnts-card-keyfact__content {
    padding-top: var(--wp--preset--spacing--10);
    row-gap: var(--wp--preset--spacing--20);
  }
}

.hlnts-section-process.is-style-default .hlnts-card-process {
  border: 1px solid var(--wp--preset--color--color-primary);
}

/* Hero */

.hlnts-header-text-media {
  background-color: var(--wp--preset--color--color-tertiary);
  overflow: hidden;

  padding: 180px 24px 0;

  @media screen and (min-width: 768px) and (max-width: 1099px) {
    padding: 180px 80px 0;
  }

  @media screen and (min-width: 1100px) and (max-width: 1239px) {
    padding: 280px 80px 0;
  }

  @media (min-width: 1240px) {
    padding: 260px 40px 240px 115px;
  }

  @media (min-width: 1700px) {
    aspect-ratio: 16 / 7;
  }

  margin-block-start: -101px !important;

  position: relative;

  & .hlnts-header-text-media__lines-top {
    pointer-events: none;
    position: absolute;
    inset: 0;
    top: -140px;
    width: 100vw;
    height: auto;
    display: block;

    & img {
      width: 100%;
      height: auto;
    }

    &.-is-desktop {
      display: none;

      @media screen and (min-width: 1240px) {
        display: block;
        aspect-ratio: 1440 / 995;
        min-width: 100vw;
      }

      @media screen and (min-width: 1600px) {
        top: -500px;
      }
    }

    &.-is-tablet {
      display: none;

      @media screen and (min-width: 600px) and (max-width: 1239px) {
        display: block;
        aspect-ratio: 1000/983;
        min-width: 1080px;
      }
    }

    &.-is-mobile {
      display: block;
      aspect-ratio: 556 / 715;
      min-width: 546px;
      top: 0;

      @media screen and (min-width: 600px) {
        display: none;
      }
    }
  }

  & .hlnts-header-text-media__lines-bottom {
    pointer-events: none;
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: auto;
    display: block;
    margin: 0;

    & img {
      width: 100%;
      height: auto;
    }

    &.-is-desktop {
      display: none;

      @media screen and (min-width: 1240px) {
        display: block;
        aspect-ratio: 1440 / 995;
        min-width: 100vw;
      }

      @media screen and (min-width: 1600px) {
        bottom: -68px;
      }
    }

    &.-is-tablet {
      display: none;

      @media screen and (min-width: 600px) and (max-width: 1239px) {
        display: block;
        aspect-ratio: 1000/983;
        min-width: 1080px;
        bottom: -100px;
      }
    }

    &.-is-mobile {
      display: block;
      aspect-ratio: 546 / 801;
      min-width: 546px;

      @media screen and (min-width: 600px) {
        display: none;
      }
    }
  }

  & .hlnts-header-text-media__waves {
    pointer-events: none;
    margin: 0;

    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;

    width: 100%;

    min-width: 556px;

    @media screen and (min-width: 600px) {
      min-width: 1078px;
    }
  }

  & .hlnts-header-text-media__illustration {
    max-width: 360px;

    margin: auto;
    position: relative;
    z-index: 1;

    @media screen and (min-width: 768px) and (max-width: 1239px) {
      max-width: 50%;
      max-height: unset;

      margin: auto;
    }

    @media (min-width: 1240px) {
      position: absolute;
      z-index: 1;
      width: calc(5 * (100vw - 80px) / 12);
      bottom: 0;

      max-width: unset;
      max-height: calc(100% - 120px);
      margin: unset;
    }

    @media (min-width: 1600px) {
      & img {
        width: 70%;
      }
    }
  }

  & .is-style-text-subtitle {
    color: var(--wp--preset--color--color-secondary);
  }

  & .hlnts-header-text-media__main {
    position: relative;
    z-index: 1;
    min-height: 400px;
    display: flex;

    & > div {
      @media screen and (min-width: 2000px) {
        gap: 40px;
      }
    }

    & .is-style-text-subtitle {
      @media screen and (min-width: 2000px) {
        font-size: calc(
          14px + (22px - 14px) * ((100vw - 2000px) / (2560px - 2000px))
        );
      }
    }

    & h1 {
      margin-top: 8px;

      @media screen and (min-width: 2000px) {
        font-size: calc(
          40px + (64px - 40px) * ((100vw - 2000px) / (2560px - 2000px))
        );
        line-height: 1.4;
      }
    }

    & .hlnts-header-text-media__introduction {
      @media screen and (min-width: 768px) and (max-width: 1239px) {
        padding-right: 100px;
        box-sizing: border-box;
      }

      @media screen and (min-width: 2000px) {
        font-size: calc(
          18px + (24px - 18px) * ((100vw - 2000px) / (2560px - 2000px))
        );
        margin-top: 32px;
      }
    }
  }

  &.-hide-html {
    & .block-library-html__edit {
      display: none;
    }
  }

  & .wp-block-columns {
    margin: 0;

    @media screen and (min-width: 2000px) {
      max-width: 2000px;
      margin: auto;
    }

    @media screen and (max-width: 1239px) {
      flex-direction: column;
    }

    & .wp-block-column:first-child:last-child {
      padding-bottom: 240px;

      @media screen and (min-width: 1240px) {
        padding-bottom: 0;
      }
    }
  }

  /** EDITOR **/
  & .block-editor-block-list__block {
    pointer-events: auto;

    & img {
      pointer-events: auto !important;
    }
  }
}

/* Sections */

.hlnts-section-cards {
  & > div.is-layout-grid {
    -moz-column-gap: var(--wp--preset--spacing--30);
         column-gap: var(--wp--preset--spacing--30);
  }

  & .hlnts-section-cards__grid {
    &.is-layout-grid {
      row-gap: var(--wp--preset--spacing--60);
    }
  }

  & .hlnts-section-cards__intro {
    max-width: 670px;
    margin: auto;
  }

  & .wp-block-spacer {
    display: none;

    @media screen and (min-width: 769px) {
      display: block;
    }

    &:nth-child(4) {
      @media screen and (min-width: 768px) and (max-width: 1024px) {
        grid-column-start: 1;
        grid-column-end: 2;
      }
    }
  }

  & > .wp-block-group.is-layout-grid {
    @media screen and (max-width: 768px) {
      -moz-column-gap: 20px;
           column-gap: 20px;
    }

    & > * {
      @media screen and (max-width: 768px) {
        grid-column: 1 / -1;
      }
    }
  }

  & .hlnts-section-cards__list {
    @media screen and (min-width: 768px) and (max-width: 1024px) {
      grid-column: span 10;
      grid-column-end: 12;
    }

    & .hlnts-section-cards__row {
      width: 100%;

      &.is-layout-flex {
        @media screen and (max-width: 767px) {
          flex-direction: column;
        }
      }

      & .hlnts-card-link:last-child:not(:first-child) {
        @media screen and (min-width: 768px) {
          transform: translateY(60px);
        }
      }

      & .hlnts-card-link {
        width: 100%;

        @media screen and (min-width: 768px) {
          width: calc(50% - 10px);
        }
      }
    }
  }
}

.hlnts-section-cta {
  & .hlnts-section-cta__content {
    position: relative;
    overflow: hidden;

    min-height: 420px;

    background-color: var(--wp--preset--color--color-tertiary);

    border-radius: 12px;

    grid-column-start: 1;
    grid-column-end: -1;
    align-items: center;

    @media screen and (min-width: 768px) {
      min-height: 360px;

      border-radius: 16px;

      grid-column-start: 2;
      grid-column-end: 12;
    }

    @media screen and (max-width: 767px) {
      padding-left: var(--wp--preset--spacing--70);
      padding-right: var(--wp--preset--spacing--70);
    }

    & .hlnts-section-cta__text {
      position: relative;
      z-index: 1;

      grid-auto-rows: max-content;
      align-items: center;

      grid-column-start: 1;
      grid-column-end: -1;

      @media screen and (min-width: 768px) {
        grid-column-start: 2;
        grid-column-end: 10;
      }

      & p {
        grid-column-start: 1;
        grid-column-end: -1;

        @media screen and (min-width: 768px) {
          grid-column-start: 2;
          grid-column-end: 8;
        }
      }
    }

    & .hlnts-section-cta__illustration {
      width: 100%;
      min-width: 1130px;
      height: auto;
      aspect-ratio: 1130 / 360;

      position: absolute;
      bottom: 0;
      z-index: 0;
    }
  }

  /** EDITOR **/

  &.-hide-html {
    & .block-library-html__edit {
      display: none;
    }
  }
}

.hlnts-section-faq {
  .hlnts-section-faq__inner {
    max-width: var(--wp--custom--layout--narrow);
  }

  .hlnts-section-faq_list {
    width: 100%;

    > .wp-block-details {
      width: 100%;
      padding-block: var(--wp--preset--spacing--20);
      border-top: 1px solid var(--wp--preset--color--color-tertiary);

      &:last-child {
        border-bottom: 1px solid var(--wp--preset--color--color-tertiary);
      }

      summary {
        font-weight: 600;

        &::marker,
        &::-webkit-details-marker {
          color: var(--wp--preset--color--color-primary);
        }
      }

      > *:not(summary) {
        margin-inline: var(--wp--preset--spacing--30);
      }
    }
  }
}

.hlnts-section-people {
  .wp-block-post-template.is-layout-grid {
    grid-template-columns: 1fr;
    justify-content: center;

    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
    }
    @media (min-width: 1024px) {
      grid-template-columns: repeat(3, 1fr);
    }
    @media (min-width: 1240px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* Mobile only: cap the initial reveal at 4 members and hide the rest until
     the toggle button expands the section - purely visual, every member is
     already rendered server-side so this is a frontend-only reveal.
     Keep in sync with $visible_threshold in section-people-toggle/render.php. */
  @media (max-width: 767px) {
    .wp-block-post-template.is-layout-grid > :nth-child(n + 5) {
      display: none;
    }

    &.-is-expanded .wp-block-post-template.is-layout-grid > :nth-child(n + 5) {
      display: block;
    }
  }

  /* The toggle block itself only renders server-side when there's actually
     something to reveal (see section-people-toggle/render.php), so here we
     only need the mobile-only visibility and the gap above it. */
  .hlnts-section-people__toggle-wrapper {
    display: none;
    justify-content: center;
    margin-top: var(--wp--preset--spacing--70);

    @media (max-width: 767px) {
      display: flex;
    }
  }

  &.-is-expanded .hlnts-section-people__toggle-wrapper {
    display: none;
  }

  /* The toggle is server-rendered as raw markup (see
     section-people-toggle/render.php), not through core/button's normal
     block-rendering pipeline, so it never picks up the numbered
     `.is-style-link--N` class WP's style engine generates per block
     instance for the "link" variation. Match its values directly instead
     of depending on that. */
  .hlnts-section-people__toggle .wp-block-button__link {
    background-color: transparent;
    color: var(--wp--preset--color--contrast);
    border: none;
    border-radius: 0;
    padding: 0 0 4px;
  }
}

.hlnts-section-resources {
  & .hlnts-section-resources__heading {
    max-width: 800px;
  }

  & .hlnts-section-resources__intro {
    max-width: 670px;
  }

  .wp-block-post-template.is-layout-grid {
    grid-template-columns: 1fr;
    justify-content: center;

    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
    }
    @media (min-width: 1024px) {
      grid-template-columns: repeat(3, 1fr);
    }
    @media (min-width: 1240px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .hlnts-resource-filter {
    display: flex;
    justify-content: center;
    margin-bottom: var(--wp--preset--spacing--50);
    width: -moz-max-content;
    width: max-content;
  }

  & li:has([hidden]) {
    display: none;
  }
}

.hlnts-section-text {
  & .hlnts-section-text__content {
    @media screen and (min-width: 768px) {
      padding-top: var(--wp--preset--spacing--30);
    }
  }

  & .wp-block-spacer {
    display: none;

    @media screen and (min-width: 769px) {
      display: block;
    }
  }

  & > .wp-block-group.is-layout-grid > * {
    @media screen and (max-width: 768px) {
      grid-column: 1 / -1;
    }
  }
}

.hlnts-section-text-image {
  & .wp-block-media-text {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--70);

    @media screen and (min-width: 768px) {
      display: grid;
      grid-template-columns: repeat(12, 1fr) !important;
      gap: 20px;
    }

    & .wp-block-media-text__media {
      aspect-ratio: 1 / 1;
      width: 100%;
      height: auto;

      grid-column-start: 1;
      grid-column-end: -1;

      border-radius: 24px;
      overflow: hidden;

      @media screen and (min-width: 768px) {
        border-radius: 32px;
      }

      &:last-child {
        @media screen and (min-width: 768px) {
          grid-column-start: 8;
          grid-column-end: 12;
        }
      }

      &:first-child {
        @media screen and (min-width: 768px) {
          grid-column-start: 2;
          grid-column-end: 6;
        }
      }

      & img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }
    }

    & .wp-block-media-text__content {
      padding: 0;

      grid-column-start: 1;
      grid-column-end: -1;

      &:first-child {
        @media screen and (min-width: 768px) {
          grid-column-start: 2;
          grid-column-end: 7;
        }
      }

      &:last-child {
        @media screen and (min-width: 768px) {
          grid-column-start: 7;
          grid-column-end: 12;
        }
      }
    }
  }
}

.hlnts-section-keyfacts {
  & .wp-block-group {
    position: relative;
  }

  & .wp-block-heading {
    margin-top: 8px;
  }

  & .hlnts-section-keyfacts__head {
    position: sticky;
    top: 132px;
    padding-bottom: 4px;

    @media screen and (min-width: 768px) {
      padding-bottom: 0;
    }

    & .wp-block-paragraph {
      margin-top: 16px;

      @media (min-width: 768px) {
        margin-top: 20px;
      }
    }
  }

  & .hlnts-section-keyfacts__content {
    @media screen and (max-width: 1024px) {
      grid-column: 1 / -1;
    }

    &.-is-cards {
      & > div {
        @media screen and (min-width: 769px) and (max-width: 1024px) {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 20px;

          & .hlnts-card-keyfact {
            margin: 0;
          }
        }
      }
    }
  }

  & .wp-block-spacer.-is-desktop {
    display: none;

    @media screen and (min-width: 1025px) {
      display: block;
    }
  }
}

.hlnts-section-focus {
  background-color: var(--wp--preset--color--color-primary);
  color: var(--wp--preset--color--clay-neutral-100);

  & h2 {
    @media screen and (min-width: 2000px) {
      font-size: calc(
        40px + (64px - 40px) * ((100vw - 2000px) / (2560px - 2000px))
      );
      line-height: 1.4;
    }
  }

  & p:not(.is-style-text-subtitle) {
    @media screen and (min-width: 2000px) {
      font-size: calc(
        18px + (24px - 18px) * ((100vw - 2000px) / (2560px - 2000px))
      );
    }
  }

  & .is-style-text-subtitle {
    color: var(--wp--preset--color--clay-neutral-100);

    @media screen and (min-width: 2000px) {
      font-size: calc(
        14px + (22px - 14px) * ((100vw - 2000px) / (2560px - 2000px))
      );
    }
  }

  & .hlnts-section-focus__content {
    padding: 0 20px;

    @media screen and (min-width: 768px) {
      padding: 0 88px;
    }
  }

  & .hlnts-section-focus__image {
    width: 100%;
    height: 100%;

    & img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }

    @media screen and (min-width: 1440px) {
      aspect-ratio: 720 / 800;
      overflow: hidden;
    }

    @media screen and (min-width: 2000px) {
      aspect-ratio: unset;
      width: 100%;
      max-height: calc(100vh - 120px);
    }
  }
}

.hlnts-section-testimony {
  position: relative;
  overflow: hidden;

  background-color: var(--wp--preset--color--color-tertiary);

  & .hlnts-section-testimony__heading > p {
    color: var(--wp--preset--color--color-secondary);
  }

  & .hlnts-section-testimony__grid {
    position: relative;
    z-index: 1;

    row-gap: 0;
  }

  & .hlnts-section-testimony__content {
    grid-column-start: 1;
    grid-column-end: 13;
  }

  & .hlnts-section-testimony__list {
    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    cursor: grab;

    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    padding-left: var(--wp--preset--spacing--50);
    padding-right: var(--wp--preset--spacing--50);
    scroll-padding-left: var(--wp--preset--spacing--50);
    scroll-padding-right: var(--wp--preset--spacing--50);

    @media screen and (min-width: 768px) {
      --hlnts-testimony-inset: calc(
        var(--wp--preset--spacing--50) +
          (
            100vw - 2 * var(--wp--preset--spacing--50) - 11 *
              var(--wp--preset--spacing--30)
          ) / 12 + var(--wp--preset--spacing--30)
      );

      padding-left: var(--hlnts-testimony-inset);
      padding-right: var(--hlnts-testimony-inset);
      scroll-padding-left: var(--hlnts-testimony-inset);
      scroll-padding-right: var(--hlnts-testimony-inset);
    }

    &.-is-dragging {
      cursor: grabbing;
      scroll-snap-type: none;
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
    }
  }

  & .hlnts-section-testimony__button {
    & .wp-block-button__link {
      padding: 8px !important;

      &:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }
    }

    & .wp-block-button__text {
      display: none;
    }

    & .wp-block-button__icon {
      width: 24px;
      height: 24px;
      min-width: 24px;
      min-height: 24px;
      display: flex;

      & .wp-block-button__icon-arrow {
        padding: 8px;
        top: -4px;
        left: -4px;
      }

      & .wp-block-button__icon-arrow:last-child {
        top: -2px;
        left: -2px;
      }
    }

    &.-is-previous {
      & .wp-block-button__icon {
        transform: rotate(180deg);

        & .wp-block-button__icon-arrow:last-child {
          top: -6px;
          left: -6px;
        }
      }
    }
  }

  & .hlnts-section-testimony__illustration {
    position: absolute;
    left: -100%;
    bottom: 0;
    width: 100%;
    height: auto;
    min-width: 1440px;
    max-width: unset;
    z-index: 0;

    @media screen and (min-width: 768px) {
      left: 0;
    }
  }

  /** EDITOR **/

  &.-hide-html {
    & .block-library-html__edit {
      display: none;
    }
  }
}

.hlnts-section-table {
  overflow: hidden;

  & .hlnts-section-table__grid {
    row-gap: var(--wp--preset--spacing--70);
    & .hlnts-section-table__heading {
      grid-column: 1 / -1;

      @media screen and (min-width: 768px) {
        grid-column: 3 / 11;
      }
    }
  }

  & .hlnts-section-table__table-container {
    overflow-x: scroll;

    /* Hide the scrollbar */
    &::-webkit-scrollbar {
      display: none;
    }

    & {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &.-is-scrollable {
      cursor: grab;

      &.-is-dragging {
        cursor: grabbing;
      }
    }
  }

  & .hlnts-section-table__table {
    border: none;

    width: -moz-max-content;

    width: max-content;

    grid-column: 1 / -1;

    padding-left: var(--wp--preset--spacing--50);
    padding-right: var(--wp--preset--spacing--50);
    scroll-padding-left: var(--wp--preset--spacing--50);
    scroll-padding-right: var(--wp--preset--spacing--50);

    @media screen and (min-width: 768px) {
      --hlnts-testimony-inset: calc(
        var(--wp--preset--spacing--50) +
          (
            100vw - 2 * var(--wp--preset--spacing--50) - 11 *
              var(--wp--preset--spacing--30)
          ) / 12 + var(--wp--preset--spacing--30)
      );

      width: calc(100% - 2 * var(--hlnts-testimony-inset));
      min-width: -moz-max-content;
      min-width: max-content;

      padding-left: var(--hlnts-testimony-inset);
      padding-right: var(--hlnts-testimony-inset);
      scroll-padding-left: var(--hlnts-testimony-inset);
      scroll-padding-right: var(--hlnts-testimony-inset);
    }

    /** Table styles **/
    &.wp-block-table.is-style-stripes tbody {
      & tr:nth-child(odd) {
        background-color: var(--wp--preset--color--clay-neutral-100);
      }

      & tr:nth-child(even) {
        background-color: #fff;
      }
    }

    table {
      outline: 1px solid var(--wp--preset--color--color-tertiary);
      outline-offset: -1px;
    }

    td,
    th {
      font-family: var(--wp--preset--font-family--instrument-sans);
      font-weight: 400;
      padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--55);
    }

    thead {
      border: none;
      background-color: var(--wp--preset--color--color-tertiary);

      th {
        font-size: var(--wp--preset--font-size--large);
        font-weight: 600;
      }
    }

    tbody {
      tr {
        background-color: #fff;
      }
    }

    /*
      Opaque band pinned to the top of the viewport by table-sticky-scroll.ts
      once the table is taller than the viewport, hiding table rows that
      scroll up behind it. Contains a fixed-position clone of the thead,
      inset to match the real table's own horizontal padding. Both are
      siblings of the real table (inside .hlnts-section-table__table), so
      the clone inherits the outline/thead styles above.
    */
    .hlnts-section-table__sticky-mask {
      position: fixed;
      top: 0;
      z-index: 10;
      overflow: hidden;
      pointer-events: none;
      padding-top: var(--wp--preset--spacing--40);
      background-color: var(--wp--preset--color--base);
    }

    .hlnts-section-table__sticky-clone {
      background-color: var(--wp--preset--color--color-tertiary);
    }
  }
}

.hlnts-section-anchor {
  & .hlnts-section-anchor__content {
    grid-column-start: 1;
    grid-column-end: -1;

    @media screen and (min-width: 768px) {
      grid-column-start: 3;
      grid-column-end: 11;
    }
  }
}

.hlnts-section-form {
  & .hlnts-section-form__sticky-container {
    position: relative;

    & .hlnts-section-form__sticky-content {
      position: sticky;
      top: 152px;
    }

    & p a {
      text-decoration: none;
      background-color: transparent;
      background-image: linear-gradient(currentColor, currentColor);
      background-size: 100% 1px;
      background-repeat: no-repeat;
      background-position: 0 100%;
      text-wrap: nowrap;

      &:hover {
        animation: link-undraw-redraw 0.6s ease;
      }
    }
  }

  & .wp-block-spacer {
    display: none;

    @media screen and (min-width: 769px) {
      display: block;
    }
  }

  & .hlnts-section-form__sticky-container {
    @media screen and (max-width: 768px) {
      grid-column: 1 / -1;
    }
  }

  & .hlnts-section-form__forminator {
    @media screen and (max-width: 768px) {
      grid-column: 1 / -1;
    }
  }

  & .hlnts-section-form__grid {
    @media screen and (max-width: 768px) {
      row-gap: 24px;
    }
  }
}

@keyframes link-undraw-redraw {
  0% {
    background-size: 100% 1px;
    background-position: 100% 100%;
  }
  49% {
    background-size: 0% 1px;
    background-position: 100% 100%;
  }
  50% {
    background-size: 0% 1px;
    background-position: 0% 100%;
  }
  100% {
    background-size: 100% 1px;
    background-position: 0% 100%;
  }
}

.hlnts-section-video {
  & .wp-block-spacer {
    display: none;

    @media screen and (min-width: 768px) {
      display: block;
    }
  }

  & .hlnts-section-video__heading {
    @media screen and (max-width: 767px) {
      grid-column: 1 / span 12 !important;
    }
  }
}

.hlnts-section-text-video {
  & .wp-block-columns {
    align-items: center;
    gap: var(--wp--preset--spacing--70);

    @media screen and (min-width: 782px) {
      gap: 20px;

      &:not(.is-style-reverse) {
        & .wp-block-column {
          box-sizing: border-box;

          padding-left: calc(
            (100vw - 2 * var(--wp--preset--spacing--50) - 11 * 20px) / 12 + 20px
          );
        }

        & .wp-block-column:has(.hlnts-video-thumbnail) {
          padding-right: calc(
            (100vw - 2 * var(--wp--preset--spacing--50) - 11 * 20px) / 12 + 20px
          );
        }
      }

      &.is-style-reverse {
        & .wp-block-column {
          box-sizing: border-box;

          padding-right: calc(
            (100vw - 2 * var(--wp--preset--spacing--50) - 11 * 20px) / 12 + 20px
          );

          &:has(.hlnts-video-thumbnail) {
            padding-left: calc(
              (100vw - 2 * var(--wp--preset--spacing--50) - 11 * 20px) / 12 +
                20px
            );
          }
        }
      }
    }
  }

  & .hlnts-video-thumbnail {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;

    & .hlnts-video-thumbnail__image {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }

    & .hlnts-video-thumbnail__poster {
      aspect-ratio: 1 / 1;
      width: 100%;
      height: auto;
      border-radius: 24px;
      overflow: hidden;

      @media screen and (min-width: 768px) {
        border-radius: 32px;
      }
    }
  }
}

.hlnts-section-process {
  & .hlnts-section-process__content {
    row-gap: var(--wp--preset--spacing--70);
  }

  & .wp-block-spacer {
    @media screen and (max-width: 768px) {
      display: none;
    }
  }

  & .hlnts-section-keyfacts__content {
    @media screen and (max-width: 76/px) {
      grid-column: span 12;
    }
  }

  & .hlnts-card-process {
    @media screen and (min-width: 768px) and (max-width: 1440px) {
      grid-column: span 6;
    }

    @media screen and (max-width: 768px) {
      grid-column: span 12;
    }
  }

  & .hlnts-section-process__content {
    @media screen and (max-width: 768px) {
      grid-column: span 12;
    }
  }

  & .hlnts-section-process__list {
    @media screen and (max-width: 768px) {
      grid-column: span 12;
    }

    @media screen and (min-width: 768px) and (max-width: 1440px) {
      /** Ensure row are equal height */
      grid-template-rows: repeat(2, 1fr);
    }
  }
}

/* Molecules */

.hlnts-text-highlight {
  border: 1px solid var(--wp--preset--color--color-primary);
  padding: 18px 14px 26px;
  border-radius: 24px;
  margin: 24px 0;

  & ul.wp-block-list {
    padding-left: 24px;
    & li {
      &::before {
        background-color: var(--wp--preset--color--color-primary);
      }

      &:not(:first-child) {
        margin-top: 18px;
      }
    }
  }
}

/* Lightbox */

.hlnts-video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;

  &[hidden] {
    display: none;
  }

  & .hlnts-video-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
  }

  & .hlnts-video-lightbox__dialog {
    position: relative;
    z-index: 1;
    width: min(90vw, 1024px);
    max-height: 90vh;
  }

  & .hlnts-video-lightbox__video {
    display: block;
    width: 100%;
    max-height: 90vh;
    border-radius: 8px;
    background-color: #000;

    &[hidden] {
      display: none;
    }
  }

  & .hlnts-video-lightbox__content {
    width: 100%;
    max-height: 90vh;

    &[hidden] {
      display: none;
    }

    & > * {
      margin: 0;
    }

    & video,
    & iframe {
      display: block;
      width: 100%;
      max-height: 90vh;
      border-radius: 8px;
      background-color: #000;
      border: none;
    }

    & iframe {
      aspect-ratio: 16 / 9;
    }
  }

  & .hlnts-video-lightbox__close {
    position: absolute;
    top: -48px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;

    background-color: transparent;
    color: var(--wp--preset--color--base);
    border: none;
    cursor: pointer;

    &:focus-visible {
      outline: 2px solid var(--wp--preset--color--base);
      outline-offset: 2px;
    }
  }
}

.hlnts-global-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 21px;

  &[hidden] {
    display: none;
  }

  & .hlnts-global-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
  }

  & .hlnts-global-modal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(90vw, 520px);
    max-height: 90vh;
    padding: 32px;
    background-color: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--color-primary);
    border-radius: 24px;
    box-shadow: 5px 6px 10px rgba(0, 0, 0, 0.1);
  }

  & .hlnts-global-modal__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    overflow-y: auto;

    & > * {
      margin: 0;
    }

    & p {
      font-size: 16px;
      line-height: normal;
    }

    & .hlnts-global-modal__title {
      font-family: var(--wp--preset--font-family--large);
      font-size: clamp(22px, calc(22px + (2 * (100vw - 425px) / 1024)), 24px);
      color: var(--wp--preset--color--color-primary);
    }
  }

  & .hlnts-global-modal__highlight {
    font-weight: 600;
  }

  & .hlnts-global-modal__close {
    position: absolute;
    top: -21px;
    right: -21px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;

    background-color: var(--wp--preset--color--color-primary);
    color: var(--wp--preset--color--base);
    border: none;
    border-radius: 50%;
    cursor: pointer;

    &:focus-visible {
      outline: none;
    }
  }
}

/* Templates */

.hlnts-archive:not(.-post) {
  margin-top: 0;
  margin-block-start: 0 !important;

  .wp-block-query {
  ul {
    display: grid;
    gap: var(--wp--preset--spacing--30);
  }
  }
}

@media (min-width: 600px) {

  .hlnts-archive:not(.-post) {

  .wp-block-query {
  ul {
      grid-template-columns: repeat(2, 1fr);
  }
  }
}
    }

@media (min-width: 1024px) {

  .hlnts-archive:not(.-post) {

  .wp-block-query {
  ul {
      grid-template-columns: repeat(3, 1fr);
  }
  }
}
    }

.hlnts-archive:not(.-post) {

  .wp-block-query {
  ul {

    li {
      margin: 0;
      padding: 0;

      > * {
        height: 100%;
      }
    }
  }
  }
}

.hlnts-single-content {
  > .is-layout-constrained {
  > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: clamp(280px, 68vw, 700px);
  }

  > .alignwide,
  > .alignfull {
    max-width: clamp(300px, 92vw, 920px) !important;
  }
  > .alignfull {
    margin-inline: auto;
  }
  }

  .wp-block-post-content {
    > .wp-block-image,
    > .wp-block-embed,
    > .wp-block-audio {
      margin-block: 2.5rem;
    }
  }
}

.error404 {
	main > .wp-block-group {
		min-height: 80dvh;
		display: flex;
		align-items: center;
	}
}

/* Pages */

html {
  overflow-x: hidden;
}

/* Global styles */

.wp-site-blocks .hlnts-page__main,
.wp-singular.page .wp-block-post-content.is-layout-constrained > *,
footer.wp-block-template-part {
  margin-block-start: 0;
}

section.is-style-default + section.is-style-default,
section.is-style-accent + section.is-style-accent {
  padding-top: 40px !important;
}

/* Focus styles */

:where(.wp-site-blocks *:focus) {
  outline: none !important;
}

strong {
  font-weight: 600;
}

a,
button {
  color: black;
}