/* The itinerary supplies the visual vocabulary: paper, sunlight and arrows. */
.mv-motion-word, .mv-story-word { display: inline-block; }
.mv-motion-word { padding-bottom: .08em; margin-bottom: -.08em; }
.mv-tilted { transform-style: preserve-3d; }
.mv-spotlight { position: relative; isolation: isolate; overflow: hidden; }
.mv-spotlight__light { position: absolute; left: 0; top: 0; width: 320px; height: 320px; margin: -160px; border-radius: 50%; background: radial-gradient(circle, #397ad51f, #397ad508 45%, transparent 70%); opacity: 0; pointer-events: none; z-index: -1; transition: opacity 220ms ease; }
.mv-spotlight:hover .mv-spotlight__light { opacity: 1; }
.mv-spotlight:focus-within { box-shadow: inset 3px 0 var(--mv-blue); }
.hero-luggage-tag.mv-tilted { transform-origin: 50% 0; }
.hero-luggage-tag::after { content: ''; position: absolute; width: 6px; height: 6px; left: 14px; top: 13px; border-radius: 50%; background: #f4f7ff; box-shadow: inset 0 1px 2px #062b6670; }
.hero-luggage-tag { position: relative; }
.mv-magnetic-arrow { display: inline-block; margin-left: 12px; }
.print-end--route { position: relative; overflow: hidden; }
.print-end--route > .shell { position: relative; }
.motion-route { width: min(1080px, 88%); margin: 0 auto 34px; pointer-events: none; }
.motion-route svg { display: block; width: 100%; overflow: visible; }
.motion-route__base { stroke: #9fb8da; stroke-width: 1.5; stroke-dasharray: 5 9; }
.motion-route__line { stroke: var(--mv-blue); stroke-width: 2.5; }
.motion-route__stops circle { fill: var(--mv-yellow); stroke: var(--mv-paper); stroke-width: 4; }
.motion-route__traveller circle { fill: var(--mv-yellow); stroke: #f4f8ff; stroke-width: 4; }
.motion-route__traveller path { stroke: var(--mv-navy); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.stages-index a, .cf-index a, .faq-topics a { transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease; }
.stages-index a.is-reading, .cf-index a.is-reading, .faq-topics a.is-reading { background: #e2edfc; color: var(--mv-blue); box-shadow: inset 0 -3px var(--mv-yellow); }
.stages-index a.is-reading b { background: var(--mv-yellow); color: var(--mv-navy); }
.service-day__timeline strong { font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
 .mv-help-grid a .help-photo img { transition: transform 550ms cubic-bezier(.23,1,.32,1); }
 .mv-help-grid a:hover .help-photo img { transform: scale(1.035); }
 .print-link, .text-link { transition: color 180ms ease, border-color 180ms ease; }
 .hero-route a { transition: color 180ms ease, background-color 180ms ease; }
 .hero-route a:hover { color: var(--mv-blue); background: #ffc40018; }
}
@media (max-width: 760px) {
 .motion-route { margin-bottom: 25px; width: 94%; }
 .motion-route svg { min-height: 65px; }
 .mv-motion-word { padding-bottom: .06em; margin-bottom: -.06em; }
}
@media (prefers-reduced-motion: reduce) {
 .mv-spotlight__light { display: none; }
 .mv-help-grid a:hover .help-photo img { transform: none; }
 .stages-index a, .cf-index a, .faq-topics a, .hero-route a, .mv-help-grid a .help-photo img { transition: none; }
}

/* Touch-first controls, inspired by React Bits Stepper and Pill Nav. */
.touch-steps[hidden], .touch-steps-controls[hidden], .is-touch-stepper li[hidden] { display: none !important; }
.touch-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 24px; background: #e7eef9; padding: 5px; border-radius: 14px; }
.touch-steps button { display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 10px; padding: 12px 5px; min-height: 48px; background: transparent; color: var(--mv-navy); font: 500 13px/1.2 var(--body); cursor: pointer; }
.touch-steps button span { font-size: 10px; opacity: .6; }
.touch-steps button[aria-selected="true"] { background: var(--mv-yellow); box-shadow: 0 2px 5px #062b660d; }
.touch-steps-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: 1px solid #d5e0ef; }
.touch-steps-controls button { width: 48px; min-height: 48px; border-radius: 50%; border: 1px solid #b9cce5; background: #f4f8ff; color: var(--mv-navy); font: 400 21px var(--body); cursor: pointer; }
.touch-steps-controls button:disabled { opacity: .35; cursor: default; }
.touch-steps-controls span { color: var(--mv-muted); font: 500 12px var(--body); font-variant-numeric: tabular-nums; }
.nav-whatsapp-touch { display: none; }
.touch-steps button:focus-visible, .touch-steps-controls button:focus-visible, .is-touch-stepper [role="tabpanel"]:focus-visible { outline: 3px solid var(--mv-blue); outline-offset: 3px; }
@media (max-width: 1024px) {
 .mv-visual .nav-toggle { min-width: 44px; min-height: 44px; padding-inline: 8px; }
 .mv-visual .whatsapp-float { min-width: 48px; min-height: 48px; bottom: max(12px, env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-right)); }
 .mv-visual .cf-index, .mv-visual .stages-index { scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
 .mv-visual .cf-index a, .mv-visual .stages-index a { scroll-snap-align: start; min-height: 48px; }
 .mv-visual .faq-topics { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 5px 2px 14px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
 .mv-visual .faq-topics a { display: flex; flex-shrink: 0; align-items: center; min-height: 48px; padding: 12px 17px; margin: 0; border-radius: 30px; scroll-snap-align: start; font-size: 13px; }
 .carousel-controls button { min-width: 48px; min-height: 48px; }
}
@media (max-width: 900px) {
 .is-touch-stepper .service-journey__track, .is-touch-stepper .service-journey__stop { display: none; }
 .mv-visual .is-touch-stepper .service-journey__steps { display: block; }
 .mv-visual .is-touch-stepper .service-journey__steps li { display: grid; grid-template-columns: minmax(0, 1fr) 88px; grid-template-rows: auto 1fr; gap: 12px 15px; padding: 8px 0 0; min-height: 130px; text-align: left; }
 .is-touch-stepper .service-journey__steps li img { grid-column: 2; grid-row: 1 / 3; width: 88px; height: 110px; align-self: start; margin: 0; }
 .mv-visual .is-touch-stepper .service-journey__steps h3 { grid-column: 1; margin: 0; font-size: 23px; align-self: start; }
 .is-touch-stepper .service-journey__steps p { grid-column: 1; margin: 0; font-size: 14px; align-self: start; }
 .home .is-touch-stepper .service-journey__footer { margin-top: 18px; }
 .home .is-touch-stepper { padding: 20px; }
 .mv-visual .site-nav { max-height: calc(100dvh - var(--header)); overflow-y: auto; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
 .mv-visual .site-nav__list a { min-height: 48px; display: flex; align-items: center; }
 .mv-visual .nav-whatsapp-touch { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 12px; color: var(--mv-navy); border: 1px solid #b7cbe6; border-radius: 10px; font-size: 14px; }
 .mv-visual .whatsapp-float { position: static; display: flex; width: fit-content; margin: 18px auto; padding: 8px 15px; }
 .mv-visual .whatsapp-float span { display: inline; }
}
@media (max-width: 360px) {
 .mv-visual .site-header .brand span { display: none; }
 .mv-visual .site-header .brand img { width: 35px; height: 42px; }
 .mv-visual .site-header__inner { gap: 12px; }
 .mv-visual .header-booking-mobile { font-size: 11px; padding-inline: 14px; }
 .touch-steps button { font-size: 12px; gap: 4px; }
 .mv-visual .is-touch-stepper .service-journey__steps li { grid-template-columns: minmax(0,1fr) 66px; gap: 10px; min-height: 180px; }
 .is-touch-stepper .service-journey__steps li img { width: 66px; height: 92px; }
 .mv-visual .is-touch-stepper .service-journey__steps h3 { font-size: 21px; }
}
