/* How to reach — route planner: choose a starting point, see the distance and how to arrive */
.rch .tr-wrap { max-width: 1280px; }
.rch-grid { display: grid; gap: 22px; grid-template-columns: minmax(0,1fr); align-items: stretch; }
@media (min-width: 900px) { .rch-grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(28px,4vw,56px); } }

/* answer panel */
.rch-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px,3vw,38px); border-radius: 24px; background: linear-gradient(160deg,#fffdf7 0%,#f6edd6 100%); border: 1px solid #e6d6ae; box-shadow: 0 30px 50px -38px rgba(60,40,20,.45); }
.rch-panel::before { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(188,140,63,.18), transparent 68%); pointer-events: none; }
.rch-from { margin: 0 0 18px !important; font-size: 11px !important; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #9a8a73; }
.rch-from b { color: #2a1c13; font-weight: 600; }

.rch-route { display: flex; align-items: center; gap: 0; margin: 0 0 14px; }
.rch-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #bc8c3f; background: #fff; }
.rch-line { position: relative; flex: 1; height: 0; border-top: 2px dashed #d2bb8c; margin: 0 6px; }
.rch-line i { position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #bc8c3f; box-shadow: 0 0 0 5px rgba(188,140,63,.18); animation: rch-run 3.2s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes rch-run { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
.rch-pin { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #2a1c13; color: #e8bd55; font-size: 16px; }

.rch-dist { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px !important; line-height: 1 !important; }
.rch-dist span { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(44px,6vw,64px) !important; font-weight: 500; line-height: 1 !important; color: #2a1c13; letter-spacing: -.01em; }
.rch-dist small { font-size: 13px !important; letter-spacing: .12em; text-transform: uppercase; color: #8a5a22; font-weight: 600; }
.rch-tip { margin: 0 0 22px !important; max-width: 40ch; font-size: 15px !important; line-height: 1.7 !important; color: #5a4f45; }
.rch-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px; background: #2a1c13; color: #fff !important; font-size: 12.5px !important; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; transition: background .2s, transform .2s; }
.rch-cta:hover { background: #bc8c3f; transform: translateY(-1px); }
.rch-panel.is-pulse .rch-dist span, .rch-panel.is-pulse .rch-tip { animation: rch-in .45s cubic-bezier(.2,.7,.2,1); }
@keyframes rch-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* starting points: distance ladder */
.rch-label { margin: 0 0 8px !important; font-size: 11px !important; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #bc8c3f !important; }
.rch-list { display: grid; }
.rch-row { display: grid; grid-template-columns: 112px minmax(0,1fr) 62px; align-items: center; gap: 14px; width: 100%; padding: 14px 4px; border: 0; border-top: 1px solid #ece2cb; background: none; text-align: left; font: inherit; cursor: pointer; transition: background .2s, padding .2s; }
.rch-row:last-child { border-bottom: 1px solid #ece2cb; }
.rch-row-name { font-size: 15px !important; color: #5f5247; transition: color .2s; }
.rch-row-km { text-align: right; font-family: 'Playfair Display', Georgia, serif; font-size: 15px !important; font-style: italic; color: #9a8a73; transition: color .2s; }
.rch-bar { display: block; height: 6px; border-radius: 99px; background: #efe6d0; overflow: hidden; }
.rch-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg,#d9bb7d,#bc8c3f); transform-origin: left; transition: background .25s; }
.rch-row:hover { background: rgba(243,234,210,.45); }
.rch-row:hover .rch-row-name { color: #2a1c13; }
.rch-row.is-on { background: #f6edd6; padding-left: 14px; padding-right: 14px; box-shadow: inset 3px 0 0 #bc8c3f; border-radius: 0 10px 10px 0; }
.rch-row.is-on .rch-row-name { color: #2a1c13; font-weight: 600; }
.rch-row.is-on .rch-row-km { color: #8a5a22; }
.rch-row.is-on .rch-bar i { background: linear-gradient(90deg,#bc8c3f,#8a5a22); }
.rch-row:focus-visible { outline: 2px solid #bc8c3f; outline-offset: -2px; }
@media (max-width: 480px) { .rch-row { grid-template-columns: 92px minmax(0,1fr) 54px; gap: 10px; } }

/* ways to arrive */
.rch-modes { list-style: none; margin: clamp(22px,3vw,32px) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0,1fr); border-top: 1px solid #e6d6ae; }
@media (min-width: 768px) { .rch-modes { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.rch-modes li { display: flex; align-items: center; gap: 14px; padding: 18px 8px 4px 0; }
@media (min-width: 768px) { .rch-modes li + li { padding-left: 24px; border-left: 1px solid #ece2cb; } }
@media (max-width: 767px) { .rch-modes li { padding: 14px 0; } .rch-modes li + li { border-top: 1px solid #ece2cb; } }
.rch-modes i { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #f4ead2; color: #a8782f; font-size: 16px; }
.rch-modes span { display: grid; gap: 2px; font-size: 14.5px !important; line-height: 1.55 !important; color: #5f5247; }
.rch-modes b { font-size: 11px !important; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #2a1c13; }
.rch-note { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) { .rch-line i, .rch-panel.is-pulse .rch-dist span, .rch-panel.is-pulse .rch-tip { animation: none; } }
.rch-row, .rch-row span { text-transform: none !important; letter-spacing: 0 !important; }
@media (max-width: 480px) { .rch-row { grid-template-columns: 100px minmax(0,1fr) 54px; } .rch-row-name { font-size: 14px !important; } }
.rch-row-km { white-space: nowrap; }
.rch-row { grid-template-columns: 112px minmax(0,1fr) minmax(54px,auto); }
@media (max-width: 480px) { .rch-row { grid-template-columns: 96px minmax(0,1fr) minmax(54px,auto); } }

/* lead line: balanced, no one-word orphan */
.tr-head .tr-lead { text-wrap: balance; max-width: 62ch; margin-left: auto; margin-right: auto; }

/* panel v2: tag, live route trail, count-up distance */
.rch-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 22px; }
.rch-top .rch-from { margin: 0 !important; }
.rch-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #2a1c13; color: #f3dca2; font-size: 11px !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.rch-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #e8bd55; box-shadow: 0 0 0 3px rgba(232,189,85,.25); }

.rch-trail { display: flex; align-items: flex-start; margin: 0 0 22px; padding: 18px 16px 12px; border-radius: 16px; background: rgba(255,255,255,.72); border: 1px solid #efe2bf; }
.rch-node { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 64px; text-align: center; }
.rch-node span { font-size: 12px !important; line-height: 1.25 !important; font-weight: 600; color: #2a1c13; overflow-wrap: anywhere; }
.rch-dot { width: 16px; height: 16px; margin: 12px 0 4px; border-radius: 50%; border: 3px solid #bc8c3f; background: #fff; box-sizing: border-box; }
.rch-node--end i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #2a1c13; color: #e8bd55; font-size: 16px; }
.rch-seg { position: relative; flex: 1; min-width: 40px; height: 40px; }
.rch-seg u { position: absolute; left: 4px; right: 4px; top: 19px; border-top: 2px dashed #d2bb8c; text-decoration: none; }
.rch-seg u::after { content: ''; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #bc8c3f; box-shadow: 0 0 0 5px rgba(188,140,63,.18); animation: rch-run 3.2s cubic-bezier(.5,0,.3,1) infinite; }
.rch-ico { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); display: inline-flex; gap: 6px; padding: 7px 11px; border-radius: 999px; background: #fff; border: 1px solid #e6d6ae; color: #a8782f; font-size: 13px; box-shadow: 0 6px 14px -8px rgba(60,40,20,.5); }
@keyframes rch-run { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }

.rch-main { margin-bottom: 20px; }
.rch-dist { margin: 0 0 8px !important; }
.rch-tip { margin: 0 !important; }
.rch-panel { justify-content: flex-start; }
.rch-cta { margin-top: auto; }
@media (max-width: 480px) { .rch-node { width: 56px; } .rch-seg { min-width: 34px; } .rch-trail { padding: 14px 10px 10px; } }
@media (min-width: 900px) { .rch .tr-head { max-width: 60rem; } .rch .tr-head .tr-lead { max-width: none; text-wrap: nowrap; } }