/* Services — "All aboard" (view.js). Without JavaScript only the "at a glance" list shows.
   Everything is line art; only the train has colour until a zone is hovered or chosen. */
.fratoz-services {
	--red: #ab1f24; --red-hi: #e0262d; --ink: #141414; --sand: #f5f1ed; --beige: #efe6da;
	--mont: var(--wp--preset--font-family--montserrat, Montserrat, sans-serif); --body: var(--wp--preset--font-family--be-vietnam-pro, sans-serif);
	margin-block: 0 !important;
	color: var(--ink);
}
.fratoz-services:not(.is-ready) .city { display: none; }
.fratoz-services, .fratoz-services *, .fratoz-services *::before, .fratoz-services *::after { box-sizing: border-box; }
.fratoz-services .tag { display: inline-block; margin: 0; background: var(--red); color: #fff; font: 800 .78rem/1 var(--mont); letter-spacing: .14em; text-transform: uppercase; padding: .55rem .7rem; }
.fratoz-services h1, .fratoz-services h2, .fratoz-services h3 { font-family: var(--mont); font-weight: 900; text-transform: uppercase; line-height: .95; margin: 0; }
.fratoz-services .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .9rem 1.2rem; border: 2px solid var(--ink); color: var(--ink); font: 800 .8rem/1 var(--mont); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; background: #fff; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.fratoz-services .btn:hover { transform: translateY(-2px); }
.fratoz-services .btn.solid { background: var(--red); border-color: var(--red); color: #fff; }
.fratoz-services .btn.solid:hover { background: var(--ink); border-color: var(--ink); }
.fratoz-services .wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }
.fratoz-services .stops button:focus-visible, .fratoz-services .btn:focus-visible, .fratoz-services .pop .x:focus-visible, .fratoz-services .svc h3 a:focus-visible { outline: 3px solid var(--red-hi); outline-offset: 2px; }

.fratoz-services .city { position: relative; height: calc(100vh - var(--fzs-top, 72px)); height: calc(100svh - var(--fzs-top, 72px)); min-height: 560px; overflow: hidden; background: #fff; }
.fratoz-services .city svg.map { position: absolute; inset: 0; width: 100%; height: 100%; }
.fratoz-services .city .fade { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 46%; background: linear-gradient(90deg, #fff 52%, rgba(255,255,255,0)); pointer-events: none; transition: opacity .6s; }
.fratoz-services .city.zoomed .fade { opacity: 0; }
.fratoz-services .map * { vector-effect: non-scaling-stroke; }

.fratoz-services .map .o { fill: #fff; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.fratoz-services .map .o.s { fill: #f6f4f1; }
.fratoz-services .map .ln { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.fratoz-services .map .road { fill: #f4f2ef; stroke: var(--ink); stroke-width: 1.1; }
.fratoz-services .map .dash { fill: none; stroke: #bdb7ae; stroke-width: 1.3; stroke-dasharray: 8 8; }
.fratoz-services .map .win { fill: #fff; stroke: var(--ink); stroke-width: .9; }
.fratoz-services .map .acc { fill: #fff; stroke: var(--ink); stroke-width: 1.4; }
.fratoz-services .map .accl { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.fratoz-services .map .bar { fill: var(--ink); }
.fratoz-services .map .mk { color: var(--ink); }
.fratoz-services .map .ink { fill: var(--ink); }
.fratoz-services .map text { font-family: var(--mont); font-weight: 900; text-transform: uppercase; }
.fratoz-services .map .lbox { fill: var(--red); stroke: #fff; stroke-width: 3px; paint-order: stroke; letter-spacing: .04em; }
.fratoz-services .map .lnum { fill: var(--red); stroke: var(--ink); stroke-width: 1.4; }
.fratoz-services .map .lnum + text { fill: #fff; font-size: 18px; text-anchor: middle; dominant-baseline: central; }
.fratoz-services .map .ping { fill: none; stroke: var(--red); stroke-width: 2; animation: fzs-ping 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes fzs-ping { from { transform: scale(1); opacity: .8; } to { transform: scale(2.2); opacity: 0; } }

.fratoz-services .map .train .tw { fill: #fff; }
.fratoz-services .map .train .tred { fill: var(--red); stroke: var(--ink); stroke-width: 1.2; }
.fratoz-services .map .train .tl { color: var(--red); }
.fratoz-services .map .train .redl { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; }

.fratoz-services .map .k, .fratoz-services .map .acc, .fratoz-services .map .lbox, .fratoz-services .map .lnum { transition: fill .35s, color .35s; }
.fratoz-services .map.hot1 .z1 .o, .fratoz-services .map.at1 .z1 .o, .fratoz-services .map.hot2 .z2 .o, .fratoz-services .map.at2 .z2 .o, .fratoz-services .map.hot3 .z3 .o, .fratoz-services .map.at3 .z3 .o { fill: var(--beige); }
.fratoz-services .map.hot1 .z1 .o.s, .fratoz-services .map.at1 .z1 .o.s, .fratoz-services .map.hot2 .z2 .o.s, .fratoz-services .map.at2 .z2 .o.s, .fratoz-services .map.hot3 .z3 .o.s, .fratoz-services .map.at3 .z3 .o.s { fill: #e7d9c6; }
.fratoz-services .map.hot1 .z1 .roof, .fratoz-services .map.at1 .z1 .roof, .fratoz-services .map.hot2 .z2 .roof, .fratoz-services .map.at2 .z2 .roof, .fratoz-services .map.hot3 .z3 .roof, .fratoz-services .map.at3 .z3 .roof,
.fratoz-services .map.hot1 .z1 .acc, .fratoz-services .map.at1 .z1 .acc, .fratoz-services .map.hot2 .z2 .acc, .fratoz-services .map.at2 .z2 .acc, .fratoz-services .map.hot3 .z3 .acc, .fratoz-services .map.at3 .z3 .acc,
.fratoz-services .map.hot1 .z1 .lnum, .fratoz-services .map.at1 .z1 .lnum, .fratoz-services .map.hot2 .z2 .lnum, .fratoz-services .map.at2 .z2 .lnum, .fratoz-services .map.hot3 .z3 .lnum, .fratoz-services .map.at3 .z3 .lnum { fill: var(--red); }
.fratoz-services .map.hot1 .z1 .lnum + text, .fratoz-services .map.at1 .z1 .lnum + text, .fratoz-services .map.hot2 .z2 .lnum + text, .fratoz-services .map.at2 .z2 .lnum + text, .fratoz-services .map.hot3 .z3 .lnum + text, .fratoz-services .map.at3 .z3 .lnum + text { fill: #fff; }
.fratoz-services .map.hot1 .z1 .lbox, .fratoz-services .map.at1 .z1 .lbox, .fratoz-services .map.hot2 .z2 .lbox, .fratoz-services .map.at2 .z2 .lbox, .fratoz-services .map.hot3 .z3 .lbox, .fratoz-services .map.at3 .z3 .lbox { fill: #fff6cf; stroke: var(--red); filter: drop-shadow(0 0 5px rgba(255,200,90,.95)); }
.fratoz-services .map.hot1 .z1 .lnum, .fratoz-services .map.at1 .z1 .lnum, .fratoz-services .map.hot2 .z2 .lnum, .fratoz-services .map.at2 .z2 .lnum, .fratoz-services .map.hot3 .z3 .lnum, .fratoz-services .map.at3 .z3 .lnum { filter: drop-shadow(0 0 5px rgba(255,200,90,.95)); }
.fratoz-services .map.hot1 .z1 .accl, .fratoz-services .map.at1 .z1 .accl, .fratoz-services .map.hot2 .z2 .accl, .fratoz-services .map.at2 .z2 .accl, .fratoz-services .map.hot3 .z3 .accl, .fratoz-services .map.at3 .z3 .accl { stroke: var(--red); }
.fratoz-services .map.hot1 .z1 .win, .fratoz-services .map.at1 .z1 .win, .fratoz-services .map.hot2 .z2 .win, .fratoz-services .map.at2 .z2 .win, .fratoz-services .map.hot3 .z3 .win, .fratoz-services .map.at3 .z3 .win { fill: #ffe3a3; }
.fratoz-services .map.hot1 .z1 .mk, .fratoz-services .map.at1 .z1 .mk, .fratoz-services .map.hot2 .z2 .mk, .fratoz-services .map.at2 .z2 .mk, .fratoz-services .map.hot3 .z3 .mk, .fratoz-services .map.at3 .z3 .mk { color: #fff; }
.fratoz-services .map.hot2 .z2 .bar.r, .fratoz-services .map.at2 .z2 .bar.r { fill: var(--red); }
.fratoz-services .map [data-stop] { cursor: pointer; }
.fratoz-services .map .spin { animation: fzs-spin 18s linear infinite; }
@keyframes fzs-spin { to { transform: rotate(360deg); } }
.fratoz-services .map .eq rect { animation: fzs-eq 1.1s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes fzs-eq { from { transform: scaleY(.25); } }
@keyframes fzs-blink { 50% { opacity: .25; } }
.fratoz-services .map .car { animation: fzs-drive linear infinite; }
.fratoz-services .map .train .speed { opacity: 0; transition: opacity .3s; }
.fratoz-services .map.moving:not(.rev) .train .speed.fwd, .fratoz-services .map.moving.rev .train .speed.rev { opacity: 1; }

.fratoz-services .intro { position: absolute; z-index: 5; left: clamp(1rem, 4vw, 3.5rem); top: clamp(1.5rem, 5vh, 3.5rem); max-width: 26rem; }
.fratoz-services .intro h1 { font-size: clamp(3rem, 7vw, 5.6rem); margin: 1rem 0 .9rem; }
.fratoz-services .intro h1 em { font-style: normal; color: var(--red); }
.fratoz-services .intro p:not(.tag) { margin: 0 0 1.4rem; font-size: 1.12rem; background: rgba(255,255,255,.85); }
.fratoz-services .intro > :not(.stops) { transition: opacity .4s, transform .4s; }
.fratoz-services .city.zoomed .intro > :not(.stops) { opacity: 0; transform: translateX(-20px); pointer-events: none; }
.fratoz-services .intro .stops { transition: transform .5s cubic-bezier(.65,0,.25,1); }
.fratoz-services .city.zoomed .intro .stops { transform: translateY(var(--up, -300px)); }
.fratoz-services .stops { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.fratoz-services .stops button { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem .9rem .55rem .55rem; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font: 800 .78rem/1 var(--mont); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.fratoz-services .stops button b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff; font-size: .72rem; }
.fratoz-services .stops button:hover, .fratoz-services .stops button.on { background: var(--ink); color: #fff; }
.fratoz-services .board { position: absolute; z-index: 5; left: 50%; top: 1.2rem; transform: translateX(-50%); display: flex; align-items: center; gap: .7rem; padding: .6rem 1rem; background: var(--ink); color: #ffd36b; font: 800 .78rem/1 var(--mont); letter-spacing: .12em; text-transform: uppercase; border-radius: 6px; box-shadow: 0 8px 20px rgba(20,20,20,.2); white-space: nowrap; }
.fratoz-services .board i { width: 8px; height: 8px; border-radius: 50%; background: #ffd36b; animation: fzs-blink 1.2s steps(1) infinite; }

.fratoz-services .pop { position: absolute; z-index: 10; left: 0; top: 0; width: min(420px, calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow: auto; background: var(--sand); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--red); padding: 1.5rem 1.6rem 1.6rem; visibility: hidden; clip-path: inset(-14px 100% -14px -14px); transition: clip-path .45s cubic-bezier(.65,0,.25,1), visibility 0s .45s; }
.fratoz-services .pop.pl { clip-path: inset(-14px -14px -14px 100%); }

.fratoz-services .parrow { position: absolute; z-index: 11; left: 0; top: 0; width: 0; height: 0; border: 24px solid transparent; border-left-width: 0; border-right: 36px solid var(--ink); opacity: 0; transition: opacity .3s; pointer-events: none; }
.fratoz-services .parrow.pl { border-right: 0; border-left: 36px solid var(--ink); }
.fratoz-services .parrow.on { opacity: 1; transition-delay: .3s; }
@media (max-width: 820px) { .fratoz-services .parrow { display: none; } }
.fratoz-services .pop.on { visibility: visible; clip-path: inset(-14px -14px -14px -40px); transition: clip-path .55s cubic-bezier(.65,0,.25,1); }
.fratoz-services .pop.on.pl { clip-path: inset(-14px -40px -14px -14px); }
.fratoz-services .pop > * { opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .4s cubic-bezier(.34,1.4,.64,1); }
.fratoz-services .pop.on > * { opacity: 1; transform: none; }
.fratoz-services .pop.on > :nth-child(2) { transition-delay: .2s; } .pop.on > :nth-child(3) { transition-delay: .26s; } .pop.on > :nth-child(4) { transition-delay: .34s; } .pop.on > :nth-child(5) { transition-delay: .42s; } .pop.on > :nth-child(6) { transition-delay: .5s; }
.fratoz-services .pop .x { position: absolute; right: .6rem; top: .4rem; border: 0; background: none; font: 700 1.6rem/1 var(--mont); cursor: pointer; }
.fratoz-services .pop .kicker { font: 900 .74rem/1 var(--mont); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.fratoz-services .pop h2 { font-size: 2rem; margin: .5rem 0 .6rem; }
.fratoz-services .pop .lead { margin: 0 0 1rem; }
.fratoz-services .svc { border-top: 2px solid var(--ink); padding: .9rem 0 1rem; }
.fratoz-services .svc h3 { font-size: 1.05rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.fratoz-services .svc h3 a { font: 800 .7rem/1 var(--mont); letter-spacing: .08em; color: var(--red); text-decoration: none; white-space: nowrap; }
.fratoz-services .svc p { margin: .35rem 0 .6rem; font-size: .95rem; }
.fratoz-services .chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.fratoz-services .chips em { font-style: normal; font: 700 .7rem/1 var(--mont); padding: .38rem .5rem; background: #fff; border: 1.5px solid var(--ink); }
.fratoz-services .chips em:first-child { background: var(--ink); color: #fff; }
.fratoz-services .pop .next { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.fratoz-services .pop ul.ticks { list-style: none; padding: 0; margin: 0 0 1rem; }
.fratoz-services .pop ul.ticks li { padding: .35rem 0 .35rem 1.6rem; position: relative; font-weight: 600; }
.fratoz-services .pop ul.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--red); font-weight: 900; }
@media (max-width: 820px) {
	.fratoz-services .intro { top: 1rem; max-width: none; right: 1rem; }
	.fratoz-services .intro h1 { font-size: 2.6rem; margin: .7rem 0 .5rem; }
	.fratoz-services .intro p:not(.tag) { font-size: 1rem; margin-bottom: .8rem; }
	.fratoz-services .stops { flex-direction: row; flex-wrap: wrap; }
	.fratoz-services .board { top: auto; bottom: 1rem; }
	.fratoz-services .city.zoomed .intro .stops { opacity: 0; pointer-events: none; }
	.fratoz-services .pop { top: auto !important; bottom: 0; right: 0; left: 0 !important; width: auto; max-height: 72%; transform: none; box-shadow: 0 -6px 0 var(--red); border-width: 3px 0 0; clip-path: inset(100% 0 0 0); }
	.fratoz-services .pop.on { clip-path: inset(-10px 0 0 0); }
}

.fratoz-services .glance { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--sand); }
.fratoz-services .glance h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin: .9rem 0 2rem; }
.fratoz-services .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.fratoz-services .col { background: #fff; border: 2px solid var(--ink); padding: 1.4rem; }
.fratoz-services .col .kicker { font: 900 .74rem/1 var(--mont); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.fratoz-services .col h3 { font-size: 1.4rem; margin: .5rem 0 1rem; }
.fratoz-services .col a { display: block; padding: .6rem 0; border-top: 1px solid #ddd3c6; text-decoration: none; font: 800 .95rem/1.3 var(--mont); }
.fratoz-services .col a span { display: block; font: 400 .88rem/1.4 var(--body); color: #5a534b; }
.fratoz-services .col a:hover { color: var(--red); }
@media (max-width: 900px) { .fratoz-services .cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fratoz-services *, .fratoz-services *::before, .fratoz-services *::after { animation: none !important; transition: none !important; } }