/* CUSTOMER_JOURNEY_V1 */

.customer-journey {
  background:#f1eae6;
  color:#231e21;
  padding:115px 0 105px;
}

.journey-heading {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:65px;
  align-items:end;
  margin-bottom:55px;
}

.journey-eyebrow {
  font:600 11px "DM Sans",sans-serif;
  letter-spacing:.2em;
  color:#96546a;
}

.journey-heading h2 {
  font-size:clamp(44px,5.3vw,76px);
  line-height:1.33;
  letter-spacing:-.06em;
  margin:23px 0 0;
  font-weight:700;
}

.journey-heading h2 em {
  color:#90445b;
  font-style:normal;
}

.journey-heading p {
  max-width:390px;
  color:#74686d;
  font-size:14px;
  line-height:2.15;
  margin:0 0 10px;
}

.journey-layout {
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:62px;
  align-items:stretch;
}

.journey-art {
  min-height:530px;
  background:
    radial-gradient(
      ellipse at 10% 90%,
      #763c50 0%,transparent 50%
    ),
    linear-gradient(140deg,#30232d,#19191e);
  color:#f8f0ed;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:38px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.journey-art::before {
  content:"";
  position:absolute;
  inset:17px;
  border:1px solid #ffffff32;
  pointer-events:none;
}

.journey-art::after {
  content:"";
  position:absolute;
  width:290px;
  height:290px;
  border:1px solid #ffffff1e;
  border-radius:50%;
  top:25%;
  left:-85px;
  box-shadow:
    0 0 0 58px #ffffff08,
    0 0 0 116px #ffffff04;
  pointer-events:none;
  z-index:-1;
}

.journey-art-top,
.journey-art-bottom {
  font:600 10px "DM Sans",sans-serif;
  letter-spacing:.18em;
  color:#d5afb9;
}

.journey-art-center {
  display:flex;
  flex-direction:column;
  gap:20px;
}

.journey-art-center span {
  color:#d7a6b4;
  font:600 12px "DM Sans",sans-serif;
  letter-spacing:.18em;
}

.journey-art-center strong {
  font:600 clamp(35px,3.7vw,57px)/1.14
    "DM Sans",sans-serif;
  letter-spacing:-.05em;
}

.journey-steps {
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:none;
}

.journey-steps li {
  display:grid;
  grid-template-columns:48px 1fr;
  gap:19px;
  border-bottom:1px solid #d0c1c1;
  padding:23px 0;
}

.journey-steps li:first-child {
  border-top:1px solid #d0c1c1;
}

.journey-number {
  color:#94546a;
  font:600 12px "DM Sans",sans-serif;
  padding-top:10px;
}

.journey-steps h3 {
  font-size:clamp(21px,2.1vw,30px);
  letter-spacing:-.035em;
  margin:0 0 8px;
  line-height:1.5;
}

.journey-steps p {
  color:#776c70;
  font-size:13px;
  line-height:2;
  margin:0;
  max-width:460px;
}

.journey-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  border-top:1px solid #cbbdc0;
  margin-top:36px;
  padding-top:23px;
}

.journey-bottom p {
  color:#7b6e72;
  font-size:11px;
  line-height:1.9;
  margin:0;
}

.journey-bottom a {
  color:#843a53;
  font-size:13px;
  font-weight:700;
  border-bottom:1px solid #843a53;
  padding-bottom:6px;
  white-space:nowrap;
  display:inline-flex;
  gap:18px;
  align-items:center;
}

/* Development control is not customer-facing */
.preview-tools {
  display:none !important;
}

@media(max-width:900px) {
  .journey-heading,
  .journey-layout {
    grid-template-columns:1fr;
    gap:30px;
  }

  .customer-journey {
    padding:75px 0;
  }

  .journey-heading {
    margin-bottom:34px;
  }

  .journey-art {
    min-height:370px;
  }
}

@media(max-width:550px) {
  .journey-heading h2 {
    font-size:clamp(39px,9vw,55px);
  }

  .journey-art {
    min-height:340px;
    padding:30px;
  }

  .journey-art-center strong {
    font-size:39px;
  }

  .journey-steps li {
    gap:12px;
    padding:20px 0;
  }

  .journey-steps h3 {
    font-size:22px;
  }

  .journey-bottom {
    align-items:flex-start;
    flex-direction:column;
  }
}