/* Homepage Process story. Canonical Group 2 owner. */

.ctg-mobile-services {
  display: none;
}

.ctg-closing-process-section {
  --ctg-closing-accent: var(--ctg-public-eyebrow-primary);
  --ctg-closing-line: color-mix(in srgb, var(--ctg-public-heading-light) 12%, transparent);
  --ctg-closing-nav-offset: 88px;
  --ctg-closing-scroll-distance: 2040px;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: clip;
  background: #202226;
  color: var(--ctg-public-heading-dark);
  isolation: isolate;
}

.ctg-closing-process__sticky {
  position: sticky;
  top: var(--ctg-closing-nav-offset);
  width: 100%;
  height: auto;
  overflow: hidden;
}

.ctg-closing-process__inner {
  width: min(calc(100% - (2 * var(--ctg-public-gutter))), var(--ctg-public-content-max));
  height: auto;
  margin-inline: auto;
  padding: clamp(4rem, 6vw, 6rem) 0;
  display: grid;
  grid-template-rows: auto clamp(20rem, calc(100svh - var(--ctg-closing-nav-offset) - 22.5rem), 26.5625rem);
  align-content: center;
}

.ctg-closing-process__intro {
  width: min(100%, 65rem);
  margin-inline: auto;
  padding-block: 0 1.875rem;
  text-align: center;
}

.ctg-closing-process__intro .ctg-compact-title {
  max-width: 33ch;
  margin: 0 auto;
  text-wrap: balance;
}

.ctg-closing-process__intro .ctg-body-copy {
  max-width: 58ch;
  margin: clamp(.75rem, 1.5svh, 1rem) auto 0;
  color: var(--ctg-color-text-body);
  font-family: var(--ctg-public-font-body);
  font-size: var(--ctg-type-body-size);
  font-weight: var(--ctg-type-body-weight);
  line-height: var(--ctg-type-body-leading);
  letter-spacing: var(--ctg-type-body-tracking);
}

.ctg-closing-deck {
  min-height: 0;
  position: relative;
}

.ctg-closing-deck__canvas {
  position: absolute;
  inset: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  pointer-events: none;
}

.ctg-closing-slide {
  --ctg-closing-card-padding: clamp(1.5rem, 2.5vw, 2rem);
  --ctg-closing-copy-inset: 0;
  --ctg-closing-slide-x: 106%;
  --ctg-closing-slide-alpha: 0;
  --ctg-closing-slide-brightness: .56;
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(calc(100vw - clamp(10rem, 16vw, 20rem)), 70rem);
  height: clamp(20rem, calc(100svh - var(--ctg-closing-nav-offset) - 22.5rem), 26.5625rem);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(19rem, 40%) minmax(0, 60%);
  column-gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding: var(--ctg-closing-card-padding);
  overflow: hidden;
  border: 1px solid var(--ctg-closing-line);
  border-radius: 1.625rem;
  background: var(--ctg-public-surface-light);
  color: var(--ctg-public-heading-light);
  opacity: var(--ctg-closing-slide-alpha);
  filter: brightness(var(--ctg-closing-slide-brightness));
  transform: translate3d(calc(-50% + var(--ctg-closing-slide-x)), -50%, 0);
  will-change: transform, opacity, filter;
}

.ctg-closing-slide__status {
  position: absolute;
  top: var(--ctg-closing-card-padding);
  left: var(--ctg-closing-card-padding);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: var(--ctg-public-heading-light);
  font-family: var(--ctg-public-font-heading);
  pointer-events: none;
}

.ctg-closing-slide__counter {
  min-width: 3.5rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ctg-closing-slide__dots {
  display: flex;
  gap: .75rem;
}

.ctg-closing-slide__dots i {
  width: .625rem;
  height: .625rem;
  display: block;
  border: 1px solid color-mix(in srgb, var(--ctg-public-heading-light) 8%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ctg-public-heading-light) 12%, transparent);
}

.ctg-closing-slide__dots i.is-active {
  border-color: var(--ctg-public-heading-light);
  background: var(--ctg-public-heading-light);
}

.ctg-closing-slide__copy {
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Center the group beneath the progress row, not beneath the card top. */
  padding: 4rem 0 0 var(--ctg-closing-copy-inset);
}

