/* Manufacturing journey and production-use redesign. */
.manufacturing-journey { padding: 106px 0 96px; color: #fff; background: linear-gradient(118deg, #0a2943 0%, #153d5b 100%); }
.journey-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(17rem, .65fr); gap: 4.5rem; align-items: end; margin-bottom: 3.25rem; }
.journey-intro h2 { max-width: 42rem; margin: 0; color: #fff; font-size: clamp(2.6rem, 4.2vw, 3.8rem); line-height: 1.04; letter-spacing: -.075em; }
.journey-intro-copy { padding-bottom: .25rem; }
.journey-intro-copy > p { max-width: 26rem; margin: 0; color: #c5d7e2; font-size: 1rem; line-height: 1.65; }
.journey-intro-copy .text-link { margin-top: 1.05rem; }
.journey-stages { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(196,222,236,.23); border-left: 1px solid rgba(196,222,236,.23); }
.journey-stages li { position: relative; min-height: 274px; padding: 1.55rem 1.45rem 1.6rem; border-right: 1px solid rgba(196,222,236,.23); border-bottom: 1px solid rgba(196,222,236,.23); }
.journey-stages li > span { display: grid; place-items: center; width: 2.85rem; height: 2.85rem; margin-bottom: 3.35rem; color: var(--green); border: 1px solid rgba(112,207,93,.72); border-radius: 50%; font: .75rem var(--mono); }
.journey-stages li:not(:last-child)::after { content: ""; position: absolute; top: 2.95rem; right: -.15rem; z-index: 3; width: .5rem; height: .5rem; border-top: 1px solid var(--green); border-right: 1px solid var(--green); transform: rotate(45deg); background: #123853; }
.journey-stages small { display: block; margin-bottom: .55rem; color: #9fc1d3; font: .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.journey-stages h3 { margin: 0 0 .65rem; color: #fff; font-size: 1.35rem; line-height: 1.15; letter-spacing: -.045em; }
.journey-stages p { margin: 0; color: #c5d6e0; font-size: .93rem; line-height: 1.58; }

.production-use-section { padding: 108px 0; background: #f2f6f8; }
.production-use-head { display: grid; grid-template-columns: minmax(9rem, .38fr) minmax(0, 1.62fr); gap: 3rem; align-items: start; margin-bottom: 3rem; }
.production-use-head .eyebrow { margin-top: .85rem; }
.production-use-head > div { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(17rem, .52fr); gap: 4rem; align-items: end; }
.production-use-head h2 { max-width: 42rem; margin: 0; color: var(--navy); font-size: clamp(2.5rem, 4vw, 3.65rem); line-height: 1.04; letter-spacing: -.075em; }
.production-use-head > div > p { max-width: 22rem; margin: 0 0 .2rem; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.production-use-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #cbd9e1; background: #f8fbfc; }
.use-step { min-height: 292px; padding: 1.6rem; }
.use-step + .use-step { border-left: 1px solid #cbd9e1; }
.use-step > span { color: var(--green-dark); font: .75rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.step-symbol { position: relative; width: 5.7rem; height: 3rem; margin: 2rem 0 1.35rem; border-bottom: 1px solid #9eb7c5; }
.step-symbol::after { content: ""; position: absolute; bottom: -.25rem; right: -.05rem; width: .45rem; height: .45rem; border-top: 1px solid var(--green-dark); border-right: 1px solid var(--green-dark); transform: rotate(45deg); }
.step-symbol i { position: absolute; display: block; border-radius: 50%; }
.add-symbol i { width: .68rem; height: .68rem; background: var(--orange); box-shadow: 0 0 0 .38rem rgba(232,135,71,.13); }.add-symbol i:nth-child(1) { left: .5rem; top: .55rem; }.add-symbol i:nth-child(2) { left: 2.55rem; top: .25rem; width: .48rem; height: .48rem; }.add-symbol i:nth-child(3) { left: 4.15rem; top: .9rem; width: .55rem; height: .55rem; }
.mix-symbol i { width: .6rem; height: .6rem; background: var(--green); }.mix-symbol i:nth-child(1) { left: .6rem; top: .7rem; }.mix-symbol i:nth-child(2) { left: 2.55rem; top: .15rem; width: .8rem; height: .8rem; box-shadow: 0 0 0 .3rem rgba(112,207,93,.12); }.mix-symbol i:nth-child(3) { left: 4.5rem; top: .9rem; width: .45rem; height: .45rem; }
.line-symbol { border-bottom-color: #83b7d1; }.line-symbol i { width: .6rem; height: .6rem; background: #5ca8dd; }.line-symbol i:nth-child(1) { left: .55rem; top: .7rem; }.line-symbol i:nth-child(2) { left: 2.65rem; top: .35rem; }.line-symbol i:nth-child(3) { left: 4.55rem; top: .82rem; }
.use-step h3 { margin: 0 0 .7rem; color: var(--navy); font-size: 1.55rem; line-height: 1.15; letter-spacing: -.05em; }
.use-step p { max-width: 18rem; margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.58; }
.production-use-note { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; margin-top: 1.65rem; padding: 1.35rem 0 0; border-top: 1px solid #cbd9e1; }
.production-use-note > i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); }
.production-use-note p { max-width: 46rem; margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.58; }
.production-use-note b { color: var(--navy); }
.production-use-note .text-link { margin: 0; white-space: nowrap; }

@media (max-width: 960px) {
  .journey-intro { gap: 2.5rem; }
  .journey-stages li { min-height: 292px; padding: 1.35rem 1rem; }
  .production-use-head { grid-template-columns: 1fr; gap: .8rem; }
  .production-use-head .eyebrow { margin: 0; }
  .production-use-head > div { gap: 2.5rem; }
}

@media (max-width: 720px) {
  .manufacturing-journey, .production-use-section { padding: 4.7rem 0; }
  .journey-intro { display: block; margin-bottom: 2.1rem; }
  .journey-intro h2, .production-use-head h2 { max-width: 22rem; font-size: clamp(2rem, 8.8vw, 2.35rem); }
  .journey-intro-copy > p { margin-top: 1.15rem; font-size: .98rem; }
  .journey-stages { display: block; border-left: 0; }
  .journey-stages li { min-height: 0; display: grid; grid-template-columns: 3.2rem 1fr; gap: .9rem; padding: 1.2rem 0; border-right: 0; }
  .journey-stages li > span { width: 2.35rem; height: 2.35rem; margin: 0; font-size: .68rem; }
  .journey-stages li:not(:last-child)::after { top: auto; right: auto; bottom: -.23rem; left: 1rem; transform: rotate(135deg); }
  .journey-stages small { margin-bottom: .35rem; font-size: .65rem; }
  .journey-stages h3 { font-size: 1.15rem; }
  .journey-stages p { font-size: .9rem; }
  .production-use-head { display: block; margin-bottom: 2rem; }
  .production-use-head .eyebrow { margin-bottom: 1.2rem; }
  .production-use-head > div { display: block; }
  .production-use-head > div > p { margin-top: 1.1rem; font-size: .98rem; }
  .production-use-grid { display: block; }
  .use-step { min-height: 0; padding: 1.3rem; }
  .use-step + .use-step { border-top: 1px solid #cbd9e1; border-left: 0; }
  .step-symbol { margin: 1.35rem 0 1rem; }
  .use-step h3 { font-size: 1.35rem; }
  .use-step p { font-size: .93rem; }
  .production-use-note { grid-template-columns: auto 1fr; align-items: start; padding-top: 1.2rem; }
  .production-use-note > i { margin-top: .4rem; }
  .production-use-note .text-link { grid-column: 2; margin-top: .2rem; }
}