.sr { padding-block: 10px 60px; }
.sr-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; padding-block: 20px; }
.sr-top h1 { font-size: clamp(34px, 4.4vw, 54px); }
.sr-top p { font-size: 18px; color: var(--ink-soft); max-inline-size: 560px; }
.sr-top b { background: var(--sun); border-radius: 12px; padding: 10px 16px; font-family: var(--f-head); font-weight: 600; }
.sr-road { position: relative; background: #3b3a3c; border-radius: 26px; padding: 70px 30px 36px; margin-block-start: 20px; overflow: hidden; }
.sr-road::before { content: ""; position: absolute; inset-inline: 30px; inset-block-start: 40px; border-block-start: 6px dashed var(--sun); }
.sr-bus { position: absolute; inset-block-start: 8px; inset-inline-start: 30px; inline-size: 84px; block-size: 46px; animation: sr-drive 11s linear infinite; z-index: 1; }
@keyframes sr-drive { from { translate: 0 0; } to { translate: calc(100vw - 200px) 0; } }
@media (prefers-reduced-motion: reduce) { .sr-bus { animation: none; } }
.sr-stops { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.sr-stop { background: #fff; border-radius: 16px; padding: 20px 18px; position: relative; }
.sr-stop::before { content: "STOP " attr(data-n); position: absolute; inset-block-start: -40px; inset-inline-start: 18px; background: var(--coral); color: #fff; font-family: var(--f-head); font-weight: 700; font-size: 13px; letter-spacing: .08em; border-radius: 6px; padding: 4px 10px; }
.sr-stop b { font-family: var(--f-head); font-size: 19px; display: block; margin-block-end: 6px; }
.sr-stop p { font-size: 14.5px; color: var(--ink-soft); }
.sr-lower { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; margin-block-start: 44px; }
.sr-lower h2 { font-size: 24px; margin-block-end: 14px; }
.sr-tickets { display: grid; gap: 10px; }
.sr-ticket { display: grid; grid-template-columns: 1fr 1.1fr; background: var(--paper); border-radius: 12px; overflow: hidden; }
.sr-ticket span { padding: 14px 16px; font-weight: 500; border-inline-end: 3px dotted #fff; position: relative; }
.sr-ticket em { font-style: normal; padding: 14px 16px; background: #fff3d1; }
.sr-lunch { background: var(--teal); color: #fff; border-radius: 26px 26px 26px 6px; padding: 26px; }
.sr-lunch h2 { color: #fff; }
.sr-lunch ul { list-style: none; padding: 0; display: grid; gap: 12px; }
.sr-lunch li { background: rgb(255 255 255 / .14); border-radius: 12px; padding: 12px 14px; }
@media (max-width: 900px) { .sr-stops { grid-template-columns: 1fr 1fr; row-gap: 56px; } .sr-lower { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .sr-stops { grid-template-columns: 1fr; } .sr-ticket { grid-template-columns: 1fr; } .sr-ticket span { border: 0; } .sr-road { padding-inline: 16px; } }