/* ============================================================
   flow.css — /service/ consultation route section
   Normal runtime only: adopted V6, section-scoped styles.
   ============================================================ */

.s-service-flow {
  --flow-heading: var(--corp-ink, var(--heading, #17315f));
  --flow-ink: var(--corp-ink-body, var(--ink, #1e2528));
  --flow-muted: var(--corp-muted, var(--muted, #526272));
  --flow-gold: var(--corp-gold, var(--gold, #b9872f));
  position: relative;
  padding-block: clamp(64px, 7.5vw, 104px);
  overflow: clip;
  background: var(--corp-paper, var(--paper, #fff9f1));
  color: var(--flow-ink);
}

.s-service-flow *,
.s-service-flow *::before,
.s-service-flow *::after {
  box-sizing: border-box;
}

.s-service-flow__inner {
  width: min(1320px, calc(100% - 40px));
  margin-inline: auto;
}

.s-service-flow__paper {
  position: relative;
  min-height: 1040px;
  padding: clamp(58px, 5.8vw, 84px) clamp(52px, 6.2vw, 92px) clamp(70px, 6.6vw, 96px);
  background-image: url("/assets/images/service/service-flow-route-paper-demo-v1.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 20px 28px rgba(29, 45, 86, 0.1));
}

.s-service-flow__head {
  position: relative;
  z-index: 2;
  width: min(720px, 78%);
  margin: 0 auto clamp(38px, 4vw, 58px);
  text-align: center;
}

.s-service-flow__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: var(--flow-gold);
  font-size: var(--fs-eyebrow, 0.8rem);
  font-weight: var(--fw-label, 700);
  letter-spacing: 0.2em;
}

.s-service-flow__eyebrow::after {
  content: "";
  width: 58px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.s-service-flow__title {
  margin: 12px 0 0;
  color: var(--flow-heading);
  font-family: var(--font-serif, serif);
  font-size: clamp(1.9rem, 3.5vw, 2.9rem);
  font-weight: var(--fw-heading, 700);
  line-height: 1.4;
  letter-spacing: 0.055em;
  text-wrap: balance;
}

.s-service-flow__lead {
  max-width: 48em;
  margin: 14px auto 0;
  color: var(--flow-muted);
  font-size: 0.96rem;
  line-height: 1.9;
  text-wrap: pretty;
}

.s-service-flow__steps {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(62px, auto));
  min-height: 760px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-service-flow__step {
  position: relative;
  display: grid;
  align-items: center;
  gap: clamp(18px, 2vw, 30px);
  min-width: 0;
  scroll-margin-top: 112px;
}

.s-service-flow__step--1 {
  grid-column: 1 / 9;
  grid-row: 1 / 4;
  grid-template-columns: minmax(96px, 0.5fr) minmax(190px, 1.05fr) minmax(300px, 1.7fr);
  grid-template-areas: "number art copy";
}

.s-service-flow__step--2 {
  grid-column: 4 / 13;
  grid-row: 4 / 7;
  grid-template-columns: minmax(96px, 0.5fr) minmax(300px, 1.7fr) minmax(240px, 1.25fr);
  grid-template-areas: "number copy art";
}

.s-service-flow__step--3 {
  grid-column: 3 / 13;
  grid-row: 7 / 10;
  grid-template-columns: minmax(300px, 1.5fr) minmax(96px, 0.48fr) minmax(300px, 1.45fr);
  grid-template-areas: "art number copy";
}

.s-service-flow__number {
  grid-area: number;
  margin: 0;
  color: rgba(185, 135, 47, 0.24);
  font-family: var(--font-serif, serif);
  font-size: clamp(4.6rem, 7.2vw, 7rem);
  font-weight: var(--fw-regular, 400);
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-align: center;
}

.s-service-flow__art {
  grid-area: art;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
}

.s-service-flow__art img {
  display: block;
  width: 100%;
  max-width: 310px;
  height: auto;
  max-height: 206px;
  object-fit: contain;
}

.s-service-flow__copy {
  grid-area: copy;
  min-width: 0;
}

.s-service-flow__step--3 .s-service-flow__art img {
  max-width: 390px;
  max-height: 226px;
}

.s-service-flow__step-title {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(185, 135, 47, 0.48);
  color: var(--flow-heading);
  font-family: var(--font-serif, serif);
  font-size: clamp(1.22rem, 1.8vw, 1.58rem);
  font-weight: var(--fw-heading, 700);
  line-height: 1.5;
  letter-spacing: 0.035em;
  text-wrap: balance;
}

.s-service-flow__body {
  max-width: 36em;
  margin: 13px 0 0;
  color: var(--flow-ink);
  font-size: 0.92rem;
  line-height: 1.9;
  text-wrap: pretty;
}

.s-service-flow__note {
  margin: 10px 0 0;
  color: var(--flow-muted);
  font-size: 0.8rem;
  line-height: 1.75;
}

.s-service-flow.is-motion-enabled .s-service-flow__head,
.s-service-flow.is-motion-enabled .s-service-flow__step {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.72s ease, transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.s-service-flow.is-motion-enabled .s-service-flow__step--2 {
  transition-delay: 0.12s;
}

.s-service-flow.is-motion-enabled .s-service-flow__step--3 {
  transition-delay: 0.24s;
}

.s-service-flow.is-motion-enabled.is-visible .s-service-flow__head,
.s-service-flow.is-motion-enabled.is-visible .s-service-flow__step {
  opacity: 1;
  transform: none;
}

@media (max-width: 1040px) {
  .s-service-flow__inner {
    width: min(900px, calc(100% - 36px));
  }

  .s-service-flow__paper {
    min-height: 980px;
    padding-inline: clamp(38px, 5vw, 62px);
  }

  .s-service-flow__steps {
    min-height: 720px;
  }

  .s-service-flow__step--1 {
    grid-column: 1 / 11;
    grid-template-columns: 82px minmax(170px, 0.9fr) minmax(250px, 1.45fr);
    grid-template-areas: "number art copy";
  }

  .s-service-flow__step--2 {
    grid-column: 3 / 13;
    grid-template-columns: 82px minmax(250px, 1.45fr) minmax(200px, 0.95fr);
    grid-template-areas: "number copy art";
  }

  .s-service-flow__step--3 {
    grid-column: 2 / 13;
    grid-template-columns: minmax(240px, 1.15fr) 82px minmax(260px, 1.3fr);
    grid-template-areas: "art number copy";
  }

  .s-service-flow__number {
    font-size: clamp(4rem, 8vw, 5.4rem);
  }

  .s-service-flow__art img {
    max-height: 180px;
  }
}

@media (max-width: 760px) {
  .s-service-flow {
    padding-block: 60px 78px;
  }

  .s-service-flow__inner {
    width: min(100% - 24px, 600px);
  }

  .s-service-flow__paper {
    min-height: 0;
    padding: 58px 26px 72px;
    background-size: 100% 100%;
    filter: drop-shadow(0 14px 22px rgba(29, 45, 86, 0.09));
  }

  .s-service-flow__head {
    width: min(100%, 480px);
    margin-bottom: 42px;
  }

  .s-service-flow__eyebrow::after {
    width: 40px;
  }

  .s-service-flow__title {
    font-size: clamp(1.65rem, 8vw, 2.05rem);
  }

  .s-service-flow__lead {
    font-size: 0.9rem;
    line-height: 1.85;
  }

  .s-service-flow__steps {
    display: block;
    min-height: 0;
  }

  .s-service-flow__step,
  .s-service-flow__step--1,
  .s-service-flow__step--2,
  .s-service-flow__step--3 {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: none;
    gap: 0 16px;
    min-height: 0;
    padding: 20px 0 42px;
  }

  .s-service-flow__step + .s-service-flow__step {
    margin-top: 18px;
    padding-top: 30px;
  }

  .s-service-flow__number {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    padding-top: 2px;
    font-size: 3rem;
    text-align: left;
  }

  .s-service-flow__copy {
    display: contents;
    grid-area: auto;
  }

  .s-service-flow__step-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.2rem;
  }

  .s-service-flow__art {
    grid-column: 2;
    grid-row: 2;
    min-height: 150px;
    margin-top: 16px;
    padding: 4px 0;
  }

  .s-service-flow__art img {
    width: min(100%, 310px);
    max-height: 188px;
  }

  .s-service-flow__body {
    grid-column: 2;
    grid-row: 3;
    margin-top: 14px;
    font-size: 0.88rem;
    line-height: 1.85;
  }

  .s-service-flow__note {
    grid-column: 2;
    grid-row: 4;
  }
}

@media (max-width: 420px) {
  .s-service-flow__paper {
    padding-inline: 20px;
  }

  .s-service-flow__step,
  .s-service-flow__step--1,
  .s-service-flow__step--2,
  .s-service-flow__step--3 {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 0 12px;
  }

  .s-service-flow__number {
    font-size: 2.55rem;
  }

  .s-service-flow__step-title {
    font-size: 1.12rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s-service-flow.is-motion-enabled .s-service-flow__head,
  .s-service-flow.is-motion-enabled .s-service-flow__step {
    opacity: 1;
    transform: none;
    transition: none;
  }
}