/* Drawn paths, real HTML stories, and one connected service selection. */
.ink-icon {
  display: block;
  width: 60px;
  height: 60px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-impact {
  position: relative;
  padding-block: 5rem 4.5rem;
  border-bottom: 1px solid #d8d7cf;
}

.chapter-connector {
  position: absolute;
  top: 0;
  right: 14%;
  width: 160px;
  height: 80px;
  fill: none;
  stroke: #8d8c82;
  stroke-width: 1.15;
}

.impact-panels {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.impact-panel { min-width: 0; scroll-snap-align: start; }
.is-connected .impact-panels {
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr);
  overflow: clip;
}
.is-connected .impact-panel { grid-area: 1 / 1; visibility: hidden; }
.is-connected .impact-panel.is-active { visibility: visible; }

.impact-intro { max-width: 720px; margin: 0 auto; text-align: center; }
.impact-intro h3,
.chapter-heading h2,
.roadmap-arrival h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.3vw, 3.15rem);
  line-height: 1.12;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.impact-intro > p:last-child {
  max-width: 620px;
  margin: 1.25rem auto 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}
.flow-drawing { position: relative; margin-top: 3rem; }
.flow-route { position: absolute; inset: 0 0 auto; width: 100%; height: 110px; overflow: visible; }
.flow-base, .flow-progress { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.flow-base { stroke: #b3b0a3; }
.flow-progress { stroke: #9a7c35; stroke-width: 2.5; stroke-dasharray: .045 .955; stroke-dashoffset: 1; }
.flow-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.flow-node {
  display: grid;
  place-items: center;
  width: 106px;
  height: 106px;
  margin: 0 auto 1.35rem;
  border: 1px solid #d2cec0;
  border-radius: 47% 53% 49% 51%;
  background: var(--paper);
}
.flow-steps h4 { margin: 0; font-size: 1.15rem; letter-spacing: -.025em; line-height: 1.3; }
.flow-steps p { max-width: 235px; margin: .65rem auto 0; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.flow-footnote { margin: 2.25rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.6; text-align: center; }

.onboarding { padding-block: clamp(4rem, 8vw, 7rem); }
.chapter-heading { max-width: 720px; }
.chapter-heading > p:last-child { color: var(--muted); line-height: 1.7; margin-top: 1.25rem; }
.onboarding-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1.4rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.onboarding-steps::before {
  content: '';
  position: absolute;
  left: 3%;
  right: 5%;
  top: 38px;
  border-top: 1px solid #b0ac9d;
  transform: rotate(-.35deg);
}
.onboarding-step { position: relative; min-width: 0; }
.onboarding-icon { position: relative; display: grid; place-items: center; width: 78px; height: 78px; background: var(--paper); }
.onboarding-icon .ink-icon { width: 49px; height: 49px; }
.step-number { display: block; margin-top: 1.1rem; font-size: .7rem; letter-spacing: .12em; color: #79766b; }
.onboarding-step h3 { font-size: 1.02rem; letter-spacing: -.025em; line-height: 1.35; margin: .5rem 0 .7rem; }
.onboarding-step p { color: var(--muted); font-size: .87rem; line-height: 1.65; margin: 0; }
.refund-promise { display: flex; gap: 1.5rem; align-items: center; max-width: 880px; margin: 3rem 0 0 auto; border-top: 1px solid #d8d7cf; padding-top: 1.5rem; }
.refund-promise .ink-icon { flex: 0 0 60px; }
.refund-promise h3 { margin: 0 0 .5rem; font-size: 1.5rem; letter-spacing: -.04em; }
.refund-promise p { color: var(--muted); line-height: 1.7; margin: 0; }
.refund-promise a { text-decoration: underline; text-underline-offset: .25em; }

/* Dedicated service stories alternate around a continuous, quiet ink route. */
.roadmap-back { display: inline-flex; min-height: 44px; align-items: center; color: var(--muted); font-size: .85rem; margin-top: 1.5rem; }
.roadmap-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; padding-block: 3rem 5rem; }
.roadmap-hero h1 { font-size: clamp(2.8rem, 4.7vw, 4.8rem); line-height: 1.04; }
.roadmap-hero > div > p:not(.eyebrow) { max-width: 550px; margin-top: 1.5rem; color: var(--muted); line-height: 1.75; font-size: 1.05rem; }
.roadmap-art { width: 100%; }
.roadmap-chapters { list-style: none; margin: 0; padding: 1rem 0; }
.roadmap-chapter { position: relative; display: grid; grid-template-columns: 1fr 108px 1fr; gap: 3rem; align-items: start; padding-block: 2rem 4rem; }
.roadmap-chapter::before { content: ''; position: absolute; width: 1px; background: #b9b3a1; top: 40px; bottom: -40px; left: 50%; }
.roadmap-chapter:nth-child(odd)::before { transform: rotate(.7deg); }
.roadmap-chapter:nth-child(even)::before { transform: rotate(-.7deg); }
.roadmap-chapter:last-child::before { bottom: 0; }
.roadmap-marker { z-index: 1; grid-column: 2; grid-row: 1; width: 108px; min-height: 120px; background: var(--paper); padding: 1rem; text-align: center; }
.roadmap-marker > span { display: block; color: #8c7d55; font-size: .75rem; letter-spacing: .12em; margin-bottom: .9rem; }
.roadmap-marker .ink-icon { margin-inline: auto; }
.roadmap-copy { grid-column: 1; grid-row: 1; padding-top: 1rem; }
.roadmap-chapter:nth-child(even) .roadmap-copy { grid-column: 3; }
.roadmap-copy h2 { font-size: clamp(1.55rem, 2.3vw, 2.15rem); line-height: 1.2; letter-spacing: -.04em; text-wrap: balance; margin: 0; }
.roadmap-copy > p { color: var(--muted); font-size: 1rem; line-height: 1.8; margin: 1.2rem 0 0; }
.roadmap-copy .roadmap-effect { color: #3c3b33; font-size: .95rem; padding-top: 1rem; border-top: 1px solid #d8d7cf; }
.roadmap-effect span { color: #927532; padding-right: .4rem; }
.roadmap-arrival { padding: 4rem 0 5rem; text-align: center; max-width: 880px; margin-inline: auto; }
.roadmap-arrival > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; margin: 1.4rem auto 2rem; }
.related-stories { display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding-block: 2rem 3rem; border-top: 1px solid #d8d7cf; }
.related-stories p { width: 100%; margin-bottom: .5rem; }
.related-stories a { display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; }
html.page-is-hidden [data-reveal] * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: no-preference) {
  .impact-panel.is-active.is-inview .impact-intro { animation: sketch-arrives .4s ease both; }
  .impact-panel.is-active.is-inview .flow-progress { animation: carry-the-thread 5s linear infinite; }
  .impact-panel.is-active.is-inview .flow-node { animation: warm-a-step 5s ease-in-out infinite; animation-delay: calc(var(--step) * .9s); }
  .onboarding.is-inview .onboarding-icon { animation: sketch-arrives .7s ease both; animation-delay: calc(var(--step) * .12s); }
  .roadmap-chapter.is-inview .roadmap-copy { animation: sketch-arrives .7s ease both; }
  @keyframes carry-the-thread { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes warm-a-step { 0%, 35%, 100% { background: var(--paper); border-color: #d2cec0; } 12%, 22% { background: #f5edce; border-color: #ba9c50; } }
  @keyframes sketch-arrives { from { opacity: .35; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
}

@media (max-width: 64em) {
  .onboarding-steps { gap: 1rem; }
  .onboarding-step h3 { font-size: .95rem; }
  .onboarding-step p { font-size: .83rem; }
  .roadmap-hero { gap: 2rem; }
  .roadmap-chapter { gap: 1.6rem; grid-template-columns: 1fr 90px 1fr; }
  .roadmap-marker { width: 90px; padding-inline: .5rem; }
}
@media (max-width: 56em) {
  .onboarding-steps { grid-template-columns: 1fr; gap: 0; margin-top: 2rem; }
  .onboarding-steps::before { left: 37px; top: 38px; bottom: 50px; right: auto; border-top: 0; border-left: 1px solid #b0ac9d; transform: none; }
  .onboarding-step { display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: 1.5rem; padding-bottom: 2rem; }
  .onboarding-icon { grid-column: 1; grid-row: 1 / 4; }
  .step-number { margin-top: .6rem; }
  .onboarding-step h3 { font-size: 1.12rem; margin-block: .35rem .5rem; }
  .onboarding-step p { font-size: .95rem; }
  .onboarding-step:last-child { padding-bottom: 0; }
  .roadmap-hero { grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 2rem; }
  .roadmap-art { max-width: 680px; justify-self: center; }
  .roadmap-chapter { grid-template-columns: 80px minmax(0, 1fr); gap: 1.5rem; padding-bottom: 2.5rem; }
  .roadmap-chapter::before { left: 40px; }
  .roadmap-marker { grid-column: 1; width: 80px; }
  .roadmap-chapter .roadmap-copy, .roadmap-chapter:nth-child(even) .roadmap-copy { grid-column: 2; }
}
@media (max-width: 42em) {
  .service-impact { padding-block: 4.25rem 3rem; }
  .chapter-connector { right: 8%; width: 125px; height: 65px; }
  .impact-intro { text-align: left; }
  .impact-intro > p:last-child { font-size: 1rem; }
  .flow-drawing { margin-top: 2rem; }
  .flow-route { display: none; }
  .flow-steps { grid-template-columns: 1fr; text-align: left; gap: 0; }
  .flow-steps li { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 1.25rem; padding-bottom: 1.75rem; }
  .flow-steps li:not(:last-child)::after { content: ''; position: absolute; top: 70px; bottom: 0; left: 37px; border-left: 1px solid #b3b0a3; }
  .flow-node { grid-row: 1 / 3; width: 76px; height: 76px; margin: 0; }
  .flow-node .ink-icon { width: 44px; height: 44px; }
  .flow-steps h4 { margin-top: .5rem; font-size: 1.15rem; }
  .flow-steps p { max-width: none; margin: .5rem 0 0; }
  .flow-footnote { text-align: left; margin-top: .75rem; }
  .roadmap-chapter { grid-template-columns: 58px minmax(0, 1fr); gap: 1rem; }
  .roadmap-marker { width: 58px; padding-inline: 0; }
  .roadmap-marker .ink-icon { width: 44px; height: 44px; }
  .roadmap-chapter::before { left: 29px; }
  .roadmap-copy > p { font-size: .95rem; }
  .refund-promise { align-items: start; gap: 1rem; }
}