/* The locally hosted display families also used by the new creator hero. */
@font-face {
  font-family: "TFA Condensed";
  src: url("../fonts/barlow-condensed-800.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "TFA Marker";
  src: url("../fonts/permanent-marker.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* A native, scroll-revealed TFA journey. Content stays readable without JS. */
.process-journey {
  --journey-display: "TFA Condensed", Impact, sans-serif;
  --journey-marker: "TFA Marker", cursive;
  --journey-blue: #286bd2;
  --journey-violet: #8350bd;
  --journey-line: #cdd5ed;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(5rem, 9vw, 8rem) 0 clamp(4rem, 7vw, 6rem);
  background: radial-gradient(ellipse at 80% 12%, #cfcdf830, transparent 42%),
    radial-gradient(ellipse at 8% 75%, #c4daf530, transparent 36%), #eef0fa;
  color: var(--brand-ink, #19213b);
  scroll-margin-top: calc(var(--header-height) + 1rem);
}
.process-journey__inner { max-width: 76rem; }
.process-journey__heading { position: relative; max-width: 57rem; margin: 0 auto 4rem; text-align: center; }
.process-journey__eyebrow {
  display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 1.5rem;
  color: #4b5876; font-size: .75rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
}
.process-journey__eyebrow > span { width: .45rem; height: .45rem; border-radius: 50%; background: var(--brand-gradient); }
.process-journey__heading h2 {
  max-width: none; margin: 0; color: #19213b; font-family: var(--journey-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
}
.process-journey__heading h2 .text-accent {
  font-family: var(--journey-marker); font-size: .78em; font-weight: 400;
  line-height: 1.4; letter-spacing: -.065em;
}
.process-journey__heading > p:not([class]) {
  max-width: 37rem; margin: 1.6rem auto 0; color: #53607a; font-size: 1.0625rem; line-height: 1.7;
}
.process-journey__scroll-hint {
  display: flex; justify-content: center; align-items: center; gap: .8rem;
  margin-top: 2rem; color: #5e6c89; font-size: .75rem;
}
.process-journey__timeline { position: relative; }
.process-journey__steps { position: relative; list-style: none; padding: 0; margin: 0; }
.process-journey__step {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 6rem minmax(0, 1fr);
  perspective: 1100px;
}
.process-journey__step + .process-journey__step { margin-top: -3rem; }
.process-journey__rail {
  position: absolute; top: 3rem; bottom: 3rem; left: 50%; width: 2px;
  height: var(--journey-rail-height, auto); background: var(--journey-line); transform: translateX(-50%);
}
.process-journey__fill {
  position: absolute; inset: 0; transform: scaleY(var(--journey-progress, 1)); transform-origin: top;
  background: linear-gradient(180deg, var(--journey-blue), #5d60d6 50%, var(--journey-violet));
}
.process-journey__spark {
  position: absolute; top: var(--journey-fill-size, 100%); left: 50%; width: 9px; height: 9px;
  border: 2px solid #eef0fa; border-radius: 50%; background: #6261d6;
  box-shadow: 0 0 0 5px #6565da12; transform: translate(-50%, -50%);
}
.process-journey__node {
  position: absolute; z-index: 1; top: 3rem; left: 50%; width: 12px; height: 12px;
  border: 3px solid #eef0fa; border-radius: 50%; background: #6271b7;
  box-shadow: 0 0 0 1px #bac5e1; transform: translate(-50%, -50%);
  transition: background 180ms, box-shadow 180ms;
}
.process-journey__node::before {
  content: ""; position: absolute; top: 2px; right: 12px; width: 2rem; height: 1px; background: #c3cee9;
}
.process-journey__step:nth-child(even) .process-journey__node::before { right: auto; left: 12px; }
.journey-card {
  grid-column: 1; min-width: 0; position: relative; padding: clamp(1.5rem, 2.8vw, 2.4rem);
  border: 1px solid #d3daed; border-radius: 1.25rem; background: linear-gradient(135deg, #fffefa, #fcfcff);
  box-shadow: 0 10px 32px #27346508, 0 2px 3px #27346504; transform-origin: right 3rem;
}
.process-journey__step:nth-child(even) .journey-card { grid-column: 3; transform-origin: left 3rem; }
.journey-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.journey-card__phase { display: flex; align-items: center; gap: .9rem; margin: 0; color: #5c6781; font-size: .6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.journey-card__phase > span { font-family: var(--journey-display); color: #3565c3; font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.025em; }
.journey-card__icon { width: 2.4rem; height: 2.4rem; flex: 0 0 auto; color: #697dbe; }
.journey-card h3 { margin: 0 0 1rem; color: #19213b; font-family: var(--journey-display); font-size: clamp(1.875rem, 2.75vw, 2.375rem); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; text-transform: uppercase; text-wrap: balance; }
.journey-card > p:not([class]) { margin: 0; color: #53607a; font-size: 1rem; line-height: 1.7; }
.journey-card .journey-card__result { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid #dce2f1; color: #425888; font-size: .8125rem; font-weight: 500; line-height: 1.55; }
.journey-card--dark {
  background: radial-gradient(ellipse at 100% 0, #7050c748, transparent 70%), linear-gradient(135deg, #18223e, #202744);
  border-color: #4d5c89; box-shadow: 0 18px 40px #27346518;
}
.journey-card--dark h3 { color: #fffefa; }
.journey-card--dark > p:not([class]) { color: #c6cee3; }
.journey-card--dark .journey-card__phase { color: #c2cae4; }
.journey-card--dark .journey-card__phase > span,
.journey-card--dark .journey-card__icon { color: #afbeff; }
.journey-card--dark .journey-card__result { color: #d7def7; border-color: #ffffff24; }
.process-journey__closing { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 4rem auto 0; text-align: center; }
.process-journey__closing > p { margin: 0 0 .5rem; color: #19213b; font-size: 1.25rem; font-weight: 500; letter-spacing: -.025em; }
.process-journey__closing .button { gap: 1.5rem; }
.process-journey__contact { display: inline-flex; align-items: center; min-height: 44px; color: #53607a; font-size: .875rem; text-underline-offset: .25em; }
.process-journey__contact:hover { color: #304796; text-decoration: underline; }

/* Only hide or transform cards after the animation has initialized successfully. */
.process-journey.is-journey-animated .journey-card {
  opacity: var(--card-opacity, 1);
  transform: translate3d(var(--card-x, 0px), var(--card-y, 0px), 0) rotateY(var(--card-rotate-y, 0deg)) rotateX(var(--card-rotate-x, 0deg)) rotateZ(var(--card-rotate-z, 0deg));
}
.process-journey.is-journey-animated .process-journey__node { background: #eef0fa; }
.process-journey.is-journey-animated .is-reached .process-journey__node { background: #5966ce; box-shadow: 0 0 0 1px #7f8ed0, 0 0 0 6px #646bc010; }
.process-journey.is-journey-animated .is-current .process-journey__node { box-shadow: 0 0 0 1px #7f8ed0, 0 0 0 8px #646bc018; }

@media (max-width: 900px) {
  .process-journey { padding-top: 4.5rem; }
  .process-journey__heading { margin-bottom: 2.75rem; }
  .process-journey__heading h2 { font-size: clamp(2.125rem, 5.7vw, 3rem); }
  .process-journey__heading > p:not([class]) { font-size: 1rem; }
  .process-journey__step { display: block; padding-left: 2.25rem; perspective: 900px; }
  .process-journey__step + .process-journey__step { margin-top: 1.5rem; }
  .process-journey__rail, .process-journey__node { left: .375rem; }
  .process-journey__node::before,
  .process-journey__step:nth-child(even) .process-journey__node::before { right: auto; left: 9px; width: 1rem; }
  .journey-card, .process-journey__step:nth-child(even) .journey-card { padding: 1.5rem; transform-origin: center top; }
  .journey-card h3 { font-size: 2rem; }
  .journey-card > p:not([class]) { font-size: .9375rem; line-height: 1.7; }
  .process-journey__closing { margin-top: 2.75rem; }
}
@media (max-width: 380px) {
  .process-journey__step { padding-left: 1.75rem; }
  .journey-card, .process-journey__step:nth-child(even) .journey-card { padding: 1.125rem; border-radius: 1rem; }
  .journey-card__top { gap: .4rem; }
  .journey-card__phase { gap: .55rem; font-size: .625rem; letter-spacing: .05em; }
  .journey-card__icon { width: 2rem; height: 2rem; }
  .journey-card h3 { font-size: 1.875rem; }
  .journey-card .journey-card__result { font-size: .75rem; }
  .process-journey__heading h2 { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .process-journey.is-journey-animated .journey-card { opacity: 1; transform: none; }
  .process-journey__node { transition: none; }
  .process-journey__fill { transform: none; }
  .process-journey__spark { display: none; }
}
@media (forced-colors: active) {
  .journey-card { border-color: CanvasText; }
  .process-journey__node, .process-journey__rail { background: CanvasText; }
  .process-journey .text-accent { color: CanvasText; background: none; }
}
@media print {
  .process-journey { padding-block: 2rem; background: white; }
  .process-journey .journey-card { opacity: 1 !important; transform: none !important; box-shadow: none; break-inside: avoid; }
  .process-journey__step { display: block; margin: 1rem 0 !important; }
  .process-journey__rail, .process-journey__node, .process-journey__scroll-hint, .process-journey__closing { display: none; }
}