.ctg-closing-slide__copy h3 {
  max-width: 14ch;
  margin: 0;
  color: var(--ctg-public-heading-light);
  font-family: var(--ctg-public-font-heading);
  font-size: clamp(2rem, 3vw, 3.0625rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.ctg-closing-slide__copy .ctg-body-copy {
  max-width: 31ch;
  margin: clamp(1.125rem, 2svh, 1.375rem) 0 0;
  color: var(--ctg-public-body-light);
}

[data-ctg-closing-slide="0"] .ctg-closing-slide__copy h3 {
  max-width: none;
}

[data-ctg-closing-slide="0"] .ctg-closing-slide__copy .ctg-body-copy {
  text-wrap: pretty;
}

.ctg-closing-slide__visual,
.ctg-closing-slide__media {
  width: min(100%, 40.625rem);
  height: auto;
  aspect-ratio: 1672 / 941;
  place-self: center;
  margin: 0;
  overflow: hidden;
  border-radius: 1.25rem;
}

.ctg-closing-slide__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

.ctg-closing-slide__image:not([src]) {
  display: none;
}

.ctg-closing-slide__mobile-index {
  display: none;
}

/* Keep the existing animation runway separate from the content-sized pin. */
.ctg-closing-process__scroll-space {
  height: var(--ctg-closing-scroll-distance);
}

@media (max-width: 1024px) {
  .ctg-closing-process-section {
    --ctg-closing-nav-offset: 62px;
    height: auto;
    overflow: hidden;
  }

  .ctg-closing-process__sticky {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
  }

  .ctg-closing-process__inner {
    height: auto;
    display: block;
  }

  .ctg-closing-process__intro {
    width: min(100%, 43rem);
  }

  .ctg-closing-process__scroll-space {
    display: none;
  }

  .ctg-closing-deck {
    width: 100%;
  }

  .ctg-closing-deck__canvas {
    position: relative;
    inset: auto;
    width: 100%;
    margin: 0;
    padding: 0 0 .75rem;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: clamp(.875rem, 2.25vw, 1.125rem);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 0;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(184, 198, 255, .38) transparent;
    touch-action: pan-x pan-y;
    pointer-events: auto;
  }

  .ctg-closing-slide {
    --ctg-closing-copy-inset: 1.375rem;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    border-radius: 1.25rem;
    opacity: 1;
    filter: none;
    transform: none;
    visibility: visible;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .ctg-closing-slide__status {
    display: none;
  }

  .ctg-closing-slide__mobile-index {
    position: absolute;
    top: 1.375rem;
    left: var(--ctg-closing-copy-inset);
    z-index: 2;
    display: block;
    padding: 0;
    color: rgba(211, 216, 229, .62);
    font-family: var(--ctg-public-font-heading);
    font-size: .78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .ctg-closing-slide__copy {
    padding: 4rem 1.375rem 1.875rem var(--ctg-closing-copy-inset);
  }

  .ctg-closing-slide__visual,
  .ctg-closing-slide__media {
    width: calc(100% - 1.25rem);
    margin: 0 auto .875rem;
    border-radius: 1.125rem;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ctg-closing-slide {
    --ctg-closing-copy-inset: .5rem;
    grid-template-columns: minmax(15rem, .78fr) minmax(0, 1.22fr);
    align-items: center;
    padding: .75rem;
  }

  .ctg-closing-slide__mobile-index {
    display: none;
  }

  .ctg-closing-slide__status {
    top: 1.5rem;
    left: calc(.75rem + var(--ctg-closing-copy-inset));
    display: flex;
  }

  .ctg-closing-slide__copy {
    padding: 3.875rem .5rem 1.875rem var(--ctg-closing-copy-inset);
  }

  .ctg-closing-slide__copy h3 {
    max-width: 13ch;
    font-size: clamp(1.875rem, 4vw, 2.625rem);
    line-height: 1.05;
  }

  .ctg-closing-slide__copy .ctg-body-copy {
    margin-top: 1rem;
  }

  .ctg-closing-slide__visual,
  .ctg-closing-slide__media {
    width: 100%;
    margin: 0;
    border-radius: 1rem;
  }
}

@media (max-width: 767px) {
  .ctg-mobile-services {
    display: block;
    width: 100%;
    padding: var(--ctg-public-section-block) var(--ctg-public-gutter);
    color: var(--ctg-public-heading-dark);
    background: var(--ctg-public-surface-dark);
  }

  .ctg-mobile-services__inner {
    width: 100%;
    margin-inline: auto;
  }

  .ctg-mobile-services__intro {
    width: 100%;
  }

  .ctg-mobile-services__intro .ctg-section-eyebrow,
  .ctg-mobile-services__intro .ctg-section-title,
  .ctg-mobile-services__support {
    margin-inline: 0;
    text-align: left;
  }

  .ctg-mobile-services__intro .ctg-section-eyebrow {
    margin-block: 0;
  }

  .ctg-mobile-services__intro .ctg-section-title {
    max-inline-size: 15ch;
    margin-block: 1rem 0;
    text-wrap: balance;
  }

  .ctg-mobile-services__support {
    max-inline-size: 32rem;
    margin-block: 1.125rem 0;
    color: var(--ctg-public-body-dark);
    font-family: var(--ctg-public-font-body);
    font-size: var(--ctg-public-type-body);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
    text-wrap: pretty;
  }

  .ctg-mobile-services__nav {
    width: 100%;
    margin-top: 2.25rem;
  }

  .ctg-mobile-services__list {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ctg-mobile-services__item {
    margin: 0;
    border-bottom: 1px solid var(--ctg-public-card-border);
  }

  .ctg-mobile-services__link {
    min-height: 5.625rem;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) 1.5rem;
    align-items: center;
    column-gap: 1rem;
    padding-block: 1.25rem;
    color: inherit;
    text-decoration: none;
  }

  .ctg-mobile-services__link:focus-visible {
    outline: 2px solid var(--ctg-public-focus-ring);
    outline-offset: -.125rem;
  }

  .ctg-mobile-services__number {
    color: var(--ctg-public-body-dark);
    font-family: var(--ctg-public-font-body);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .14em;
    font-variant-numeric: tabular-nums;
  }

  .ctg-mobile-services__copy,
  .ctg-mobile-services__title,
  .ctg-mobile-services__description {
    display: block;
    min-width: 0;
  }

  .ctg-mobile-services__title {
    color: var(--ctg-public-heading-dark);
    font-family: var(--ctg-public-font-heading);
    font-size: clamp(1.25rem, 6vw, 1.5rem);
    font-weight: 520;
    line-height: 1.12;
    letter-spacing: -.035em;
    text-wrap: pretty;
  }

  .ctg-mobile-services__description {
    margin-top: .5rem;
    color: var(--ctg-public-body-dark);
    font-family: var(--ctg-public-font-body);
    font-size: .6875rem;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .ctg-mobile-services__arrow {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    color: var(--ctg-public-heading-dark);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ctg-closing-process-section {
    display: none;
  }

  .ctg-closing-process__intro .ctg-compact-title {
    max-width: 15ch;
  }

  .ctg-closing-slide {
    grid-template-columns: 1fr;
  }

  .ctg-closing-slide__copy h3 {
    max-width: 13ch;
    font-size: clamp(1.875rem, 8.7vw, 2.625rem);
  }

  .ctg-closing-slide__copy .ctg-body-copy {
    max-width: 38ch;
    margin-top: 1.125rem;
  }

}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  .ctg-closing-process__scroll-space {
    display: none;
  }

  .ctg-closing-process-section {
    height: auto;
    overflow: hidden;
  }

  .ctg-closing-process__sticky {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
  }

  .ctg-closing-process__inner {
    height: auto;
    display: block;
  }

  .ctg-closing-process__intro {
    padding-bottom: 2.625rem;
  }

  .ctg-closing-deck__canvas {
    position: relative;
    inset: auto;
    width: min(100%, 70rem);
    margin-inline: auto;
    display: grid;
    gap: 1.125rem;
    pointer-events: auto;
  }

  .ctg-closing-slide {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    opacity: 1;
    filter: none;
    transform: none;
    visibility: visible;
  }

  .ctg-closing-slide__status {
    display: flex;
  }

  .ctg-closing-slide__mobile-index {
    display: none;
  }
}