:root {
  --rhythm-xs: 4px;
  --rhythm-sm: 8px;
  --rhythm-md: 12px;
  --rhythm-lg: 20px;
  --rhythm-xl: 24px;
  --rhythm-2xl: 28px;
  --rhythm-3xl: 34px;
  --rhythm-4xl: 48px;
  --rhythm-5xl: 64px;

  --text-paragraph-gap: var(--rhythm-md);
  --text-heading-gap: var(--rhythm-lg);
  --text-list-gap: 10px;
  --text-list-item-gap: var(--rhythm-sm);
  --text-block-gap: var(--rhythm-3xl);

  --article-label-to-title: var(--rhythm-2xl);
  --article-title-to-lead: var(--rhythm-xl);
  --article-lead-to-support: var(--rhythm-2xl);
  --article-support-to-content: var(--rhythm-4xl);
  --article-heading-to-body: var(--rhythm-lg);
  --article-block-gap: var(--rhythm-3xl);

  --section-title-to-lead: var(--rhythm-xl);
  --section-head-to-content: var(--rhythm-4xl);

  --card-title-to-body: var(--rhythm-lg);
  --card-body-gap: var(--rhythm-md);

  --faq-answer-gap: var(--rhythm-md);
  --faq-list-gap: var(--text-list-gap);
  --faq-list-item-gap: var(--rhythm-sm);

  --cta-title-to-support: var(--rhythm-lg);
  --cta-support-to-action: var(--rhythm-4xl);
  --cta-action-gap: var(--rhythm-md);
  --cta-action-card-gap: var(--rhythm-sm);
  --cta-action-card-py: var(--rhythm-xl);
  --cta-action-card-px: var(--rhythm-lg);
  --cta-action-card-min-h: calc(var(--rhythm-5xl) + var(--rhythm-4xl));
  --cta-action-card-mobile-min-h: calc(var(--rhythm-5xl) + var(--rhythm-xl));
}

.rhythm-stack-sm > * + * {
  margin-top: var(--rhythm-sm);
}

.rhythm-stack-md > * + * {
  margin-top: var(--rhythm-md);
}

.rhythm-stack-lg > * + * {
  margin-top: var(--rhythm-lg);
}

.rhythm-stack-block > * + * {
  margin-top: var(--text-block-gap);
}

.rhythm-article-block > * + * {
  margin-top: var(--article-block-gap);
}

.rhythm-text-flow > * + * {
  margin-top: var(--text-paragraph-gap);
}

.rhythm-list {
  display: flex;
  flex-direction: column;
  gap: var(--text-list-item-gap);
}

.rhythm-section-head > * + * {
  margin-top: var(--section-title-to-lead);
}

.rhythm-card-body > * + * {
  margin-top: var(--card-body-gap);
}

.rhythm-faq-answer > * + * {
  margin-top: var(--faq-answer-gap);
}

.rhythm-faq-answer .rhythm-list,
.rhythm-faq-answer ul {
  gap: var(--faq-list-item-gap);
}

.process {
  background: transparent;
}

.process-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.process-timeline::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: var(--gold-line);
}

.process-step {
  text-align: center;
  padding: 0 20px;
  position: relative;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  margin-bottom: 24px;
  background: var(--charcoal);
  position: relative;
  z-index: 1;
}

.step-title-en {
  margin-bottom: 8px;
  text-transform: capitalize;
}

.process-closingline {
  text-align: center;
  margin-top: 48px;
  position: relative;
}

@media (max-width: 768px) {
  .process-timeline {
    grid-template-columns: 1fr;
    gap: 0;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 0;
  }

  .process-timeline::before {
    display: none;
  }

  .process-step {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 18px;
    text-align: left;
    padding: 0 0 34px 0;
    position: relative;
  }

  .process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 24px;
    top: 58px;
    bottom: 10px;
    width: 1px;
    background: linear-gradient(180deg, var(--gold-line), rgba(191, 160, 96, 0.08));
  }

  .process-step:last-child {
    padding-bottom: 0;
  }

  .step-num {
    grid-row: 1 / span 2;
    position: relative;
    left: auto;
    top: auto;
    width: 48px;
    height: 48px;
    margin: 0;
    background: rgba(10, 10, 10, 0.86);
    box-shadow: 0 0 0 6px rgba(10, 10, 10, 0.18);
  }

  .step-title-en {
    grid-column: 2;
    margin: 1px 0 8px;
  }

  .step-desc {
    grid-column: 2;
  }

  .process-closingline {
    max-width: 326px;
    margin: 44px auto 0;
    text-align: left;
  }
}

:root {
  --hero-bg-overlay-opacity: 0;
  --hero-bg-blur: 0px;
  --hero-bg-blur-max: 10px;
  --hero-bg-scale: 1;
}

:where(
  .home-head-bg,
  .about-head-bg,
  .services-head-bg,
  .faq-head-bg,
  .assessment-head-bg,
  .investigation-head-bg,
  .service-head-bg
) {
  overflow: hidden;
}

:where(
  .home-head-bg,
  .about-head-bg,
  .services-head-bg,
  .faq-head-bg,
  .assessment-head-bg,
  .investigation-head-bg,
  .service-head-bg
)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--hero-bg-overlay-opacity);
  pointer-events: none;
  transition: opacity 120ms linear;
}

:where(
  .home-head-bg__media,
  .about-head-bg__media,
  .services-head-bg__media,
  .faq-head-bg__media,
  .assessment-head-bg__media,
  .investigation-head-bg__media,
  .service-head-bg__media
) {
  filter: blur(var(--hero-bg-blur));
  transform: scale(var(--hero-bg-scale));
  transform-origin: center;
  transition: filter 120ms linear, transform 120ms linear;
  will-change: filter, transform;
}