.service-van-road { position:relative; width:100%; height:66px; margin:5px 0 13px; overflow:hidden; border-bottom:1px solid #91b2c940; }
.service-van-road::before { content:''; position:absolute; bottom:0; left:0; right:0; height:7px; background:repeating-linear-gradient(90deg,#adc3d450 0 13px,transparent 13px 29px); opacity:.45; }
.service-van-drive { position:absolute; inset:0; animation:service-van-cross 12s linear infinite; }
.service-van { position:absolute; left:0; bottom:2px; width:112px; height:56px; animation:service-van-bounce .8s ease-in-out infinite alternate; }
@keyframes service-van-cross { from { transform:translateX(-120px); } to { transform:translateX(100%); } }
@keyframes service-van-bounce { from { translate:0 0; } to { translate:0 -1px; } }
@media(max-width:760px) { .service-van-road { height:57px; margin:4px 0 10px; } .service-van { width:96px; height:48px; } .service-van-drive { animation-duration:9s; } }
@media(prefers-reduced-motion:reduce) { .service-van-drive,.service-van { animation:none; } .service-van-drive { transform:translateX(15%); } }

/* Keep all copy in one column, with the van below the description. */
body .service-area-strip.wrap .service-area-copy { display:flex!important; flex-direction:column!important; align-items:flex-start!important; gap:0!important; }
body .service-area-strip.wrap .service-area-copy > span:not(:where(.home-visual-strong,.home-visual-b)) { align-self:flex-start; }
body .service-area-strip.wrap .service-area-copy > :is(strong,:where(.home-visual-strong)) { display:block; margin:14px 0 8px!important; width:100%; }
body .service-area-strip.wrap .service-area-copy > p { margin:0!important; width:100%; max-width:600px; }
body .service-area-strip.wrap .service-van-road { margin:10px 0 0!important; }
@media(min-width:761px) {
 body .service-area-strip.wrap { display:grid!important; grid-template-columns:minmax(0,1fr) 330px!important; gap:32px!important; align-items:center!important; padding:24px!important; }
 body .service-area-strip.wrap .service-area-copy > :is(strong,:where(.home-visual-strong)) { font-size:26px!important; line-height:1.25!important; }
 body .service-area-strip.wrap .service-area-copy > p { font-size:14px!important; line-height:1.6!important; }
 body .service-area-strip.wrap .barcelona-map { width:100%!important; min-height:180px!important; height:180px!important; align-self:center!important; }
 body .service-area-strip.wrap .service-van-road { height:54px; }
}
@media(max-width:760px) { body .service-area-strip.wrap .service-van-road { margin-bottom:14px!important; } }

.van-hello { animation:van-hello 3s ease-in-out infinite; transform-origin:68px 18px; }
@keyframes van-hello { 0%,100% { opacity:0; transform:scale(.85); } 20%,70% { opacity:1; transform:scale(1); } }
@media(prefers-reduced-motion:reduce) { .van-hello { animation:none; } }

/* Illustrated transparent mascot van. */
body .service-area-strip.wrap .service-van-road { height:94px!important; }
body .service-area-strip.wrap .service-van-cartoon { width:140px; height:auto; bottom:-1px; object-fit:contain; transform-origin:50% 80%; animation:service-van-ride 1.6s ease-in-out infinite; }
@keyframes service-van-ride {
 0%,100% { translate:0 0; transform:rotate(-1deg); }
 18% { translate:0 -2px; transform:rotate(.7deg); }
 34% { translate:0 0; transform:rotate(1.2deg); }
 52% { translate:0 -4px; transform:rotate(-1.2deg); }
 68% { translate:0 -1px; transform:rotate(.5deg); }
 84% { translate:0 -3px; transform:rotate(.9deg); }
}
@media(prefers-reduced-motion:reduce) { body .service-area-strip.wrap .service-van-cartoon { animation:none; } }
.service-van-drive { animation-name:service-van-cartoon-cross; }
@keyframes service-van-cartoon-cross { from { transform:translateX(-150px); } to { transform:translateX(100%); } }
@media(max-width:760px) { body .service-area-strip.wrap .service-van-road { height:82px!important; } body .service-area-strip.wrap .service-van-cartoon { width:122px; } }

/* Town bubbles follow the same ten-second journey as the van. */
body .service-area-strip.wrap .service-van-road { height:112px!important; }
.service-van-drive { animation-duration:10s!important; }
.service-van-towns { position:absolute; top:0; left:0; right:0; height:26px; pointer-events:none; }
.service-van-towns > span:not(:where(.home-visual-strong,.home-visual-b)) { position:absolute; left:50%; top:0; padding:5px 10px; border:1px solid #ffae3f60; border-radius:20px; background:#142d3e; color:#ffcf8a; font:700 11px/1.2 system-ui; white-space:nowrap; opacity:0; animation:service-town-pop 10s linear infinite; animation-delay:var(--town-delay); }
@keyframes service-town-pop { 0% { opacity:0; transform:translate(-50%,6px) scale(.95); } 2%,10% { opacity:1; transform:translate(-50%,0) scale(1); } 13%,100% { opacity:0; transform:translate(-50%,-4px) scale(.98); } }
@media(max-width:760px) { body .service-area-strip.wrap .service-van-road { height:100px!important; } .service-van-towns > span:not(:where(.home-visual-strong,.home-visual-b)) { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .service-van-drive { animation:none!important; } .service-van-towns > span:not(:where(.home-visual-strong,.home-visual-b)) { animation:none; display:none; } .service-van-towns > span:not(:where(.home-visual-strong,.home-visual-b)):first-child { display:block; opacity:1; transform:translateX(-50%); } }

/* Reveal each town at the place the van passes. */
.service-van-towns > span:not(:where(.home-visual-strong,.home-visual-b)) { left:var(--town-x); padding:4px 7px; font-size:10px; }
@keyframes service-town-pop { 0% { opacity:0; transform:translate(-50%,6px) scale(.95); } 2%,10% { opacity:1; transform:translate(-50%,0) scale(1); } 13%,100% { opacity:0; transform:translate(-50%,-4px) scale(.98); } }
@media(max-width:760px) { .service-van-towns > span:not(:where(.home-visual-strong,.home-visual-b)) { font-size:9px; padding:4px 6px; } .service-van-towns > span:not(:where(.home-visual-strong,.home-visual-b)):first-child { left:14%; } .service-van-towns > span:not(:where(.home-visual-strong,.home-visual-b)):last-child { left:84%; } }

/* Soft exhaust puffs trail behind the moving van. */
.service-van-smoke { position:absolute; left:16px; bottom:17px; width:1px; height:1px; }
.service-van-smoke i { position:absolute; left:0; top:0; width:10px; height:7px; border-radius:50%; background:#e5edf1; opacity:0; animation:service-van-exhaust 1.8s ease-out infinite; }
.service-van-smoke i:nth-child(2) { animation-delay:.6s; }
.service-van-smoke i:nth-child(3) { animation-delay:1.2s; }
@keyframes service-van-exhaust {
 0% { opacity:0; transform:translate(0,0) scale(.5); }
 12% { opacity:.65; }
 55% { opacity:.35; }
 100% { opacity:0; transform:translate(-45px,-10px) scale(2.5); }
}
@media(max-width:760px) { .service-van-smoke { left:14px; bottom:15px; } }
@media(prefers-reduced-motion:reduce) { .service-van-smoke { display:none; } }

/* Small roadside landscape, kept behind the van and repair scenes. */
.service-van-road::after {
 content:'';
 position:absolute;
 left:0;
 right:0;
 bottom:7px;
 height:66px;
 pointer-events:none;
 opacity:.85;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='66' viewBox='0 0 340 66'%3E%3Cellipse cx='45' cy='64' rx='27' ry='2' fill='%23224242'/%3E%3Cpath d='M44 64V30m0 17-10-10m10 4 11-12' stroke='%23927755' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='31' cy='29' r='13' fill='%2327584f'/%3E%3Ccircle cx='53' cy='27' r='16' fill='%2337715e'/%3E%3Ccircle cx='43' cy='15' r='14' fill='%23428669'/%3E%3Cpath d='M37 11q5-5 11-3' fill='none' stroke='%237bb489' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M208 64V32' stroke='%23927755' stroke-width='3'/%3E%3Cpath d='m208 11-17 30h9l-15 15h46l-15-15h9z' fill='%23346d5e'/%3E%3Cpath d='m208 16-8 14' stroke='%23579475' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M116 64a10 10 0 0 1 17-7 9 9 0 0 1 17 7' fill='%23295b50'/%3E%3Cpath d='M287 64a8 8 0 0 1 13-6 7 7 0 0 1 13 6' fill='%23316b58'/%3E%3Cpath d='m81 64 2-5m-2 5-3-3m179 3 3-6m-3 6-3-3' stroke='%234e866b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
 background-repeat:repeat-x;
 background-position:left bottom;
 background-size:340px 66px;
}
.service-repair-stations { z-index:1; }
.service-van-towns { z-index:3; }
@media(max-width:760px) { .service-van-road::after { height:52px; background-size:270px 52px; opacity:.7; } }

/* Soft moon above the roadside landscape. */
body .service-area-strip.wrap .service-van-road {
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cdefs%3E%3CradialGradient id='halo'%3E%3Cstop stop-color='%23cde6ee' stop-opacity='.12'/%3E%3Cstop offset='1' stop-color='%23cde6ee' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='45' cy='45' r='44' fill='url(%23halo)'/%3E%3Ccircle cx='45' cy='45' r='22' fill='%23d9d3c3' fill-opacity='.82'/%3E%3Ccircle cx='37' cy='38' r='4' fill='%23b9b3a5' fill-opacity='.45'/%3E%3Ccircle cx='52' cy='49' r='6' fill='%23b9b3a5' fill-opacity='.35'/%3E%3Ccircle cx='39' cy='54' r='2.5' fill='%23b9b3a5' fill-opacity='.4'/%3E%3C/svg%3E");
 background-repeat:no-repeat;
 background-position:82% -12px;
 background-size:90px 90px;
}
@media(max-width:760px) { body .service-area-strip.wrap .service-van-road { background-size:66px 66px; background-position:88% -6px; } }

/* Illustrated Barcelona nightscape replaces the simple roadside scenery. */
body .service-area-strip.wrap {
 background:linear-gradient(180deg,#06172620,#06172608),url('../img/service-area-barcelona-night.webp') center bottom/cover no-repeat!important;
 overflow:hidden;
}
body .service-area-strip.wrap .service-van-road { background:none!important; border-bottom:0!important; }
body .service-area-strip.wrap .service-van-road::before,body .service-area-strip.wrap .service-van-road::after { display:none!important; }
@media(max-width:760px) {
 body .service-area-strip.wrap { background:#071b2b!important; }
 body .service-area-strip.wrap .service-area-copy { background:linear-gradient(180deg,#071b2b66,#071b2b00),url('../img/service-area-barcelona-night.webp') 75% bottom/auto 100% no-repeat; }
}

/* Full-width scenic journey without the map. */
body .service-area-strip.wrap { grid-template-columns:minmax(0,1fr)!important; gap:0!important; }
body .service-area-strip.wrap .barcelona-map { display:none!important; }
body .service-area-strip.wrap .service-area-copy { width:100%!important; min-width:0; }
body .service-area-strip.wrap .service-van-road { width:100%!important; }
@media(max-width:760px) {
 body .service-area-strip.wrap { background:linear-gradient(180deg,#071b2b66,#071b2b00),url('../img/service-area-barcelona-night.webp') 75% bottom/auto 100% no-repeat!important; }
 body .service-area-strip.wrap .service-area-copy { background:none!important; }
}

/* Comic calls pop up in different places along the journey. */
body .service-area-strip.wrap .service-van-road { height:145px!important; }
.service-comic-calls { position:absolute; inset:0; z-index:4; pointer-events:none; }
.service-comic-bubble { position:absolute; left:var(--call-x); top:4px; width:max-content; max-width:145px; padding:10px 13px; border:2px solid #152332; border-radius:48% 45% 44% 42%; background:#fff8e8; color:#142537; box-shadow:3px 3px 0 #07152565; text-align:center; font:800 12px/1.25 system-ui; opacity:0; transform:translateX(-50%); animation:service-comic-pop 10s ease-in-out infinite; animation-delay:var(--call-delay); }
.service-comic-bubble::after { content:''; position:absolute; bottom:-8px; left:30%; width:13px; height:13px; background:#fff8e8; border-right:2px solid #152332; border-bottom:2px solid #152332; transform:skewY(25deg) rotate(35deg); }
.service-comic-bubble:nth-child(even) { top:13px; border-radius:16px 18px 14px 20px; background:#ffefcb; }
.service-comic-bubble:nth-child(even)::after { background:#ffefcb; left:65%; }
body .service-area-strip.wrap .service-van-towns { top:63px; }
@keyframes service-comic-pop { 0% { opacity:0; transform:translate(-50%,8px) rotate(var(--call-tilt)) scale(.75); } 3%,11% { opacity:1; transform:translate(-50%,0) rotate(var(--call-tilt)) scale(1); } 14%,100% { opacity:0; transform:translate(-50%,-6px) rotate(var(--call-tilt)) scale(.9); } }
@media(max-width:760px) { body .service-area-strip.wrap .service-van-road { height:132px!important; } .service-comic-bubble { max-width:95px; padding:8px 10px; font-size:10px; } .service-comic-bubble:nth-child(3n+1) { left:20%; } .service-comic-bubble:nth-child(3n+2) { left:50%; } .service-comic-bubble:nth-child(3n) { left:80%; } body .service-area-strip.wrap .service-van-towns { top:56px; } }
@media(prefers-reduced-motion:reduce) { .service-comic-calls { display:none; } }

/* Isolate comic calls from the service-area label styles. */
body .service-area-strip.wrap .service-comic-calls .service-comic-bubble {
 color:#142537!important;
 background:#fff6df!important;
 border:2px solid #182a39!important;
 border-radius:45% 43% 44% 40%!important;
 box-shadow:3px 4px 0 #07152555!important;
 font:800 12px/1.3 system-ui!important;
 text-transform:none!important;
 letter-spacing:0!important;
 padding:10px 13px!important;
 top:0!important;
}
body .service-area-strip.wrap .service-comic-calls .service-comic-bubble:nth-child(even) { border-radius:16px 18px 14px 20px!important; }
body .service-area-strip.wrap .service-comic-calls .service-comic-bubble::before { display:none!important; content:none!important; }
body .service-area-strip.wrap .service-comic-calls .service-comic-bubble::after { background:#fff6df!important; }
body .service-area-strip.wrap .service-van-road { height:185px!important; }
body .service-area-strip.wrap .service-van-towns { top:103px; }
@media(max-width:760px) {
 body .service-area-strip.wrap .service-van-road { height:172px!important; }
 body .service-area-strip.wrap .service-van-towns { top:96px; }
 body .service-area-strip.wrap .service-comic-calls .service-comic-bubble { font-size:10px!important; padding:8px 10px!important; }
}

/* Restore the compact landscape while retaining the readable comic bubbles. */
body .service-area-strip.wrap .service-van-road { height:145px!important; }
body .service-area-strip.wrap .service-van-towns { top:63px; }
@media(max-width:760px) {
 body .service-area-strip.wrap .service-van-road { height:132px!important; }
 body .service-area-strip.wrap .service-van-towns { top:56px; }
}

/* Final small height adjustment. */
body .service-area-strip.wrap .service-van-road { height:135px!important; }
@media(max-width:760px) { body .service-area-strip.wrap .service-van-road { height:122px!important; } }

/* Town labels belong to the caller's bubble, leaving the van unobstructed. */
body .service-area-strip.wrap .service-van-towns { display:none!important; }
body .service-area-strip.wrap .service-comic-calls .comic-call-town { display:block!important; margin:0 0 4px!important; padding:0 0 4px!important; border-bottom:1px solid #14253720!important; font:700 9px/1.15 system-ui!important; letter-spacing:.03em!important; color:#775528!important; text-transform:uppercase!important; }
body .service-area-strip.wrap .service-comic-calls .comic-call-message { display:block; font:inherit!important; color:#142537!important; }
body .service-area-strip.wrap .service-comic-calls .service-comic-bubble { max-width:160px; padding:8px 12px!important; }
@media(max-width:760px) { body .service-area-strip.wrap .service-comic-calls .service-comic-bubble { max-width:110px; padding:7px 9px!important; } body .service-area-strip.wrap .service-comic-calls .comic-call-town { font-size:8px!important; margin-bottom:3px!important; padding-bottom:3px!important; } }

/* Clearly readable red location label with a map pin. */
body .service-area-strip.wrap .service-comic-calls .comic-call-town {
 display:flex!important;
 align-items:center;
 justify-content:center;
 gap:4px;
 color:#b32632!important;
 font-size:10px!important;
 font-weight:850!important;
 border-bottom-color:#b3263225!important;
 letter-spacing:0!important;
}
body .service-area-strip.wrap .service-comic-calls .comic-call-town::before {
 content:''!important;
 display:block!important;
 position:static!important;
 flex:0 0 12px;
 width:12px!important;
 height:14px!important;
 margin:0!important;
 padding:0!important;
 border:0!important;
 border-radius:0!important;
 box-shadow:none!important;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b32632' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat!important;
}
@media(max-width:760px) { body .service-area-strip.wrap .service-comic-calls .comic-call-town { font-size:9px!important; } }

/* Location marker for the service-area label. */
body .service-area-strip.wrap .service-area-copy > span:not(:where(.home-visual-strong,.home-visual-b))::before {
 width:14px; height:16px; flex:0 0 14px; border-radius:0; box-shadow:none;
 background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 11-8 11S4 16 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* A slightly more compact service area on mobile. */
@media(max-width:760px) {
 body .service-area-strip.wrap .service-area-copy > span:not(:where(.home-visual-strong,.home-visual-b)) { font-size:9px!important; padding:4px 8px!important; line-height:1.2!important; }
 body .service-area-strip.wrap .service-area-copy > :is(strong,:where(.home-visual-strong)) { margin:12px 0 7px!important; }
 body .service-area-strip.wrap .service-area-copy > p { font-size:13px!important; line-height:1.5!important; }
}

/* Clip the moving van at the landscape edge, not at the inset text column. */
body .service-area-strip.wrap .service-van-road { overflow:visible!important; }
@keyframes service-van-cartoon-cross {
 from { transform:translateX(-180px); }
 to { transform:translateX(calc(100% + 180px)); }
}

/* A longer crossing keeps the van relaxed on the wider desktop landscape. */
@media(min-width:921px) {
 body .service-area-strip.wrap .service-van-drive { animation-duration:16s!important; }
}

/* Mobile bubbles must stack their location and message instead of inheriting flex rows. */
body .service-area-strip.wrap .service-comic-calls .service-comic-bubble { display:block!important; box-sizing:border-box; }
@media(max-width:760px) {
 body .service-area-strip.wrap .service-comic-calls .service-comic-bubble {
 display:block!important;
 width:132px!important;
 max-width:132px!important;
 padding:8px 10px!important;
 font-size:11px!important;
 line-height:1.25!important;
 white-space:normal!important;
 }
 body .service-area-strip.wrap .service-comic-calls .comic-call-message { display:block!important; width:100%!important; margin:0!important; padding:0!important; color:#142537!important; white-space:normal!important; text-align:center!important; font-size:11px!important; line-height:1.25!important; }
 body .service-area-strip.wrap .service-comic-calls .comic-call-town { width:100%!important; margin:0 0 4px!important; padding:0 0 4px!important; font-size:9px!important; }
 body .service-area-strip.wrap .service-comic-bubble:nth-child(3n+1) { left:24%!important; }
 body .service-area-strip.wrap .service-comic-bubble:nth-child(3n) { left:76%!important; }
}