.itinerary-reel { margin: 38px 0; min-width: 0; }
.itinerary-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; }
.itinerary-heading .eyebrow { color: #3A5A5C; margin-bottom: 8px; font-size: 10px; }
.itinerary-heading h3 { margin: 0; font: 700 clamp(24px, 3vw, 32px)/1.2 var(--serif); }
.itinerary-controls { display: flex; gap: 8px; flex-shrink: 0; }
.itinerary-controls button { width: 44px; height: 44px; border: 1px solid #3A5A5C; border-radius: 50%; background: #3A5A5C; color: white; font-size: 21px; }
.itinerary-controls button:disabled { opacity: .3; cursor: default; }
.itinerary-track { display: flex; gap: 18px; list-style: none; padding: 6px 0 16px; margin: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #3A5A5C #D2D4C6; }
.itinerary-track::after { content: ''; flex: 0 0 calc(28% - 18px); }
.itinerary-step { position: relative; isolation: isolate; flex: 0 0 72%; min-height: 230px; padding: 34px; border: 1px solid #AAC1B8; border-radius: 22px; background: #AAC1B830; color: #2D2A29; scroll-snap-align: start; transition: background .3s ease, border-color .3s ease; overflow: hidden; }
.itinerary-step.is-current { background: #3A5A5C; color: white; border-color: #3A5A5C; }
.itinerary-number { position: absolute; z-index: -1; right: 16px; top: -24px; font: 700 150px var(--serif); opacity: .1; }
.itinerary-step-label { font-size: 11px; letter-spacing: 2px; }
.itinerary-step p { position: relative; margin: 25px 0 30px; max-width: 90%; font: 700 clamp(22px, 3vw, 30px)/1.35 var(--serif); overflow-wrap: anywhere; }
.itinerary-line { display: block; height: 3px; width: 52px; background: #DC917C; }
.itinerary-footer { display: flex; justify-content: space-between; gap: 15px; color: #616866; font-size: 12px; margin-top: 12px; }
.itinerary-position { white-space: nowrap; }
.itinerary-track:focus-visible { outline: 2px solid #3A5A5C; outline-offset: 5px; border-radius: 22px; }
@media(max-width:650px) { .itinerary-heading { align-items: flex-end; gap: 12px; } .itinerary-step { flex-basis: 86%; padding: 25px; } .itinerary-track::after { flex-basis: calc(14% - 18px); } .itinerary-footer { font-size: 11px; } }
@media(prefers-reduced-motion:reduce) { .itinerary-step { transition: none; } }